开端1.

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

2.

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

先看效果3.

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

解决4.

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

App({//渐入，渐出实现show:function(that,param,opacity){varanimationwx.createAnimation({//持续时间800msduration:800,timingFunction:'ease',});//varanimationthis.animationanimation.opacity(opacity).step()//将param转换为keyvarjson'{"'+param+'":""}'jsonJSON.parse(json);json[param]animation.export()//设置动画that.setData(json)},//滑动渐入渐出slideupshow:function(that,param,px,opacity){varanimationwx.createAnimation({duration:800,timingFunction:'ease',});animation.translateY(px).opacity(opacity).step()//将param转换为keyvarjson'{"'+param+'":""}'jsonJSON.parse(json);json[param]animation.export()//设置动画that.setData(json)},//向右滑动渐入渐出sliderightshow:function(that,param,px,opacity){varanimationwx.createAnimation({duration:800,timingFunction:'ease',});animation.translateX(px).opacity(opacity).step()//将param转换为keyvarjson'{"'+param+'":""}'jsonJSON.parse(json);json[param]animation.export()//设置动画that.setData(json)}})5.

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

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

4.在该页的js中

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

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

viewclass"init"animation"{{slide_up1}}"card.../card/viewviewclass"init"animation"{{slide_up2}}"card.../card/view8.

页面的js

//onload时获取小程序实例onLoad:function(options){this.appgetApp()},//页面展示时，触发动画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);}9.

其实上面就是实现高度复用的动画效果的解决方案了原创文章，允许转载分享。但请转载请一定标明出处，这是起码的尊重如有纰漏，敬请留言反馈