微信小程序Animation动画的使用

目录

• 1，前言
• 2，属性
• 3，使用

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。

元素往右边移动200PX，并且放大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()
	})
}

如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；

END

往期文章

• 微信小程序自定义Tabbar，附详细源码
• 细数JS中实用且强大的操作符&运算符
• 微信小程序request请求的封装
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金