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