微信小程序 Animation实现图片旋转动画示例

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

data: {
  animation: ''
},

   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',
     suess: 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 _animationIndex
const _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旋转动画，每次旋转 120n度
 /
 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进行一次旋转
},

/
  停止旋转
 /
 sAnimationInterval: function () {
if (_animationIntervalId> 0) {
   clearInterval(_animationIntervalId);
   _animationIntervalId = 0;
}
},
}