开端
之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。
那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到类似jQuery显示()的效果
原创文章,允许转载分享。但请转载请一定标明出处,这是起码的尊重
本文章阅读前需要对微信小程序的动画api有所了解
先看效果
可以看的到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画
解决
1。寻根问底,发现wx_mini_program(下面称呼微信小程序为wxmp[差点叫成(*朴归隐者;& # 65417;皿)mmp)有一个全局的js逻辑文件,叫app.js,有意思,可以往里面塞自己写的对象(函数数据等等),那就从那里入手吧
2 .在应用程序。js中定义全局的动画函数
应用程序({
,//渐入渐出实现
显示:函数(参数,不透明度){
var动画=wx.createAnimation ({//持续时间800 ms
持续时间:800
timingFunction:“缓解”,
});//var=this.animation动画
animation.opacity(不透明).step ()//将参数转换为关键
var json='{+参数+”:“}”
json=JSON.parse (json);
json(参数)=animation.export ()//设置动画
that.setData (json)
}，//滑动渐入渐出
slideupshow:函数(参数,px,不透明度){
var动画=wx.createAnimation ({
持续时间:800
timingFunction:“缓解”,
});
animation.translateY (px) .opacity(不透明).step ()//将参数转换为关键
var json='{+参数+”:“}”
json=JSON.parse (json);
json(参数)=animation.export ()//设置动画
that.setData (json)
}，//向右滑动渐入渐出
sliderightshow:函数(参数,px,不透明度){
var动画=wx.createAnimation ({
持续时间:800
timingFunction:“缓解”,
});
animation.translateX (px) .opacity(不透明).step ()//将参数转换为关键
var json='{+参数+”:“}”
json=JSON.parse (json);
json(参数)=animation.export ()//设置动画
that.setData (json)
}
})
之前
3。现在我们再看看调用这个函数的具体方法
在wxml中,只需要设置动画绑定即可,以首页索引为例
//这里是页面/页面/index.wxml//使用视图包裹需要动画的元素//类中定义动画开始前的初始样式,如透明度=0,向下偏移200 px等,animtion属性填入绑定值
& lt;动画视图类=癷nit”=皗{slide_up1}}”比;
之前
4。在该页的js中
//这里是页面/页面/index.js//首先获取小程序实例,访问app.js中的函数
这一点。应用=getApp ();//调用显示函数,传参//注意:查看上面显示函数定义查看参数含义//第一个参数是当前的页面对象,方便函数setData直接返回数据//第二个参数是绑定的数据名,传参给setData,详细见上面//第三个参数是上下滑动的px,因为类=癷nit”定义初始该元素向下偏移了200 px,所以这里使其上移200 px//第四个参数是需要修改为的透明度,这里是1,表示从初始的类=癷nit”中定义的透明度0修改到1
this.app。slideupshow (“slide_up1”,这-200,1)
之前
5。让我们完善流程,达到预览图首页的效果(有延时的边上升边出现效果)
wxml就是将各个容器分别绑定不同的变量,一个视图容器就是一个动画单位(可以这样理解),如
& lt;动画视图类=癷nit”=皗{slide_up1}}”比;
& lt; card>……& lt;/card>
& lt;/view>
& lt;动画视图类=癷nit”=皗{slide_up2}}”比;
& lt; card>……& lt;/card>
& lt;/view>
之前
页面的js
//装载时获取小程序实例
onLoad:功能(选项){
这一点。应用=getApp ()
}，//页面展示时,触发动画
昂秀:函数(){
this.app。slideupshow (“slide_up1”,这-200,1)
setTimeout(函数(){
this.app。slideupshow (“slide_up2”,这-200,1)
}.bind(这),200);
}，//页面隐藏时,触发渐出动画
onHide:函数(){//你可以看的到,动画参数的200,0与渐入时的-200年,1刚好是相反的,其实也就做到了页面还原的作用,使页面重新打开时重新展示动画
this.app。slideupshow (“slide_up1”,这200,0)//延时展现容器2,做到瀑布流的效果,见上面预览图
setTimeout(函数(){
this.app。slideupshow (“slide_up2”,这200,0)
}.bind(这),200);
}
