uniapp動畫實現圖片循環漸隱漸顯

1. HTML

<template> 
	<view class="vipCard_block">
        <view 
          class="more" 
          @click="toGymCard">查看更多 ></view>
         <view 
          class="vipBox" 
          @tap="bgImgTap(num)">
          <view 
            :animation="num==2?showpic:hidepic" 
            class="cardBgPic">
            <text class="cardName">儲值卡</text>
            <text class="cardTitle">活動主題活動主題</text>
            <text class="cardIntro">會員卡簡介</text>
          </view>
          <view 
            :animation="num==1?showpic:hidepic" 
            class="cardBgPic ciCard">
            <text class="cardName">次數卡</text>
            <text class="cardTitle">活動主題活動主題</text>
            <text class="cardIntro">會員卡簡介</text>
          </view>
          <view 
            :animation="num==0?showpic:hidepic" 
            class="cardBgPic qiCard">
            <text class="cardName">期限卡</text>
            <text class="cardTitle">活動主題活動主題</text>
            <text class="cardIntro">會員卡簡介</text>
          </view>
        </view>
        
      </view>
</template>

2. js

<script>
	export default {
		data() {
		 	return {
				num: 0,//顯示vip卡類型標識
				picmaxnum:3, //卡種類數
				animation:'',
				showpic:'',
				hidepic:''
			}
		},
		onLoad() {
			this.changePic()
		},
		methods: {
			changePic() { //輪播方法
			
				clearInterval(this.setInter1);//先將已有的計時器清除
				var animation= uni.createAnimation({
						timingFunction: 'ease',
					}) //創建一個動畫實例
				this.animation = animation
			  this.setInter1=setInterval(function(){//循環
					
					this.num++;
					if(this.num==this.picmaxnum){
						this.num=0;
					}  
					//淡入
					animation.opacity(1).step({duration:3000,delay:1000}) //描述動畫
					this.showpic=animation.export() //輸出動畫
					//淡出
					animation.opacity(0).step({duration:3000,delay:1000})
					this.hidepic=animation.export()
				}.bind(this),4000)
			},
			bgImgTap(num){
				console.log(num, '我被點了')
				uni.navigateTo({
					url:'../gym/card/detail'
				})
						if(num==0){
							// uni.switchTab({
							// 	url:'../a'
							// })
						}else{
							//點擊不同的圖片，對應不同的需求
						}
					},
		}
	}
</script>

3. CSS

<style lang="less" scoped>
	.vipCard_block {
			height: 225rpx;
			border-radius: 24rpx;
			background-color: #fff;
			padding: 23rpx;
			margin-top: 30rpx;
			.more {
				float: right;
				z-index: 10;
				position: relative;
	
			}
			.vipBox {
				width: 648rpx;
				height: 134rpx;
				position: relative;
			}
			.qiCard {
				background-image: url('https:example')!important;
			}
			.ciCard {
				background-image: url('https:example')!important;
			}
			.cardBgPic {
				width: 637rpx;
				height: 189rpx;
				background-image: url('https:example');
				background-size:637rpx 189rpx;
				position: absolute;
				top: 0;
				z-index:2 ;
				.cardName {
					color: #F0F3F7;
					font-size:26rpx;
					position: absolute;
					top: 58rpx;
					left: 125rpx;
				}
				.cardTitle {
					font-size:32rpx;
					color: #fff;
					position: absolute;
					top: 65rpx;
					left: 320rpx;
				}
				.cardIntro {
					font-size:24rpx;
					color: #fff;
					position: absolute;
					top: 115rpx;
					left: 318rpx;
				}
			}
		}
</style>

參考鏈接
https://blog.csdn.net/weixin_41193139/article/details/103178600

https://uniapp.dcloud.io/api/ui/animation?id=unicreateanimationobject