微信小程序实现animation动画


Posted in Javascript onJanuary 26, 2018

微信小程序实现animation动画,具体内容如下

1. 创建动画实例

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
注意: export 方法每次调用后会清掉之前的动画操作

动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。 通过事件绑定动画即可调用动画执行。

创建的动画实例可以通过调用动画方法进行描述,调用结束后会返回自身,支持链式调用的写法。
在同一个动画实例内部,可以定义多种运动形式,并定义多个动画绑定到不同标签

示例代码:

animation1: {}
animation2: {}

touch: function () {
 let animation1 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
 this.setData({
  animation1: animation1.export()
 });
 let animation2 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation2.opacity(0.7).step({ duration: 1000 });
 this.setData({
  animation2: animation2.export()
 });
}

2. 调用动画执行

2.1 绑定动画

将所创建的动画实例绑定到相应标签

示例代码

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 触发动画

通过页面事件调用动画执行

示例代码:

<view bindtap="touch"></view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
webpack实用小功能介绍
Jan 02 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
JS实现瀑布流效果
Mar 07 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
Vue header组件开发详解
Jan 26 #Javascript
Vue shopCart 组件开发详解
Jan 26 #Javascript
jquery写出PC端轮播图实例
Jan 26 #jQuery
深入理解vue中slot与slot-scope的具体使用
Jan 26 #Javascript
You might like
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
JS简单计算器实例
2015/01/20 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS实现小米轮播图
2020/09/21 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python中functools模块函数解析
2017/03/12 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
运动会广播稿100字
2014/09/14 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫