当前位置：首页 > VUE

vue实现弹幕效果

2026-01-17 23:31:06VUE

实现弹幕效果的基本思路

在Vue中实现弹幕效果，通常需要结合CSS动画和动态数据渲染。弹幕的核心是让文字从右向左平滑移动，同时支持多行显示和碰撞检测。

使用CSS动画实现移动效果

通过CSS的@keyframes和transform属性可以实现弹幕的移动动画。定义一个从右到左的动画：

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

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

Vue组件结构与数据绑定

创建一个Vue组件来管理弹幕数据，动态渲染弹幕元素：

<template>
  <div class="barrage-container">
    <div 
      v-for="(item, index) in barrages" 
      :key="index" 
      class="barrage-item"
      :style="{
        top: `${item.top}px`,
        color: item.color,
        animationDuration: `${item.speed}s`
      }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

弹幕数据管理

在Vue的data或setup中维护弹幕列表，并提供添加弹幕的方法：

data() {
  return {
    barrages: [],
    colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00']
  }
},
methods: {
  addBarrage(text) {
    const height = this.$el.clientHeight
    const speed = 5 + Math.random() * 5  // 随机速度
    const top = Math.random() * (height - 20)  // 随机垂直位置

    this.barrages.push({
      text,
      top,
      speed,
      color: this.colors[Math.floor(Math.random() * this.colors.length)]
    })

    // 动画结束后移除DOM元素
    setTimeout(() => {
      this.barrages.shift()
    }, speed * 1000)
  }
}

容器样式设置

弹幕容器需要设置为相对定位，并设置合适的尺寸：

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

性能优化建议

对于大量弹幕的情况，可以考虑以下优化措施：

使用虚拟滚动技术，只渲染可视区域内的弹幕元素

通过requestAnimationFrame实现自定义动画，替代CSS动画

对弹幕进行分组管理，减少频繁的DOM操作

完整组件示例

将上述代码整合成一个完整的Vue组件：

<template>
  <div class="barrage-container" ref="container">
    <div 
      v-for="(item, index) in barrages" 
      :key="index" 
      class="barrage-item"
      :style="barrageStyle(item)"
    >
      {{ item.text }}
    </div>
    <input v-model="newBarrage" @keyup.enter="sendBarrage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      barrages: [],
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00'],
      newBarrage: ''
    }
  },
  methods: {
    sendBarrage() {
      if (!this.newBarrage.trim()) return

      const height = this.$refs.container.clientHeight
      const speed = 5 + Math.random() * 5
      const top = Math.random() * (height - 20)

      this.barrages.push({
        text: this.newBarrage,
        top,
        speed,
        color: this.colors[Math.floor(Math.random() * this.colors.length)]
      })

      this.newBarrage = ''
    },
    barrageStyle(item) {
      return {
        top: `${item.top}px`,
        color: item.color,
        animationDuration: `${item.speed}s`
      }
    }
  }
}
</script>

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

.barrage-item {
  position: absolute;
  white-space: nowrap;
  animation: moveLeft linear;
  font-size: 16px;
  text-shadow: 1px 1px 2px #000;
}

@keyframes moveLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>