微信小程序动画(七)：让页面动起来

本文默认读者已具备小程序基本动画api，如不了解可先阅读相关的详细介绍文章：

• 微信小程序动画（一）：样式
• 微信小程序动画（二）：旋转
• 微信小程序动画（三）：缩放
• 微信小程序动画（四）：平移
• 微信小程序动画（五）：倾斜
• 微信小程序动画（六）：矩阵变形

一： wx.createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

api文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

wx.createAnimation()接收的属性和值：

注意我们每定义一个动画后，一定要export一下。像下面这样：

  rotate: function() {
    this.animationData.rotate(45).step()
    this.setData({
      animationData: this.animationData.export()
    })
  },

export()函数的作用是导出动画队列。export 方法每次调用后会清掉之前的动画操作。

二: 动画同时播放

index.wxml

<view animation="{{animationData}}" class="animation-view">view>
<button bindtap="sync">同时播放button>

index.js

Page({
  data: {
    animationData: {}
  },
  onLoad: function(){
    this.animationData = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease'
    })
  },

  sync: function() {
    this.animationData.rotate(45).scale(1.2).translate(50, 50).skew(45).opacity(0.2).step()
    this.setData({
      animationData: this.animationData.export()
    })
  },

效果：

三: 动画依次播放

代码如下：

Page({
  data: {
    animationData: {}
  },
  onLoad: function(){
    this.animationData = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease'
    })
  },

  sync: function() {
   this.animationData.rotate(45).step().scale(1.2).step().translate(50, 50).step().skew(45).step().opacity(0.2).step()
    this.setData({
      animationData: this.animationData.export()
    })
  }

效果如下：

可以看到与同时播放不同的是，每执行完一个动画调用了step函数，用来表示该组动画的完成。也可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
该方法接受的参数同上面的wx.createAnimation(),可以对某一组动画去单独定义动画的持续时间，效果，延迟等等。

四: 动画循环播放

动画循环播放需要借助标志位和定时器来实现。
标志位用来每次改变动画效果，定时器实现每间隔一定时间的循环。
代码如下：

onLoad: function(){
    this.loop = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease'
    })
    var flag = true
    setInterval(() => {
      if (flag) {
        this.loop.scale(0.95).step()
      } else {
        this.loop.scale(1).step()
      }
      flag = !flag
      this.setData({
        loop: this.loop.export()
      })
    }, 500)
  },

效果如下：