⼩程序——实现动画循环播放
今天在做砍价页⾯的时候需要将⼀个按钮动起来，效果图如下：
其实它实现的原理很简单，就是循环的缩⼩放⼤。
css3中的animate 有个属性是 animation-iteration-count 可以控制动画的循环播放，但是⼩程序⾥⾯没有。该怎么实现呢？⽆⾮就是2种状态的切换。
wxml:
<button class='cut-btn' open-type='share' animation="{{animationData}}">喊好友砍⼀⼑</button>
html animation属性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: port()
})
}.bind(this), 500)
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
}
})
上述代码即可实现动画循环播放的效果了~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。