博客
关于我
微信小程序动画效果方法封装
阅读量:236 次
发布时间:2019-02-28

本文共 1680 字,大约阅读时间需要 5 分钟。

微信小程序的动画如何实现?归纳起来主要有以下几步:

首先在wxml中为需要添加动画的元素绑定动画属性,如下所示:

说明:animation与js里导出的动画名绑定 ,bindtap事件点击触发动画。

然后在js里编写生成动画的方法,主要分为创建动画、配置动画、导出动画,代码如下所示:

// 事件处理函数bindViewTap: function() {    //第一步:创建动画    var animation = wx.createAnimation({        // 动画持续时间        duration: 3000,        // 动画的方法,从开始到结束是一种什么样的规则        //'linear','ease','ease-in','ease-in-out','ease-out','step-start','step-end'        timingFunction: 'linear',        // 延迟时间        delay: 0,        // 运动原点        transformOrigin: '50%,50%,0',    })    // 第二步,配置动画    animation.rotate(360).scale(2).translate(10, -20).step();    animation.rotate(-360).scale(1).translate(0).step();    // animation.skew(45).step();    // 动画的矩阵变形    // animation.matrix(10,10,10,10,0,50).step();    // 第三步,导出动画    this.setData({        animationData: animation.export(),    })},

接下来,我们对这个动画方法进行简单封装。

// 第一个参数 that 是当前的页面对象// 第二个参数 param 是绑定页面动画名// 第三个参数 px 上下滑动的距离// 第四个参数 opacity 是需要修改为的透明度slideUpShow:function(that,param,px,opacity){    var animation = wx.createAnimation({        duration: 800,        timingFunction: 'ease',    });    animation.translateY(px).opacity(opacity).step()    // 将param转换为key    var json = '{"' + param + '":""}'    json = JSON.parse(json);    json[param] = animation.export()    // 设置动画    that.setData(json)}

通常对于这种全局的方法建议放在全局的app.js里,然后在其它页面通过getApp()获取全局方法。以下是调用实例:

然后是在当前页面里调用全局的动画方法,生成页面动画。

// pages/index/index.js// 获取小程序实例,也可以文件顶部直接引入onLoad: function (options) {    this.app = getApp();},// 页面显示时,触发动画onShow: function () {    this.app.slideUpShow(this, 'firstSlideUp', -200, 1)    setTimeout(function () {        this.app.slideUpShow(this, 'secondSlideUp', -200, 1)    }.bind(this), 200);}

 

转载地址:http://pasp.baihongyu.com/

你可能感兴趣的文章
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询数据库所有表的字段信息
查看>>