微信小程序实现元素渐入渐出动画效果封装方法


Posted in Javascript onMay 18, 2019

开端

之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。
那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到类似jQuery show()的效果

原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重
本文章阅读前需要对微信小程序的动画api有所了解

先看效果

可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画

微信小程序实现元素渐入渐出动画效果封装方法

解决

1.寻根问底,发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´ノ皿`)mmp] )有一个全局的js逻辑文件,叫app.js,有意思,可以往里面塞自己写的object(函数数据等等),那就从那里入手吧
2.在app.js中定义全局的动画函数

App({
 //渐入,渐出实现 
 show : function(that,param,opacity){
  var animation = wx.createAnimation({
   //持续时间800ms
   duration: 800,
   timingFunction: 'ease',
  });
  //var animation = this.animation
  animation.opacity(opacity).step()
  //将param转换为key
  var json = '{"' + param + '":""}'
  json = JSON.parse(json);
  json[param] = animation.export()
  //设置动画
  that.setData(json)
 },

 //滑动渐入渐出
 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)
 },

 //向右滑动渐入渐出
 sliderightshow: function (that, param, px, opacity) {
  var animation = wx.createAnimation({
   duration: 800,
   timingFunction: 'ease',
  });
  animation.translateX(px).opacity(opacity).step()
  //将param转换为key
  var json = '{"' + param + '":""}'
  json = JSON.parse(json);
  json[param] = animation.export()
  //设置动画
  that.setData(json)
 }
})

3.现在我们再看看调用这个函数的具体方法
在wxml中,只需要设置animation绑定即可,以首页index为例

// 这里是pages/page/index.wxml
//使用view包裹需要动画的元素
//class中定义动画开始前的初始样式,如透明度=0,向下偏移200px等,animtion属性填入绑定值
<view class="init" animation="{{slide_up1}}">

4.在该页的js中

// 这里是pages/page/index.js
//首先获取小程序实例,访问app.js中的函数
this.app = getApp();
//调用show函数,传参
//注意:查看上面show函数定义查看参数含义
//第一个参数是当前的页面对象,方便函数setData直接返回数据
//第二个参数是绑定的数据名,传参给setData,详细见上面
//第三个参数是上下滑动的px,因为class="init"定义初始该元素向下偏移了200px,所以这里使其上移200px
//第四个参数是需要修改为的透明度,这里是1,表示从初始的class="init"中定义的透明度0修改到1
this.app.slideupshow(this, 'slide_up1', -200, 1)

5.让我们完善流程,达到预览图首页的效果(有延时的边上升边出现效果)
wxml就是将各个容器分别绑定不同的变量,一个view容器就是一个动画单位(可以这样理解),如

<view class="init" animation="{{slide_up1}}">
  <card>...</card>
</view>
<view class="init" animation="{{slide_up2}}">
  <card>...</card>
</view>

页面的js

//onload时获取小程序实例
onLoad: function (options) {
  this.app = getApp()
 },
//页面展示时,触发动画
 onShow: function () {
  this.app.slideupshow(this, 'slide_up1', -200, 1)

  setTimeout(function () {
   this.app.slideupshow(this, 'slide_up2', -200, 1)
  }.bind(this), 200);
 },
//页面隐藏时,触发渐出动画
 onHide: function () {
   //你可以看到,动画参数的200,0与渐入时的-200,1刚好是相反的,其实也就做到了页面还原的作用,使页面重新打开时重新展示动画
  this.app.slideupshow(this, 'slide_up1', 200, 0)
  //延时展现容器2,做到瀑布流的效果,见上面预览图
  setTimeout(function () {
   this.app.slideupshow(this, 'slide_up2', 200, 0)
  }.bind(this), 200);
 }

以上所述是小编给大家介绍的微信小程序实现元素渐入渐出动画效果封装方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 #Javascript
小程序云开发之用户注册登录
May 18 #Javascript
小程序云开发实现数据库异步操作同步化
May 18 #Javascript
微信小程序云开发之数据库操作
May 18 #Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 #Javascript
史上最为详细的javascript继承(推荐)
May 18 #Javascript
You might like
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python IDLE入门简介
2017/12/08 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
办公室文书岗位职责
2013/12/16 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
电焊工岗位职责
2014/03/06 职场文书
个人担保书格式范文
2014/05/12 职场文书
毕业横幅标语
2014/10/08 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书