微信小程序实现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常用函数 不错
Sep 08 Javascript
js传值 判断
Oct 26 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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
模拟xcopy的函数
2006/10/09 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python解析json代码实例解析
2019/11/25 Python
python中图像通道分离与合并实例
2020/01/17 Python
python使用建议技巧分享(三)
2020/08/18 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
小学生安全保证书
2014/02/01 职场文书
书法比赛获奖感言
2014/02/10 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
师范生自荐信模板
2014/05/28 职场文书
财务个人年度总结范文
2015/02/26 职场文书
自荐信模板大全
2015/03/27 职场文书
道歉情书大全
2015/05/12 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
培训感想范文
2015/08/07 职场文书