微信小程序Animation动画的使用
2021-03-15 本文已影响0人
鹏多多
1，前言
和css3动画不同，小程序中动画是主要是通过js控制的，简单来说就是创建一个动画实例animation。调用实例的方法来定义动画效果。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
2，属性
首先需要通过wx.createAnimation，创建一个动画对象，该对象接收四个属性。
| 属性名 | 数据类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| duration | number | 400 | 否 | 动画持续时间，单位 ms |
| timingFunction | string | 'linear' | 否 | 动画的效果 |
| delay | number | 0 | 否 | 动画延迟时间，单位 ms |
| transformOrigin | string | '50% 50% 0' | 否 | 动画起点 |
其中，timingFunction属性有七种值类型
| 值 | 说明 |
|---|---|
| 'linear' | 动画从头到尾的速度是相同的 |
| 'ease' | 动画以低速开始，然后加快，在结束前变慢 |
| 'ease-in' | 动画以低速开始 |
| 'ease-in-out' | 动画以低速开始和结束 |
| ''ease-out' | 动画以低速结束 |
| 'step-start' | 动画第一帧就跳至结束状态直到结束 |
| 'step-end' | 动画一直保持开始状态，最后一帧跳到结束状态 |
例子：
let change = wx.createAnimation({ duration:500 });
change.opacity(0).step();
this.setData({
change:change.export()
});
3，使用
使用起来需要将动画对象，绑定到元素上
<view class="dialog" animation="{{ move}}"></view>
然后在js文件page对象的data中定义
Page({
data: {
move:{},
}
})
因为动画对象默认接收的是px单位，如果需要使用rpx单位，比如400rpx，转换公式就是400 / 750 * wx.getSystemInfoSync().windowWidth。
元素往右边移动200rpx，并且放大1.5倍的动画例子：
move(){
let move = wx.createAnimation({ duration:200 });
move.translateX(200 / 750 * wx.getSystemInfoSync().windowWidth).scale(1.5,1.5).step();
this.setData({
move:move.export()
})
}
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
往期文章
个人主页
