微信小程序实现animation动画
时间:2019-04-13
本文章向大家介绍微信小程序实现animation动画,主要包括微信小程序实现animation动画使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序实现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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 另类大数据:中国有嘻哈的rapper们都在唱些什么?
- jquery属性值选择器
- sqlserver 2000/2005 Ambiguous column error错误解决办法
- jquery 层级选择器
- Twitter发布基于组件的轻量级JavaScript框架——Flight
- jquery的基本选择器
- WordPress 路径相关函数总结(一):站点路径相关函数
- 修复Visual Studio 2010 SP1的Toolbox导致的VS不可用
- 破解Excel 密码保护
- 配置Subversion
- WordPress 路径相关函数总结(二):主题路径相关函数
- ASP.NET 2.0 中 Web 事件
- Visual Studio 必备可视化插件推荐
- WordPress 路径相关函数总结(一):站点路径相关函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 计算机基础知识总结与操作系统 PDF 下载
- 【动手学深度学习】笔记一
- 【Python】使用Pygame做一个Flappy bird小游戏(一)
- 从0到1,实现你的第一个多层神经网络
- 【Python】使用Pygame做一个Flappy bird小游戏(二)
- 【Pandas】pandas的主要数据结构
- 【Python】使用Pygame做一个Flappy bird小游戏(三)
- Godot游戏开发实践之三:容易被忽视的Resource
- 方便快捷的调试 Node.js 程序
- LeetCode 06Z字形变换&07整数反转
- 对搜索表单提交是否为空进行弹出提示
- PWN入门(Fastbin Attack)
- Qt项目网络聊天室设计
- nginx 端口转发
- linux通用链表