vue中实现弹幕效果

实现弹幕效果的基本思路

在Vue中实现弹幕效果，核心是通过动态生成弹幕元素并控制其移动轨迹。通常需要结合CSS动画或JavaScript定时器实现弹幕的滚动、淡入淡出等效果。

基础实现步骤

创建弹幕数据数组 使用Vue的data或ref（Composition API）存储弹幕内容数组，每条弹幕可包含文本、颜色、速度等属性。

// Options API
data() {
  return {
    danmus: [
      { text: '第一条弹幕', color: '#ff0000', speed: 5 },
      { text: '第二条弹幕', color: '#00ff00', speed: 3 }
    ]
  }
}

// Composition API
const danmus = ref([
  { text: '第一条弹幕', color: '#ff0000', speed: 5 }
]);

渲染弹幕DOM 使用v-for循环渲染弹幕元素，通过动态样式绑定颜色和位置。

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

添加CSS动画 通过CSS transform或left属性实现横向移动，使用transition或animation控制动画效果。

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move linear;
}
@keyframes move {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

动态添加弹幕

方法封装 通过方法动态添加弹幕到数组，并设置动画持续时间（与速度相关）。

addDanmu(text) {
  this.danmus.push({
    text,
    color: this.getRandomColor(),
    speed: Math.random() * 3 + 2
  });
}
getRandomColor() {
  return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}
randomTop() {
  return Math.floor(Math.random() * 250);
}

动画速度控制 在CSS中通过动态计算animation-duration实现不同速度：

:style="{
  color: danmu.color,
  top: `${randomTop()}px`,
  animationDuration: `${danmu.speed}s`
}"

性能优化方案

使用requestAnimationFrame 对于大量弹幕，可用JavaScript手动控制动画以减少重绘：

function animateDanmu() {
  danmuElements.forEach(el => {
    const currentPos = parseFloat(el.style.left);
    el.style.left = `${currentPos - 1}px`;
    if (currentPos < -el.offsetWidth) {
      el.remove();
    }
  });
  requestAnimationFrame(animateDanmu);
}

虚拟滚动技术 只渲染可视区域内的弹幕，通过计算滚动位置动态加载/卸载DOM元素。

高级功能扩展

弹幕碰撞检测 通过getBoundingClientRect()检测元素位置，避免重叠：

function checkCollision(el) {
  const rect = el.getBoundingClientRect();
  // 与其他弹幕元素的位置比较逻辑
}

互动功能 添加点击事件支持暂停/继续：

<div 
  @click="toggleDanmu(danmu)"
  @animationend="removeDanmu(danmu)"
></div>

时间轴控制 结合视频播放进度同步弹幕显示，需维护弹幕的时间戳数据。

完整示例代码

<template>
  <div>
    <input v-model="newDanmu" @keyup.enter="addDanmu" />
    <div class="danmu-container">
      <div 
        v-for="(danmu, index) in danmus" 
        :key="index"
        class="danmu-item"
        :style="{
          color: danmu.color,
          top: `${danmu.top}px`,
          animationDuration: `${danmu.speed}s`
        }"
      >
        {{ danmu.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newDanmu: '',
      danmus: []
    }
  },
  methods: {
    addDanmu() {
      this.danmus.push({
        text: this.newDanmu,
        color: `#${Math.floor(Math.random()*16777215).toString(16)}`,
        speed: Math.random() * 3 + 2,
        top: Math.floor(Math.random() * 250)
      });
      this.newDanmu = '';
    }
  }
}
</script>