目录

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()
	})
}

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

面向百度编程

往期文章

个人主页

版权声明：本文为-pdd原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/-pdd/p/14538873.html