短视频app搭建，uniapp动画实现图片循环渐隐渐显

短视频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动画实现图片循环渐隐渐显实现的相关代码，更多内容欢迎关注之后的文章