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

Love The Way You Lie 2022-11-03 05:45 298阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70][]

下面是一个完整的送礼物动效页，可以直接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,   // x1x2x3
              giftTime: 2000 ,// css里的animation mymove也是一样2s
            }
        }
      },
      methods: {
        sendGift() {
          // 选择x1x2x3拼接数组 或者是监听礼物接口的回调数据拼接进showGiftList
          for(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 停留展示1s
      0% {left: -160px;display: none;}
      1% {left: -160px;display: block;}
      50% {left: 200px}
      99% {left: 200px}
      100% {left: 200px;display: none;}
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzUxMDYxMg_size_16_color_FFFFFF_t_70]: /images/20221024/976fc45f12a74a55bdc382baa9d7368d.png