微信小程式：Animation實現圖片旋轉動畫

摘要： 最近小程式中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，後來發現微信小程式帶有動畫api，然後就改由image+Animation來實現。 wechat animation.gif 首先在wxml中定義image <...

最近小程式中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，後來發現微信小程式帶有動畫api，然後就改由image+Animation來實現。

首先在wxml中定義image

<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>

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

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

data: {
animation: ''
},

相關程式碼

var _animation; // 動畫實體
var _animationIndex = 0; // 動畫執行次數index（當前執行了多少次）
var _animationIntervalId = -1; // 動畫定時任務id，通過setInterval來達到無限旋轉，記錄id，用於結束定時任務
const _ANIMATION_TIME = 500; // 動畫播放一次的時長ms
pages {
...
onReady: function () {
_animationIndex = 0;
_animationIntervalId = -1;
this.data.animation = ''; 
},

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(++_animationIndex); // 進行一次旋轉
_animationIntervalId = setInterval(function () {
that.rotateAni(++_animationIndex);
},_ANIMATION_TIME); // 每間隔_ANIMATION_TIME進行一次旋轉
},

/**
* 停止旋轉
*/
stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
}

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

注意：

原文：簡書ThinkinLiu 部落格: IT老五

這裡給出原圖片