详解微信小程序动画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控制表格隔行变色
Jun 26 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
django最快程序开发流程详解
2019/07/19 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python开头的coding设置方法
2019/08/08 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
设计总监岗位职责
2013/12/07 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
介绍信范文大全
2015/05/07 职场文书
投资申请报告
2015/05/19 职场文书