最近小程序中有一個(gè)圖片旋轉(zhuǎn)的需求，最初是想著通過(guò)切換多張圖片達(dá)到旋轉(zhuǎn)的效果，后來(lái)發(fā)現(xiàn)微信小程序帶有動(dòng)畫(huà)api，然后就改由image+Animation來(lái)實(shí)現(xiàn)。

wechat animation.gif

首先在wxml中定義image

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

注意其中的animation屬性，image就由它來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

而{{animation}}我們?cè)趈s的data中定義

data: {
    animation: ''
  },

相關(guān)代碼

var _animation; // 動(dòng)畫(huà)實(shí)體
var _animationIndex = 0; // 動(dòng)畫(huà)執(zhí)行次數(shù)index（當(dāng)前執(zhí)行了多少次）
var _animationIntervalId = -1; // 動(dòng)畫(huà)定時(shí)任務(wù)id，通過(guò)setInterval來(lái)達(dá)到無(wú)限旋轉(zhuǎn)，記錄id，用于結(jié)束定時(shí)任務(wù)
const _ANIMATION_TIME = 500; // 動(dòng)畫(huà)播放一次的時(shí)長(zhǎng)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'
    })
  },

  /**
   * 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫(huà)，每次旋轉(zhuǎn) 120*n度
   */
  rotateAni: function (n) {
    _animation.rotate(120 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },

  /**
   * 開(kāi)始旋轉(zhuǎn)
   */
  startAnimationInterval: function () {
    var that = this;
    that.rotateAni(++_animationIndex); // 進(jìn)行一次旋轉(zhuǎn)
    _animationIntervalId = setInterval(function () {
      that.rotateAni(++_animationIndex);
    },  _ANIMATION_TIME); // 每間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)
  },

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

微信自帶的Animation可以實(shí)現(xiàn)一次動(dòng)畫(huà)，然后可以通過(guò)setInterval來(lái)達(dá)到不斷旋轉(zhuǎn)的目的，在使用時(shí)，控制startAnimationInterval和stopAnimationInterval即可。

注意：

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

1. 我們需要便利的控制開(kāi)始和停止，
2. animation在小程序進(jìn)入后臺(tái)后，會(huì)持續(xù)運(yùn)行，占用手機(jī)內(nèi)存和cpu，而小程序依賴(lài)于微信，在iphone上會(huì)導(dǎo)致微信被終止運(yùn)行

在使用animation時(shí)，會(huì)發(fā)現(xiàn)有時(shí)候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設(shè)置有問(wèn)題。

1. rotate的值應(yīng)該是上一次結(jié)束時(shí)的值，
2. 如果設(shè)置了全局變量，記得在onCreate / onReady時(shí)初始化，不然第二次打開(kāi)同一頁(yè)面會(huì)有問(wèn)題。

個(gè)人博客: IT老五
微信公眾號(hào)：【IT老五（it-lao5）】，一起源創(chuàng)，一起學(xué)習(xí)！

這里給出原圖片

loading.png