实现效果(可能有点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 () { } })