最近小程序中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，后來發現微信小程序帶有動畫api，然后就改由image+Animation來實現。
首先在wxml中定義image
<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>注意其中的animation屬性，image就由它來實現動畫。
而{{animation}}我們在js的data中定義
data: { animation: ''},改變animation的值（官網提供角度范圍是-180~180，但是我發現角度越大會一直旋轉）
onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" delay: 0, transformOrigin: '50% 50% 0', success: function(res) { console.log("res") } }) }, rotateAni: function (n) { console.log("rotate=="+n) this.animation.rotate(180*(n)).step() this.setData({ animation: this.animation.export() }) },相關代碼
var _animation;var _animationIndexconst _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(120 * (n)).step()設置一個足夠大的值，原因有兩點：
1、我們需要便利的控制開始和停止，
2、animation在小程序進入后臺后，會持續運行，占用手機內存和cpu，而小程序依賴于微信，在iphone上會導致微信被終止運行
在使用animation時，會發現有時候出現旋轉速度很快或者反向旋轉再正向旋轉的清空，這都是由于rotate的值設置有問題。
1、rotate的值應該是上一次結束時的值，
2、如果設置了全局變量，記得在oncreate時初始化，不然第二次打開同一頁面會有問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
