微信小程序如何制作旋轉動畫

這篇文章主要為大家展示了微信小程序如何制作旋轉動畫，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“微信小程序如何制作旋轉動畫”這篇文章吧。

微信小程序被給予的能量是無窮的，在小程序發展逐漸成熟的當下，小程序開發能實現的需求越來越完善。最近小程序中有一個圖片旋轉的需求，在微信小程序上是可以通過切換多張圖片達到旋轉的效果，但微信小程序自帶的API中帶有這么一個動畫組件，因此小程序制作旋轉動畫可以使用image+Animation來實現。

首先在wxml中定義image

注意其中的animation屬性，image就由它來實現動畫。

而{{animation}}我們在js的data中定義

data: {

animation: \'\'

},

相關代碼

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\'

})

},

/**

* 實現image旋轉動畫，每次旋轉 120*n度

*/

rotateAni: function (n){

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

this.setData({

animation:_animation.export()

})

},

/**

* 開始旋轉

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 進行一次旋轉

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

},  _ANIMATION_TIME); // 沒間隔_ANIMATION_TIME進行一次旋轉

},

/**

* 停止旋轉

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自帶的Animation可以實現一次動畫，然后可以通過setInterval來達到不斷旋轉的目的，在使用時，控制startAnimationInterval和stopAnimationInterval即可。

在使用animation時，會發現有時候出現旋轉速度很快或者反向旋轉再正向旋轉的清空，這都是由于rotate的值設置有問題。

1、rotate的值應該是上一次結束時的值，

2、如果設置了全局變量，記得在oncreate時初始化，不然第二次打開同一頁面會有問題。

注意事項：

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

1、我們需要便利的控制開始和停止，

2、animation在小程序進入后臺后，會持續運行，占用手機內存和cpu，而小程序依賴于微信，在iphone上會導致微信被終止運行

小程序是什么意思

小程序是一種不需要下載安裝即可使用的應用，通過掃描二維碼或是搜一搜立即使用，操作簡單，便于傳播，能夠實現消息通知、線下掃碼、公眾號關聯等七大功能。它基于微信運行的，類似于APP，想用就用，用完即走，不會占用內存。

以上就是關于“微信小程序如何制作旋轉動畫”的內容，如果該文章對您有所幫助并覺得寫得不錯，勞請分享給您的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。