小程序动画三步走
- 在需要动画效果的元素上给animation属性绑定一个变量,假设是textLeftAnimation
- 在需要的时机调用api创建动画对象并描述动画效果
- 利用this.setData() 将动画对象.export() 方法赋值到textLeftAnimation变量中。
例:
- 1.在元素中的属性animation中绑定对象变量,即用代码如下表示
<view style="width:100px;height:100px" animation="{{textLeftAnimation}}"></view>
- 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() //如这样
this.setData({
textLeftAnimation:animationLeft.export()
})
- 小程序动画描述step()
1.小程序的动画是按 step() 来描述的,例如你想让某个元素平移之后旋转啥的,就可以利用多次step()
/**
* 例如这样
*/
animationLeft.left(100).step()
animationLeft.rotate(90).step();
2.将left()和rotate()写在同一个step()里时,会在平移的时候同时旋转,如下代码
animationLeft.left(100).rotate(90).step()