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予以實作