详解微信小程序动画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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
原生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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php流量统计功能的实现代码
2012/09/29 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
整理Python中的赋值运算符
2015/05/13 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Django 多环境配置详解
2019/05/14 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
前台接待员岗位职责
2014/01/02 职场文书
大型活动策划方案
2014/01/12 职场文书
社会实践活动报告
2015/02/05 职场文书
入党自传范文2015
2015/06/26 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
python中redis包操作数据库的教程
2022/04/19 Python