微信小程序——實現動畫循環播放

今天在做砍價頁面的時候需要將一個按鈕動起來，效果圖如下：

 

其實它實現的原理很簡單，就是循環的縮小放大。

css3中的animate 有個屬性是 animation-iteration-count 可以控制動畫的循環播放，但是小程序里面沒有。該怎么實現呢？

無非就是2種狀態的切換。

wxml:

<button class='cut-btn' open-type='share' animation="{{animationData}}">喊好友砍一刀</button>

 

js:

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    animationData: {}
  },
  
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    this.animation = animation
    var next = true;
    //連續動畫關鍵步驟
    setInterval(function () {
      if (next) {
        this.animation.scale(0.95).step()   
        next = !next;
      } else {
        this.animation.scale(1).step()
        next = !next;
      }
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 500)
  },

  

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

 

上述代碼即可實現動畫循環播放的效果了~~