第一步:绘制元素
<img class="music-icon" :animation="musicAnimation" src="/static/images/music.png"/>
元素里面绑定animation数据为musicAnimation
第二步:
data里面设置musicAnimation:null
第三步:绘制动画
//绘制动画
var rotateCount = 1;
const animationDuration = 3000;
const animation = wx.createAnimation({
duration: animationDuration
});
animation.rotate(360).step();
this.musicAnimation = animation.export();
//连续动画关键步骤
var _this = this;
setInterval(function () {
rotateCount++;
const animation = wx.createAnimation({
duration: animationDuration
});
animation.rotate(360*rotateCount).step();
_this.musicAnimation = animation.export();
}, animationDuration)
这里的核心在于this.musicAnimation = animation.export();这一句,是要把动画数据输出来。
这里还有个坑,微信小程序动画不支持连续动画,所以网上大部分的做法都是通过setInterval予以实现