最近小程式中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，後來發現微信小程式帶有動畫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即可。

#注意：

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

1. 我們需要便利的控制開始和停止，
2. animation在小程式進入後臺後，會持續執行，佔用手機記憶體和cpu，而小程式依賴於微信，在iphone上會導致微信被終止執行

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

1. rotate的值應該是上一次結束時的值，
2. 如果設定了全域性變數，記得在onCreate / onReady時初始化，不然第二次開啟同一頁面會有問題。

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

這裡給出原圖片