2018-5-15 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
首先在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上會導致微信被終止運行
微信小程序被給予的能量是無窮的，在小程序發展逐漸成熟的當下，小程序開發能實現的需求越來越完善。最近小程序中有一個圖片旋轉的需求，在微信小程序上是可以通過切換多張圖片達到旋轉的效果，但微信小程序自帶的API中帶有這么一個動畫組件，因此小程序制作旋轉動畫可以使用image+Animation來實現。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
