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

开端

之前一直使用堪称“万能”的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修改到1this.app.slideupshow(this, 'slide_up1', -200, 1)