本文整理自网络,侵删。
wx.createAnimation(OBJECT)
? 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export
方法导出动画数据传递给组件的animation
属性。
注意:export
方法每次调用后会清掉之前的动画操作
OBJECT参数说明:
参数 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
duration | Integer | 否 | 400 | 动画持续时间,单位ms |
timingFunction | String | 否 | "linear" | 定义动画的效果 |
delay | Integer | 否 | 0 | 动画延迟时间,单位 ms |
transformOrigin | String | 否 | "50% 50% 0" | 设置transform-origin |
timingFunction 有效值:
值 | 说明 |
---|---|
linear | 动画从头到尾的速度是相同的 |
ease | 动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-in-out | 动画以低速开始和结束 |
ease-out | 动画以低速结束 |
step-start | 动画第一帧就跳至结束状态直到结束 |
step-end | 动画一直保持开始状态,最后一帧跳到结束状态 |
var animation = wx.createAnimation({
transformOrigin:"50% 50%",
duration:1000,
timingFunction:"ease",
delay:0
})
animation
动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。
animation 对象的方法列表:
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者