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


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的ajax基础上的超强GridView展示
Sep 18 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
angular.element方法汇总
Jan 07 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 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中var_export与var_dump的区别分析
2010/08/21 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python之pymysql的使用小结
2019/07/01 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
利用python在excel中画图的实现方法
2020/03/17 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
工厂搬迁方案
2014/05/11 职场文书
代理词怎么写
2015/05/25 职场文书
朋友聚会开场白
2015/06/01 职场文书
党支部半年考察意见
2015/06/01 职场文书
吴仁宝观后感
2015/06/09 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android