Animation mc.createAnimation(Object object)
创建一个动画实例 Animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
Object object 参数
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| duration | Number | 400 | 否 | 动画持续时间，单位 ms |
| timingFunction | String | 'linear' | 否 | 动画的效果 |
| delay | Number | 0 | 否 | 动画延迟时间，单位 ms |
| transformOrigin | String | '50% 50% 0' | 否 | 动画元素的位置，同 CSS transform-origin |
timingFunction 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| 'linear' | 动画从头到尾的速度是相同的 | |
| 'ease' | 动画以低速开始，然后加快，在结束前变慢 | |
| 'ease-in' | 动画以低速开始 | |
| 'ease-in-out' | 动画以低速开始和结束 | |
| 'ease-out' | 动画以低速结束 | |
| 'step-start' | 动画第一帧就跳至结束状态直到结束 | |
| 'step-end' | 动画一直保持开始状态，最后一帧跳到结束状态 |
示例代码：
<image src="/assets/images/logo.png" animation="{{animationData}}"></image>
var animation = mc.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
// 旋转同时放大
animation.rotate(45).scale(2, 2).step()
this.setData({
animationData: animation.export()
})
// 先旋转同时放大，然后平移
animation.rotate(45).scale(2, 2).step()
animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData: animation.export()
})