如下图所示
三个方法内容很少我是直接封装在app.js
app.js
App({
//渐变
fadein: function (that, param, opacity) {
var select = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
select.opacity(opacity).step()
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = select.export()
that.setData(json)
},
//垂直滑动 渐入渐出
slideupshow: function (that, param, px, opacity) {
var select = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
select.translateY(px).opacity(opacity).step()
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = select.export()
that.setData(json)
},
//平行滑动 渐入渐出
sliderightshow: function (that, param, px, opacity) {
var select = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
select.translateX(px).opacity(opacity).step()
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = select.export()
that.setData(json)
}
})
.js
const app = getApp()
Page({
data: {
},
//页面展示时,触发动画
onShow: function () {
let that = this
app.fadein(that, 'current1', 0)
app.fadein(that, 'current2', 0)
app.slideupshow(that, 'current2', -200, 0)
app.fadein(that, 'current3', 0)
app.sliderightshow(that, 'current3', -400, 0)
setTimeout(function () {
app.fadein(that, 'current1',1)
setTimeout(function () {
app.fadein(that, 'current2',1)
app.slideupshow(that, 'current2', 0, 1)
}, 500)
setTimeout(function () {
app.fadein(that, 'current3', 1)
app.sliderightshow(that, 'current3', 0, 1)
}, 1000)
}, 500)
},
//页面隐藏时,触发渐出动画
onHide: function () {
let that = this
app.fadein(that, 'current1', 1)
app.fadein(that, 'current2', 1)
app.slideupshow(that, 'current2', 200, 1)
app.fadein(that, 'current3', 1)
app.sliderightshow(that, 'current3', 200, 1)
},
navto:function(e){
wx.navigateTo({
url: '/pages/index/index',
})
},
})
.wxml
<view class="navto" bindtap="navto">
<view animation="{{current1}}" style="background-color:#e54d42;"></view>
<view animation="{{current2}}" style="background-color:#f37b1d;"></view>
<view animation="{{current3}}" style="background-color:#fbbd08;"></view>
</view>
.css
.navto{
width: 100%;
float: left;
}
.navto>view{
width: 94%;
float: left;
margin: 30rpx 3% 0 3%;
height: 200rpx;
border-radius: 10rpx;
}
想要什么样的效果可以自己任意搭配,一定要在.wxml声明animation="{{变量名}}"才能使用哦
有什么问题欢迎评论留言,我会及时回复你的