实现效果（可能有点bug就是你不能等到你写的定时器时间到了，如果到了你在去点击是没有旋转效果）
下面的效果也可以一进页面就可以旋转，我代码有实现。可以看我的代码
index.wxml
<view class="container">
<image src='/resource/images/1/blueRefresh.png' class='img' animation="{{animationData}}"
bindtap='refreshList'></image>
</view>
<button bindtap='stopRefresh'>停止</button>
index.wxss
.img {
width: 50px;
height: 50px;
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
rotateIndex: '',
animationData: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 创建动画
var animation = wx.createAnimation({
duration: 800,
timingFunction: "linear"
})
this.animation = animation
// 执行旋转或者点击图片旋转(如果你想要点击就在图片上添加点击事件我默认是添加的)
// this.refreshList()
},
// 图片一直旋转动画
refreshList: function () {
//连续动画需要添加定时器,所传参数每次+1就行
this.timeInterval = setInterval(function () {
this.data.rotateIndex = this.data.rotateIndex + 1;
this.animation.rotate(360 * (this.data.rotateIndex)).step()
this.setData({
animationData: this.animation.export()
})
}.bind(this), 500)
// 请求API接口或者别的操作
this.request()
},
// 停止旋转
stopRefresh: function () {
if (this.timeInterval > 0) {
clearInterval(this.timeInterval)
this.timeInterval = 0
}
},
request: function() {
// 请求API或者别的操作
console.log('request')
// 比如我从API那边得到了我想要的数据我就停止旋转
// this.stopRefresh()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
