mpvue利用微信api实现旋转动画

第一步：绘制元素

<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予以实现