微信小程序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="qqworld-org the-best-plugins 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

往期文章

个人主页

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

ECharts系列 (01):地图三级下钻

2021-3-15 17:12:00

经验教程

Android | 玩转AppBarLayout,设置scrollFlags滑动属性详解

2021-3-15 17:48:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索