小程序动画animation的知识点 （一）

小程序的动画很简单，总结起来就3个步骤。

• 在需要动画效果的元素上给animation属性绑定一个变量，假设是a
• 在需要的时机调用api创建动画对象并描述动画效果
• 利用this.setData() 将动画对象.export() 方法赋值到a变量中。

1.在元素中的属性animation中绑定对象变量，即用代码如下表示

<!-- wxml -->
<view style="width:100px;height:100px" animation="{{textLeftAnimation}}"></view>

// js
data:{
   textLeftAnimation:{} // animation
}

2.新建animation

3.添加相关动画方法来描述动画，目前的动画方法分类有

• 样式
• 旋转
• 缩放
• 偏移
• 倾斜
• 矩阵变形

拿样式分类方法来做示例：

    // 初始化
    let animationLeft = wx.createAnimation({
      duration:2000,
      timingFunction:'ease-out',
      delay:0
    })

    // 链式操作添加相关动画方法
    // 样式分类方法中，默认的长度单位是 px，需要用rpx、em、%等其他度量单位时，需要传入单位符号
    animationLeft.backgroundColor('green').left(50).step()
    // animationLeft.backgroundColor('green').left('100rpx').step() //如这样

    thi.setData({
      textLeftAnimation:animationLeft.export()
    })

4.小程序动画描述step()

1.小程序的动画是按 step() 来描述的，例如你想让某个元素平移之后旋转啥的，就可以利用多次step()

    /**
    * 例如这样
    */
    animationLeft.left(100).step()
    animationLeft.rotate(90).step();

2.将left()和rotate()写在同一个step()里时，会在平移的时候同时旋转，如下代码

    animationLeft.left(100).rotate(90).step()

5.样式分类方法下有如下几个方法

opacity()   // 不透明度，取值0~1 (官方文档说是 透明度！但实际上，拿一个带背景颜色的view去测试就可以得知是不透明，此处应该是官方文档有误。)
backgroundColor()  // 背景颜色，color类型，详情参照下方color类型
width()  // 宽度
height()  // 高度
top()   // 距离顶部定位
left()  // 距离左边定位
bottom() // 距离底部定位
right()  // 距离右边定位

都很简单，就不一一叙述了。

color类型

小程序动画文档