首先在wxml中定義image

注意其中的animation屬性，image就由它來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

而{{animation}}我們?cè)趈s的data中定義

data: {

animation: \'\'

},

相關(guān)代碼

var _animation;

var _animationIndex

const _ANIMATION_TIME = 500;

pages {

...

onShow: function () {

_animation =wx.createAnimation({

duration:_ANIMATION_TIME,

timingFunction: \'linear\',//linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end

delay: 0,

transformOrigin:\'50% 50% 0\'

})

},

/**

* 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫(huà)，每次旋轉(zhuǎn) 120*n度

*/

rotateAni: function (n){

_animation.rotate(120* (n)).step()

this.setData({

animation:_animation.export()

})

},

/**

* 開(kāi)始旋轉(zhuǎn)

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 進(jìn)行一次旋轉(zhuǎn)

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

},  _ANIMATION_TIME); // 沒(méi)間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)

},

/**

* 停止旋轉(zhuǎn)

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自帶的Animation可以實(shí)現(xiàn)一次動(dòng)畫(huà)，然后可以通過(guò)setInterval來(lái)達(dá)到不斷旋轉(zhuǎn)的目的，在使用時(shí)，控制startAnimationInterval和stopAnimationInterval即可。

微信小程序視頻教程，盡在即速學(xué)院。

在使用animation時(shí)，會(huì)發(fā)現(xiàn)有時(shí)候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設(shè)置有問(wèn)題。

1、rotate的值應(yīng)該是上一次結(jié)束時(shí)的值，

2、如果設(shè)置了全局變量，記得在oncreate時(shí)初始化，不然第二次打開(kāi)同一頁(yè)面會(huì)有問(wèn)題。

注意事項(xiàng)：

這里為什么不直接給_animation.rotate(120 * (n)).step()設(shè)置一個(gè)足夠大的值，原因有兩點(diǎn)：

1、我們需要便利的控制開(kāi)始和停止，

2、animation在小程序進(jìn)入后臺(tái)后，會(huì)持續(xù)運(yùn)行，占用手機(jī)內(nèi)存和cpu，而小程序依賴(lài)于微信，在iphone上會(huì)導(dǎo)致微信被終止運(yùn)行