当前位置：首页 > VUE

vue.js实现弹幕

2026-01-22 09:37:59VUE

Vue.js 实现弹幕功能

弹幕功能的实现通常涉及动态生成、移动控制和碰撞检测。以下是基于 Vue.js 的实现方法：

弹幕数据管理

使用 Vue 的响应式数据管理弹幕内容，通常是一个数组结构：

data() {
  return {
    danmus: [], // 存储弹幕数据
    inputText: '' // 用户输入的弹幕内容
  }
}

弹幕生成与发射

通过方法添加新弹幕并设置初始位置：

methods: {
  sendDanmu() {
    if (!this.inputText.trim()) return

    const newDanmu = {
      id: Date.now(),
      text: this.inputText,
      top: Math.random() * 70 + '%', // 随机垂直位置
      color: `hsl(${Math.random() * 360}, 100%, 70%)` // 随机颜色
    }
    this.danmus.push(newDanmu)
    this.inputText = ''
  }
}

弹幕动画实现

使用 CSS 动画控制弹幕移动：

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

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

性能优化

对于大量弹幕，使用虚拟滚动或对象池技术：

// 在弹幕移出屏幕后移除
mounted() {
  setInterval(() => {
    this.danmus = this.danmus.filter(d => {
      const el = document.getElementById(`danmu-${d.id}`)
      if (!el) return false
      const rect = el.getBoundingClientRect()
      return rect.right > 0
    })
  }, 1000)
}

高级功能实现

添加弹幕互动功能：

// 点击弹幕暂停
pauseDanmu(id) {
  const el = document.getElementById(`danmu-${id}`)
  if (el) {
    el.style.animationPlayState = 'paused'
  }
}

完整组件示例

<template>
  <div class="danmu-container">
    <input v-model="inputText" @keyup.enter="sendDanmu">
    <div class="danmu-display">
      <div 
        v-for="danmu in danmus" 
        :key="danmu.id"
        :id="`danmu-${danmu.id}`"
        class="danmu-item"
        :style="{ top: danmu.top, color: danmu.color }"
        @click="pauseDanmu(danmu.id)"
      >
        {{ danmu.text }}
      </div>
    </div>
  </div>
</template>