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

本文默认读者已具备小程序基本动画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}}