详解微信小程序动画Animation执行过程


Posted in Javascript onSeptember 23, 2020

前言

因官方文档描述不清晰,本文主要介绍微信小程序动画 实现过程 / 实现方式

实现过程

推荐你对照 官方文档 来看本文章,这样更有利于理解。

简单来说,整个动画实现过程就三步:

  • 创建一个动画实例 animation
  • 调用实例的方法来描述动画。
  • 最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

详解微信小程序动画Animation执行过程

前两步是定义一个动画并设置都要干什么,然后把这个设置好的 “规则” 扔给界面上的某个元素,让它按照这个规则执行。

当然如果有多个元素的 animation="{{ani}}",也都会执行这个动画规则。

实现过程

上面是理论,接下来进入实操环节,我们通过一个例子来验证。

详解微信小程序动画Animation执行过程

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
javascript网页随机点名实现过程解析
Oct 15 Javascript
js实现九宫格抽奖
Mar 19 Javascript
原生js实现分页效果
Sep 23 #Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
Angular短信模板校验代码
Sep 23 #Javascript
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python中new方法的详解
2019/01/15 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python中的yield from语法快速学习
2020/11/06 Python
python反扒机制的5种解决方法
2021/02/06 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
中年人生感言
2014/02/04 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL