wxml
<!-- 动画容器(执行动画) -->
<image src="https://img-blog.csdnimg.cn/20200820180305411.png"
animation="{{ animationData }}">
</image>
<!-- END -->
<!-- 触发按钮 -->
<button bindtap="go" style="">动起来</button>
<!-- END -->
js
Page({
/*
* 事件处理
*/
data: {
animationData: {}
},
/*
* 事件处理
*/
go: function() {
// 创建动画实例(animation)
var animation = wx.createAnimation({
duration: 500,//动画持续时间
timingFunction: 'ease',//动画以低速开始
//具体配置项请查看文档
})
// 建立标识(用于循环)
this.animation = animation
var next = true;
// 无限循环动画
setInterval(function(){
if(next){
// 你要执行动画链(详见文档)
this.animation.scale(0.8).step()
// -----------------------
next = !next;
}
else
{
// 你要执行动画链(详见文档)
this.animation.scale(1).step()
// -----------------------
next = !next;
}
// 导出动画
this.setData({
animationData: animation.export()
})
}.bind(this),500)
}
})