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


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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 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
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python切片工具pillow用法示例
2018/03/30 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python之信息加密题目详解
2019/06/26 Python
Python自定义一个异常类的方法
2019/06/27 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
会计专业的自荐信
2013/12/12 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
寄语是什么意思
2014/04/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL