小程式動畫-圖片一直旋轉
阿新 • • 發佈:2019-02-05
實現效果(可能有點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 () { } })