微信动画（小程序）

文章来自：源码在线https://www.shengli.me/wxxcx/137.html

实现步骤：

 

首先创建一个动画实例animation

 

其次调用实例的方法来描述动画

 

最后通过动画实例的exports方法导出动画数据传递给组件的animation属性。如下图所示：

 

 

当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。

 

实例：

 

 

代码如下：

index.wxml，一个helloworld，一个按钮

index.wxss， 为了看着方便加了个边框

 index.js

相关参数及方法

 

duration:动画持续多少毫秒

timingfunction:"运动"方式，"ease" 代表动画以低速开始，然后加快，在结束前变慢。

delay:多久后动画开始运行

opacity：（0.2）慢慢变透明

translate（100，-100）向x轴移动-100step();一组动画完成，例如想让上例中的hello world向右上方移动并变透明后，再次向左移动50可以继续写

 作用就是向右上方移动和变透明是同时进行，这两种变化完成了之后才会运行向左运行的一步。