当前位置：首页 > VUE

vue 实现弹幕

2026-03-07 00:28:27VUE

实现弹幕的基本思路

在Vue中实现弹幕功能，核心是通过动态渲染组件或DOM元素，控制其从右向左移动。弹幕数据通常存储在数组中，通过定时器或动画实现移动效果。

使用CSS动画实现弹幕移动

定义CSS动画关键帧，使弹幕从右向左平移。这种方式性能较好，适合大量弹幕场景。

.barrage-item {
  position: absolute;
  white-space: nowrap;
  animation: barrageMove 10s linear;
}

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

Vue组件实现弹幕容器

创建弹幕容器组件，管理弹幕的生成、移动和销毁。

<template>
  <div class="barrage-container">
    <div 
      v-for="(item, index) in barrages" 
      :key="index"
      class="barrage-item"
      :style="getBarrageStyle(item)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      barrages: [],
      nextId: 0
    }
  },
  methods: {
    addBarrage(text) {
      const id = this.nextId++
      const top = Math.random() * 80 + 10 // 随机位置
      this.barrages.push({ id, text, top })

      setTimeout(() => {
        this.removeBarrage(id)
      }, 10000) // 动画结束后移除
    },
    removeBarrage(id) {
      this.barrages = this.barrages.filter(item => item.id !== id)
    },
    getBarrageStyle(item) {
      return {
        top: `${item.top}%`,
        color: this.getRandomColor()
      }
    },
    getRandomColor() {
      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
      return colors[Math.floor(Math.random() * colors.length)]
    }
  }
}
</script>

使用requestAnimationFrame优化性能

对于更复杂的弹幕控制，可以使用requestAnimationFrame实现更精确的动画控制。

methods: {
  startAnimation() {
    const animate = () => {
      this.barrages.forEach(item => {
        item.left -= 2 // 移动速度
        if (item.left < -item.width) {
          this.removeBarrage(item.id)
        }
      })
      if (this.barrages.length) {
        this.animationId = requestAnimationFrame(animate)
      }
    }
    this.animationId = requestAnimationFrame(animate)
  },
  stopAnimation() {
    cancelAnimationFrame(this.animationId)
  }
}

弹幕轨道管理系统

为避免弹幕重叠，可以实现轨道系统，将弹幕分配到不同轨道。

methods: {
  getAvailableTrack() {
    const trackCount = 5
    const tracks = Array(trackCount).fill(0).map((_, i) => i * 20 + 10) // 轨道位置

    // 查找空闲轨道
    for (let i = 0; i < tracks.length; i++) {
      const isOccupied = this.barrages.some(item => 
        item.track === i && item.left > -item.width
      )
      if (!isOccupied) return { track: i, top: tracks[i] }
    }
    return { track: -1, top: Math.random() * 80 + 10 } // 无空闲则随机
  }
}

弹幕交互功能实现

为弹幕添加点击事件和悬停暂停功能，提升用户体验。

<div 
  class="barrage-item"
  @click="handleBarrageClick(item)"
  @mouseenter="pauseBarrage(item)"
  @mouseleave="resumeBarrage(item)"
>
  {{ item.text }}
</div>

<script>
methods: {
  handleBarrageClick(item) {
    console.log('弹幕点击:', item.text)
  },
  pauseBarrage(item) {
    item.paused = true
    item.el.style.animationPlayState = 'paused'
  },
  resumeBarrage(item) {
    item.paused = false
    item.el.style.animationPlayState = 'running'
  }
}
</script>

弹幕过滤和样式控制

实现弹幕过滤功能，支持不同样式的弹幕显示。

methods: {
  filterBarrages(type) {
    return this.barrages.filter(item => item.type === type)
  },
  getBarrageClass(item) {
    return [
      'barrage-item',
      `barrage-${item.type}`,
      { 'barrage-special': item.isSpecial }
    ]
  }
}