微信小程序实现animation动画

以下是“微信小程序实现animation动画”的完整攻略：

1. 先了解animation动画

在微信小程序中，我们可以使用wx.createAnimation()方法来创建一个动画对象。这个方法返回的是Animation对象，我们可以使用这个对象来定义一系列动画帧，最后开始执行这些帧达到动画效果。

2. 创建Animation对象

要创建Animation对象，我们可以这样来写：

const animation = wx.createAnimation({
  duration: 1000,  //动画持续时间
  timingFunction: 'linear',  //动画速度变化
  delay: 0,  //动画延迟
  transformOrigin: '50% 50% 0',  //动画基点（旋转、缩放等）
})

3. 定义动画帧

Animation对象创建好了之后，我们可以通过方法链式调用来定义一系列动画帧，比如：

animation.translateX(100).step()
animation.rotate(45).step()
animation.scale(2).step()

这里的step()表示一帧动画的结束，多次调用step()则表示定义多个动画帧。其中的参数则表示动画帧相应的效果，比如translateX()是表示水平方向的移动距离，rotate()是表示旋转角度等等。

4. 启动动画

所有的动画帧都定义好了之后，我们就可以使用animation.export()方法来输出定义好的动画步骤。具体可以这样写：

animation.export()

其中的export()表示导出动画帧并启动动画。我们可以将导出的动画帧传递给需要进行动画的组件的animation属性中，例如：

this.setData({
  animationData: animation.export()
})

这里的animationData则是一个自定义的变量，用来保存导出的动画帧。

5. 示例说明

下面是两个简单的示例说明，以便更好理解animation动画的实现。

示例1：飞机起飞

//wxml中写法
<view class="plane" animation="{{animationData}}"></view>

//js中写法
const animation = wx.createAnimation({
  duration: 10000,  
  timingFunction: "ease-in-out",  
})
animation.translateY(-500).step()
this.setData({animationData: animation.export()})

这个例子实现了一架飞机从底部起飞一直往上飞的动画效果。在wxml代码中，我们将这个动画作用于一个视图组件上，视图组件的class名为plane；在js代码中，我们使用translateY()方法定义了一帧动画帧，使得这个视图组件能够向上移动500px并且持续10秒。

示例2：心情好转

//wxml中写法
<view class="happy-face" animation="{{animationData}}"></view>

//js中写法
const animation = wx.createAnimation({
  duration: 1000,
  timingFunction: "ease",
})
animation.scale(1.5).step().scale(1).step()
this.setData({animationData: animation.export()})

这个例子实现了一个表情变化的动画效果，让一个笑脸变得更加抢眼。在wxml代码中，我们将这个动画作用于一个视图组件上，视图组件的class名为happy-face；在js代码中，我们使用scale()方法定义了两帧动画帧，通过一次放大1.5倍再缩小到原大小，使得这个视图组件在一秒钟内呈现愉悦变化的动画效果。

通过以上两个示例说明，可以看出我们可以通过定义动画帧来实现在微信小程序中的动画效果，其中最重要的是创建Animation对象并定义动画帧。