开端
之前一直使用堪称“万能”的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)
}
})
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
