当前位置：首页 > VUE

vue弹幕实现不重叠

2026-03-26 23:38:17VUE

实现不重叠的 Vue 弹幕功能

核心思路
通过动态计算每条弹幕的垂直位置，确保新弹幕不会与已有弹幕在垂直方向上重叠。需要结合轨道管理、碰撞检测和动画控制。

vue弹幕实现不重叠

轨道管理法

将屏幕垂直划分为多条虚拟轨道，每条轨道同一时间只允许一条弹幕存在。新弹幕优先选择空闲轨道。

vue弹幕实现不重叠

// 轨道状态管理
data() {
  return {
    tracks: [false, false, false], // 假设3条轨道
    danmuList: []
  }
},
methods: {
  addDanmu(text) {
    const trackIndex = this.tracks.findIndex(used => !used);
    if (trackIndex >= 0) {
      this.tracks[trackIndex] = true;
      this.danmuList.push({
        text,
        track: trackIndex,
        id: Date.now()
      });
    }
  },
  clearTrack(trackIndex) {
    this.tracks[trackIndex] = false;
  }
}

动态位置计算法

实时计算每条弹幕的占据区域，通过位置检测避免重叠。

// 弹幕位置检测
isPositionAvailable(yPos) {
  return !this.danmuList.some(item => {
    const itemTop = item.top;
    const itemBottom = item.top + item.height;
    return (yPos >= itemTop && yPos <= itemBottom) || 
           (itemTop >= yPos && itemTop <= yPos + height);
  });
}

CSS 实现方案

结合 CSS 动画和轨道定位，确保弹幕在不同层级移动。

.danmu-track {
  position: absolute;
  height: 30px;
  width: 100%;
}
.track-1 { top: 10%; }
.track-2 { top: 40%; }
.track-3 { top: 70%; }

.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move linear;
  animation-duration: 8s;
}

@keyframes move {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

性能优化建议

使用 requestAnimationFrame 控制动画流畅度
对弹幕 DOM 进行虚拟滚动优化
限制同时显示的弹幕数量
采用 Canvas 渲染替代 DOM 方案（适用于大量弹幕）

完整组件示例

<template>
  <div class="danmu-container">
    <div 
      v-for="(item, index) in activeList"
      :key="item.id"
      :class="`danmu-item track-${item.track}`"
      @animationend="handleAnimationEnd(item)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxTracks: 3,
      tracks: Array(3).fill(false),
      danmuQueue: [],
      activeList: []
    }
  },
  methods: {
    addDanmu(text) {
      const track = this.findAvailableTrack();
      if (track !== -1) {
        this.activeList.push({
          id: Date.now(),
          text,
          track
        });
      } else {
        this.danmuQueue.push(text);
      }
    },
    findAvailableTrack() {
      return this.tracks.findIndex(used => !used);
    },
    handleAnimationEnd(item) {
      this.tracks[item.track] = false;
      this.activeList = this.activeList.filter(i => i.id !== item.id);
      if (this.danmuQueue.length > 0) {
        this.addDanmu(this.danmuQueue.shift());
      }
    }
  }
}
</script>