详解微信小程序动画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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
延时重复执行函数 lLoopRun.js
May 08 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 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中var_export与var_dump的区别分析
2010/08/21 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python重试装饰器示例
2014/02/11 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python装饰器常见使用方法分析
2019/06/26 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python实现人像动漫化的示例代码
2020/05/17 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
服装设计专业自荐书范文
2013/12/30 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
医药营销个人求职信
2014/04/12 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2015年采购部工作总结
2015/04/23 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Flask response响应的具体使用
2021/07/15 Python
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server