uni-app/微信小程序 实现图片或元素淡入淡出效果

如题：

直接上代码

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;
			}
		}