因为是想实现通用的效果，所以我把方法放在app.js里。主要原理是通过控制透明度显示。
以下是代码：
//渐入，渐出实现
show: function (that, param, opacity, duration=1800) {
var animation = wx.createAnimation({
//持续时间1800ms
duration: duration,
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)
}
以下是页面使用方法：
wxml
<view animation=”{{showBgp}}” class=”bgp” >这里是效果</view>
css
.bgp{
opacity:0; //主要是这个，其它可自定义
}
js中使用
getApp().show(this, ‘showBgp’, 1,1800);
