微信小程序实现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 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python自动化测试实例解析
2014/09/28 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python如何快速实现分布式任务
2017/07/06 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python实现ip代理池功能示例
2019/07/05 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python中私有属性的定义方式
2020/03/05 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
如何在python中实现线性回归
2020/08/10 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript