直播间赠送礼物动效、选礼物列表、赠送数量，礼物连发排队处理，Vue项目

1、可以选择送的是礼物列表的哪一个、可以选择送的数量x1x2x3
2、礼物做了排队展示的处理，可以解决礼物连续发送、监听到别人发送礼物接口数据回调的排队问题，不会冲刷掉礼物动效

下面是一个完整的送礼物动效页，可以直接copy到vue项目运行打开

<template><div><div class="test_box" v-if="giftAnimation"><img v-if="showGiftList.length" :src="showGiftList[0].giftImage" alt="">你赠送{{showGiftList.length ? showGiftList[0].liveGiftName : ''}}</div><h1>当前排队的礼物长度{{showGiftList.length}}</h1><div class="btn_box"><button v-for="(item,itemI) in allList" :key="itemI" @click="giftParams.giftIndex = itemI"> {{item.liveGiftName}}</button><div><button @click="giftParams.giftNum = 1">按钮×1</button><button @click="giftParams.giftNum = 2">按钮×2</button><button @click="giftParams.giftNum = 3">按钮×3</button></div><div @click="sendGift" class="mt50">发送</div></div></div>
</template><script>
export default {data() {return {allList: [ //总的礼物列表{giftImage:'https://rdimg.rundejy.com/web/runde_admin/icon_奖杯-1.png',liveGiftName: '奖杯'},{giftImage:'https://rdimg.rundejy.com/web/runde_admin/icon_鼓掌-1.png',liveGiftName: '鼓掌'}],showGiftList: [], // 弹层礼物列表  // '礼物1','礼物2'giftAnimation: false, // 是否显示礼物动画giftParams: {giftIndex: '', // 点击的是礼物列表的第几个giftNum: 1,   // x1x2x3giftTime: 2000 ,// css里的animation mymove也是一样2s}}},methods: {sendGift() {// 选择x1x2x3拼接数组 或者是监听礼物接口的回调数据拼接进showGiftListfor(let i=1;i<= this.giftParams.giftNum; i++) {let activeItem = this.allList[this.giftParams.giftIndex];this.showGiftList.push(activeItem);}this.$nextTick(()=>{if(!this.giftAnimation) { // 动画已经停止了 点了新的礼物 执行新的定时器this.giftAnimation = true;let giftAnimation = setInterval(() => {if(this.showGiftList.length ===1) { // 最后一个数组 也是要停止定时器this.showGiftList.shift();clearInterval(giftAnimation);this.giftAnimation = false;}else if(this.showGiftList.length) { // 有长度的话 就必须要删除数组this.showGiftList.shift();}else { //  没有数组的时候 就要停止定时器clearInterval(giftAnimation);this.giftAnimation = false;}}, this.giftParams.giftTime);}else {}// 正在进行动画的话 就不再添加定时器})}}
}
</script><style scoped lang="scss">
.mt50 {margin-top: 50px;
}
.btn_box {position: fixed;bottom: 0;button {width: 200px;}
}
.test_box {animation: mymove 2s infinite;height: 30px;position: fixed;top: 100px;left: -160px;img {width: 50px;vertical-align: middle;}
}
@keyframes mymove { //滑动出来1s 停留展示1s0% {left: -160px;display: none;}1% {left: -160px;display: block;}50% {left: 200px}99% {left: 200px}100% {left: 200px;display: none;}
}
</style>

直播间赠送礼物动效、选礼物列表、赠送数量，礼物连发排队处理，Vue项目相关推荐

QT实现弹幕和webp格式礼物动效
Demo:https://download.csdn.net/download/wu110112/21628782?spm=1001.2014.3001.5501 动效礼物可支持各位为:gif和web ...
记录一次礼物动效的设计与实现过程
实现礼物动效可以使用ViewGroup的方式也可以使用自定义View的方式.本文使用的是自定义View方式,不会讨论关于ViewGroup的实现方式. 数据模型数据源列表使用mList 数据源列表使 ...
网络直播平台搭建一个直播间的礼物系统
网络直播平台搭建一个直播间的礼物系统 1. 所有直播间的礼物系统,第一步用户看到的无外乎都是礼物的列表界面纵观主流直播间的礼物列表应该都是使用UICollectionView实现的,所以我也不例外, ...
动效给程序员用什么格式_Principle: 做动效，选对软件很重要
你有多久没做动效了?平时的工作主要是终端视觉设计,功能需求加运营需求,静态稿件加动效设计,从比例来看,动效设计其实不会占很多空间,但偶尔也会来一波.而实际场景往往是:需求是排满的,项目是紧急的,时间呢 ...
如何让动效又快又好落地？我分析了这5种格式的优缺点
动效设计,可以提升界面的趣味性和引导性,让用户浏览过程中不会太枯燥,获得更好的体验. 最近做的金山知了(后面改名为金山知识库)官网,头图元素加入了缓动效果,第一眼挺新颖的.金山协作新年许愿活动,许愿按 ...
js svg语音波动动画_让动效更酷炫！4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
怎么用class引入svg_让动效更酷炫！4 个常见且常用的 SVG 交互动画方法
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法. 优秀的人机交互和舒适合理的动画,一直是 UX 设计师孜孜不倦追求的目标.但 UX 设计师每天都遇到能做出效 ...
动效素材极速交付：腾讯PAG动效组件技术揭秘
编者按:音视频产品中的动效素材需求是源源不断的,例如贴纸花字,转场特效,照片和视频模板等,并且对它们的产量,上线速度,以及视觉效果都有比较高的要求.但在传统工作流中的交付成本却非常高,需要通过代码来手 ...
直播间场控词大全第二期
一个人对着几百上千的观众,不知道该如何引导.常常导致直播节奏出错,场面一度混乱! 其实,想要做好一场直播,主播一定要学会控场的能力!这样无论出现什么突发问题,我们都能及时解决! 下面我们整理了一份直播 ...

直播间赠送礼物动效、选礼物列表、赠送数量，礼物连发排队处理，Vue项目

直播间赠送礼物动效、选礼物列表、赠送数量，礼物连发排队处理，Vue项目相关推荐

最新文章

热门文章