功能需求：點擊刷新圖標，圖標旋轉進入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 = thiswx.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;}}, }

總結

以上是生活随笔為你收集整理的微信小程序实现js控制动画——点击播放动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。