wxml
<!-- 動(dòng)畫容器(執(zhí)行動(dòng)畫) -->
<image src="https://img-blog.csdnimg.cn/20200820180305411.png"
animation="{{ animationData }}">
</image>
<!-- END -->
<!-- 觸發(fā)按鈕 -->
<button bindtap="go" style="">動(dòng)起來</button>
<!-- END -->
js
Page({
/*
* 事件處理
*/
data: {
animationData: {}
},
/*
* 事件處理
*/
go: function() {
// 創(chuàng)建動(dòng)畫實(shí)例(animation)
var animation = wx.createAnimation({
duration: 500,//動(dòng)畫持續(xù)時(shí)間
timingFunction: 'ease',//動(dòng)畫以低速開始
//具體配置項(xiàng)請(qǐng)查看文檔
})
// 建立標(biāo)識(shí)(用于循環(huán))
this.animation = animation
var next = true;
// 無限循環(huán)動(dòng)畫
setInterval(function(){
if(next){
// 你要執(zhí)行動(dòng)畫鏈(詳見文檔)
this.animation.scale(0.8).step()
// -----------------------
next = !next;
}
else
{
// 你要執(zhí)行動(dòng)畫鏈(詳見文檔)
this.animation.scale(1).step()
// -----------------------
next = !next;
}
// 導(dǎo)出動(dòng)畫
this.setData({
animationData: animation.export()
})
}.bind(this),500)
}
})
