微信小程序实现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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue2.0自定义指令示例代码详解
Apr 25 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
JS与框架页的操作代码
2010/01/17 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
详解Django配置JWT认证方式
2020/05/09 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
教师绩效考核方案
2014/01/21 职场文书
消防先进事迹材料
2014/02/10 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2015年女生节活动总结
2015/02/27 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python