首先在wxml中定義image

<image animation="{{animationData}}" class='circle' src='/img/monitor/circle.png'/>

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

data: {
   animationData: {},
 },

相關(guān)代碼

var _animationIndex = 0; // 動畫執(zhí)行次數(shù)index（當(dāng)前執(zhí)行了多少次）
var _animationIntervalId = -1; // 動畫定時任務(wù)id，通過setInterval來達(dá)到無限旋轉(zhuǎn)，記錄id，用于結(jié)束定時任務(wù)
const _ANIMATION_TIME = 4000; // 動畫播放一次的時長ms
Page({
  
  data: {
    animationData: {},
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    var 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'
    })
    this.animation = animation
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    _animationIndex = 0;
    _animationIntervalId = -1;
    this.startAnimationInterval()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    this.stopAnimationInterval()
  },

  /**
    * 開始旋轉(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)
  },

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

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

})

參考：https://blog.csdn.net/andy_5826_liu/article/details/84207916