微信小程序-实现元素渐入渐出动画效果-封装方法
目录
微信小程序-实现元素渐入渐出动画效果-封装方法
效果
解决
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);
}