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


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 相关文章推荐
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
JavaScript控制台的更多功能
Apr 28 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在字符断点处截断文字的实现代码
2011/04/21 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php 可变函数使用小结
2018/06/12 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python修改操作系统时间的方法
2015/05/18 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python 字符串池化的前提
2020/07/03 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
银行员工职业规划范文
2014/01/21 职场文书
《云房子》教学反思
2014/04/20 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
三孔导游词
2015/02/05 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
筑梦中国心得体会
2016/01/18 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS