标签：uniapp 渐隐 num 动画 app animation background position top

短视频app搭建，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>

以上就是 短视频app搭建，uniapp动画实现图片循环渐隐渐显实现的相关代码，更多内容欢迎关注之后的文章

标签：uniapp,渐隐,num,动画,app,animation,background,position,top
来源： https://blog.csdn.net/yb1314111/article/details/119142814

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。