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

参考链接
https://blog.csdn.net/weixin_41193139/article/details/103178600

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