时间:2021-05-25
前言
因官方文档描述不清晰,本文主要介绍微信小程序动画实现过程/实现方式。
实现过程
推荐你对照 官方文档 来看本文章,这样更有利于理解。
简单来说,整个动画实现过程就三步:
前两步是定义一个动画并设置都要干什么,然后把这个设置好的 “规则” 扔给界面上的某个元素,让它按照这个规则执行。
当然如果有多个元素的 animation="{{ani}}",也都会执行这个动画规则。
实现过程
上面是理论,接下来进入实操环节,我们通过一个例子来验证。
index.wxml
<!-- 动画容器(执行动画) --><view animation="{{ ani }}" class="content"></view><!-- END --><!-- 触发按钮 --><button bindtap="go">动起来</button><!-- END -->index.js
Page({ /* * 事件处理 */ data: {}, /* * 事件处理 */ go: function() { // 1.创建动画实例(animation) var animation = wx.createAnimation({ duration: 1500,//动画持续时间 timingFunction: 'ease-in',//动画以低速开始 //具体配置项请查看文档 }) // 2.通过实例描述对象() /* * 链式(类似JQuery) * 用 . 拼接动画 * 最后step()结尾表动画结束 */ animation.translate(100, 100).rotate(180).rotate(360).step() // 3.导出动画 this.setData({ ani: animation.export() }) }})index.css
.content { width: 200rpx; height: 200rpx; border: 3px solid red;}总结
到此这篇关于微信小程序动画Animation执行过程 / 实现过程 / 实现方式详解的文章就介绍到这了,更多相关微信小程序动画Animation内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下1、微信小程序开发animation心跳动画wxml文件中:投票js文件中
微信小程序实现animation动画,具体内容如下1.创建动画实例wx.createAnimation(OBJECT)创建一个动画实例animation。调用实
微信小程序连续旋转动画一、.js中封装旋转动画方法 添加animation属性data:{animation:''"} 改变animation的值(官网提供
本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下效果思路1、最开始用了纯CSS动画animation,发现动画需要重复写,于
详解微信小程序同步异步解决办法小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参。那是因为微信小程序函数是异步执行的。但微信小程序增加了