直播间赠送礼物动效、选礼物列表、赠送数量，礼物连发排队处理，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,   // 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>