目录
1，前言2，属性3，使用
1，前言
和css3动画不同，小程序中动画是主要是通过js控制的，简单来说就是创建一个动画实例animation。调用实例的方法来定义动画效果。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
2，属性
首先需要通过wx.createAnimation，创建一个动画对象，该对象接收四个属性。
属性名数据类型默认值必填说明durationnumber400否动画持续时间，单位 mstimingFunctionstring‘linear’否动画的效果delaynumber0否动画延迟时间，单位 mstransformOriginstring‘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，使用
使用起来需要将动画对象，绑定到元素上
然后在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()
})
}
如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论； END
公众号
往期文章
微信小程序自定义Tabbar，附详细源码细数JS中实用且强大的操作符&运算符微信小程序API交互的自定义封装微信小程序request请求的封装
个人主页
CSDNGitHub简书博客园掘金