在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
今天在做砍价页面的时候需要将一个按钮动起来,效果图如下:
其实它实现的原理很简单,就是循环的缩小放大。 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 () { } })
上述代码即可实现动画循环播放的效果了~~ |
请发表评论