微信小程序 连续旋转动画（this.animation.rotate）详解

当使用微信小程序的时候，可以通过动画来让页面更加生动有趣，其中连续旋转动画就是一个很不错的选择。本文将详细介绍微信小程序的连续旋转动画，包括实现过程，代码示例和一些常见问题的解答。

前置知识

在学习微信小程序的连续旋转动画前，需要掌握一些必要的前置知识：

• 微信小程序的基础语法；
• CSS3中transform属性的基本用法；
• 小程序中使用wx.createAnimation()函数创建动画对象。

连续旋转动画实现过程

实现微信小程序的连续旋转动画，需要使用wx.createAnimation()函数来创建动画对象，之后通过调用动画对象的rotate()方法来实现旋转效果。

具体步骤如下：

1. 使用wx.createAnimation()函数创建动画对象；
2. 在动画对象上调用rotate()方法，设置旋转角度；
3. 在动画对象上调用step()方法，生成动画对象数据；
4. 将动画对象数据设置到animation属性中，通过animation属性绑定到视图上。

代码示例

以下是两个使用微信小程序的连续旋转动画的代码示例：

示例一

<!-- WXML代码 -->
<view class="box" animation="{{animation}}"></view>

// JS代码
Page({
  data: {
    animation: {}
  },
  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      transformOrigin: '50% 50%'
    })

    this.rotate()
  },
  rotate: function () {
    this.animation.rotate(360).step()
    this.setData({
      animation: this.animation.export()
    })

    setTimeout(function () {
      this.rotate()
    }.bind(this), 1000)
  }
})

示例二

<!-- WXML代码 -->
<view class="box" animation="{{animation}}"></view>

// JS代码
Page({
  data: {
    animation: {}
  },
  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear',
      transformOrigin: '50% 50%'
    })

    this.rotate()
  },
  rotate: function () {
    this.animation.rotate(360).step()
    this.setData({
      animation: this.animation.export()
    })

    this.animation.rotate(-360).step()
    this.setData({
      animation: this.animation.export()
    })

    setTimeout(function () {
      this.rotate()
    }.bind(this), 1000)
  }
})

常见问题解答

如何设置动画的中心点？

可以在创建动画对象时，通过transformOrigin属性来设置动画的中心点，例如 transformOrigin: '50% 50%' 表示动画的中心点为元素的中心。

如何修改动画的时间、速度和循环次数？

可以在调用rotate()方法前，通过duration、timingFunction和iterationCount属性来设置动画的时间、速度和循环次数。例如 duration: 1000, timingFunction: 'linear', iterationCount: 'infinite' 表示动画周期为1000ms，速度为线性，无限循环。

如何停止动画？

可以通过调用animation对象的export方法，将动画对象的数据清空，从而停止动画。例如 this.setData({animation: this.animation.export()})。