当前位置：首页 > VUE

vue3实现弹幕

2026-02-22 02:39:37VUE

Vue3 实现弹幕功能

弹幕功能的实现主要涉及动态生成、移动控制和样式管理。以下是基于Vue3的实现方法：

核心实现步骤

创建弹幕组件

<template>
  <div class="danmu-container">
    <div 
      v-for="(item, index) in danmus" 
      :key="index" 
      class="danmu-item"
      :style="{
        top: item.top + 'px',
        color: item.color,
        left: item.left + 'px'
      }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

数据管理与动画

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const danmus = ref([])
    const containerWidth = ref(0)
    const containerHeight = ref(0)

    onMounted(() => {
      const container = document.querySelector('.danmu-container')
      containerWidth.value = container.offsetWidth
      containerHeight.value = container.offsetHeight

      // 启动弹幕生成器
      setInterval(addDanmu, 1000)
    })

    function addDanmu() {
      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00']
      const newDanmu = {
        text: '示例弹幕' + Math.random().toString(36).substr(2, 5),
        color: colors[Math.floor(Math.random() * colors.length)],
        top: Math.random() * containerHeight.value,
        left: containerWidth.value
      }

      danmus.value.push(newDanmu)
      moveDanmu(newDanmu)
    }

    function moveDanmu(danmu) {
      const speed = 2 + Math.random() * 3
      const timer = setInterval(() => {
        danmu.left -= speed
        if (danmu.left < -100) {
          clearInterval(timer)
          danmus.value = danmus.value.filter(d => d !== danmu)
        }
      }, 16)
    }

    return { danmus }
  }
}

样式优化

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

.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 20px;
  text-shadow: 1px 1px 2px #000;
  user-select: none;
}

高级功能扩展

性能优化 使用requestAnimationFrame替代setInterval

function moveDanmu(danmu) {
  let start = null
  const duration = 5000 // 5秒

  function step(timestamp) {
    if (!start) start = timestamp
    const progress = timestamp - start
    danmu.left = containerWidth.value - (progress / duration) * (containerWidth.value + 100)

    if (progress < duration) {
      requestAnimationFrame(step)
    } else {
      danmus.value = danmus.value.filter(d => d !== danmu)
    }
  }

  requestAnimationFrame(step)
}

交互功能 添加发送弹幕功能

vue3实现弹幕

const inputText = ref('')

function sendDanmu() {
  if (!inputText.value.trim()) return

  const newDanmu = {
    text: inputText.value,
    color: '#ffffff',
    top: Math.random() * containerHeight.value,
    left: containerWidth.value
  }

  inputText.value = ''
  danmus.value.push(newDanmu)
  moveDanmu(newDanmu)
}