如题:
直接上代码
html
<view class="banner">
<image :animation="current==0?showpic:hidepic"
src="https://dalituiwechat.oss-cn-hangzhou.aliyuncs.com/wechat/swiper11.png" mode=""></image>
<image :animation="current==1?showpic:hidepic"
src="https://dalituiwechat.oss-cn-hangzhou.aliyuncs.com/wechat/swiper22.png" mode=""></image>
</view>
js部分
需要在date中声明好
current: 0,
hidepic: null,
showpic: null
因为是已进入就开始的,所以 要在生命周期中使用
var animation = uni.createAnimation({}) //创建一个动画实例
console.log(animation);
//淡入
animation.opacity(1).step({
// delay:1000,
duration: 500
}) //描述动画
this.showpic = animation.export()
//输出动画
//淡出
animation.opacity(0).step({
// delay: 1000,
duration: 1000
})
this.hidepic = animation.export()
最后一部别忘了,要给需要淡入淡出的元素或者图片设置绝对定位
.banner {
width: 100%;
height: 186rpx;
position: relative;
image {
width: 100%;
height: 100%;
position: absolute;
}
}