vue实现弹幕

Vue 实现弹幕功能

弹幕功能通常包括动态生成、滚动显示、颜色和速度随机化等特性。以下是基于 Vue 3 的实现方法。

核心思路

1. 使用 CSS 动画控制弹幕从右向左滚动。
2. 动态生成弹幕数据，随机设置样式（颜色、速度、位置）。
3. 通过 Vue 的 v-for 指令渲染弹幕列表。

实现步骤

模板部分

<template>
  <div class="danmu-container">
    <div 
      v-for="(item, index) in danmuList" 
      :key="index"
      class="danmu-item"
      :style="{
        top: item.top + 'px',
        color: item.color,
        animationDuration: item.duration + 's'
      }"
    >
      {{ item.text }}
    </div>
    <input v-model="inputText" @keyup.enter="sendDanmu" placeholder="输入弹幕内容" />
  </div>
</template>

样式部分

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #000;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: danmuMove linear;
  font-size: 16px;
  user-select: none;
}

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

脚本部分

<script>
import { ref } from 'vue'

export default {
  setup() {
    const danmuList = ref([])
    const inputText = ref('')

    // 生成随机颜色
    const getRandomColor = () => {
      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']
      return colors[Math.floor(Math.random() * colors.length)]
    }

    // 发送弹幕
    const sendDanmu = () => {
      if (!inputText.value.trim()) return

      danmuList.value.push({
        text: inputText.value,
        color: getRandomColor(),
        top: Math.random() * 250, // 随机垂直位置
        duration: 5 + Math.random() * 5 // 随机速度
      })

      inputText.value = ''
    }

    // 模拟自动生成弹幕
    setInterval(() => {
      const texts = ['666', '太棒了', '哈哈哈', '学到了', 'Vue真好用']
      danmuList.value.push({
        text: texts[Math.floor(Math.random() * texts.length)],
        color: getRandomColor(),
        top: Math.random() * 250,
        duration: 5 + Math.random() * 5
      })
    }, 1000)

    return {
      danmuList,
      inputText,
      sendDanmu
    }
  }
}
</script>

优化建议

1. 性能优化
   弹幕数量过多时移除已滚出屏幕的弹幕元素：

   // 在动画结束后移除弹幕
   const handleAnimationEnd = (index) => {
     danmuList.value.splice(index, 1)
   }

2. 自定义配置
   添加配置选项控制弹幕密度、速度范围等参数。

3. WebSocket 集成
   结合 WebSocket 实现实时弹幕功能，适合直播等场景。

4. 防遮挡处理
   通过算法避免弹幕重叠，提升可读性。

5. 移动端适配
   针对移动设备调整弹幕大小和速度。

以上实现提供了弹幕功能的基础框架，可根据实际需求进行扩展和优化。