1. 程式人生 > >小程式動畫-圖片一直旋轉

小程式動畫-圖片一直旋轉

實現效果(可能有點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 () {
  
  }
})