微信小程序实现js控制动画——点击播放动画

功能需求：点击刷新图标，图标旋转进入Loading状态，加载完毕，动画停止

//index.wxml
<view class="flex-col group_2">
	<text decode="decode" class="text_1">{{userInfo.nickName}}</text>
	<view class="flex-row items-center section_1" hover-class="down_state" hover-stay-time="{{50}}" catchtap="setAnimation">
		<van-icon name="http://xxx.xxxx.com/app/xxx.png" class="image_1" />
		<text decode="decode" class="text_2">余额</text>
		<van-icon animation="{{animation}}" name="/assets/reflash.png" />
	</view>
</view>

// index.js
Page({
  data: {
    animation: null
  },
  setAnimation() {
    this.startAnimationInterval()
    this.reloadInfo()
  },
  reloadInfo() {
    const that = this
    wx.showLoading({
      title: '刷新中',
      mask: true
    })
    getUserInfo().then(res => {
      wx.hideLoading()
      if (res.code === 200) {
        wx.showToast({
          title: '刷新成功',
          icon: 'none',
          duration: 1000
        })
        wx.setStorageSync('userInfo', res.data)
        that.getUsers()
        that.stopAnimationInterval()
      } else {
        wx.showToast({
          title: res.message,
          icon: 'none',
          duration: 2000
        })
      }
    })
  },
  getUsers() {
    let userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({
        userInfo
      })
    }
  },
  /**
   * 实现image旋转动画，每次旋转 120*n度
   */
  rotateAni: function (n) {
    _animation.rotate(120 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },
  /**
   * 开始旋转
   */
  startAnimationInterval: function () {
    var that = this;
    that.rotateAni(++_animationIndex); // 进行一次旋转
    _animationIntervalId = setInterval(function () {
      that.rotateAni(++_animationIndex);
    }, _ANIMATION_TIME); // 每间隔_ANIMATION_TIME进行一次旋转
  },

  /**
   * 停止旋转
   */
  stopAnimationInterval: function () {
    if (_animationIntervalId > 0) {
      clearInterval(_animationIntervalId);
      _animationIntervalId = 0;
    }
  },
}