微信小程序——实现动画循环播放

今天在做砍价页面的时候需要将一个按钮动起来，效果图如下：

 

其实它实现的原理很简单，就是循环的缩小放大。

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 () {
  
  }
})

 

上述代码即可实现动画循环播放的效果了~~