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

最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。

wechat animation.gif

###首先在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()设置一个足够大的值，原因有两点：

我们需要便利的控制开始和停止，

animation在小程序进入后台后，会持续运行，占用手机内存和cpu，而小程序依赖于微信，在iphone上会导致微信被终止运行

在使用animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。

rotate的值应该是上一次结束时的值，

如果设置了全局变量，记得在onCreate / onReady时初始化，不然第二次打开同一页面会有问题。

原文：简书ThinkinLiu 博客: IT老五

扫描二维码关注公众号，回复： 4078021 查看本文章

这里给出原图片

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

猜你喜欢