原文:[https://blog.csdn.net/weixin_42917830/article/details/81701125?utm_source=copy]
写到app.js中
App({
//渐入,渐出实现
// 各个参数的含义 this 类名 透明度
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)
}
})
写到要是用动画的页面中
// 这里是pages/page/index.wxml
//使用view包裹需要动画的元素
//class中定义动画开始前的初始样式,如透明度=0,向下偏移200px等,animtion属性填入绑定值
<view class="init" animation="{{slide_up1}}"></view>
写到要是用动画的页面中的js
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);
}
```