微信小程序Animation动画的使用

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

面向百度编程

往期文章

个人主页

接受失败,但不选择放弃!
posted @ 2021-03-15 17:26  鹏多多  阅读(811)  评论(0编辑  收藏  举报