今天在做砍价页面的时候需要将一个按钮动起来，效果图如下：
其实它实现的原理很简单，就是循环的缩小放大。
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 () { }})
上述代码即可实现动画循环播放的效果了~~
