短視訊app搭建，uniapp動畫實現圖片迴圈漸隱漸顯實現的相關程式碼
1. HTML

```handlebars
<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

```handlebars
<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

```handlebars
<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>
```

以上就是 短視訊app搭建，uniapp動畫實現圖片迴圈漸隱漸顯實現的相關程式碼，更多內容歡迎關注之後的文章