vue怎么实现弹幕

实现弹幕功能的基本思路

弹幕功能的核心在于动态创建并控制多条文字消息在屏幕上移动。Vue的响应式特性和组件化开发非常适合实现这一需求。

使用Vue实现弹幕的步骤

创建弹幕组件 定义一个弹幕项组件，负责单个弹幕的渲染和动画：

<template>
  <div class="danmu-item" :style="style">
    {{ text }}
  </div>
</template>

<script>
export default {
  props: ['text', 'top', 'speed'],
  data() {
    return {
      left: '100%'
    }
  },
  computed: {
    style() {
      return {
        top: `${this.top}px`,
        left: this.left,
        transition: `left ${this.speed}s linear`
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.left = '-100%'
    })
  }
}
</script>

<style>
.danmu-item {
  position: absolute;
  white-space: nowrap;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-size: 16px;
  will-change: transform;
}
</style>

创建弹幕容器组件 管理所有弹幕实例和发射逻辑：

<template>
  <div class="danmu-container" ref="container">
    <danmu-item 
      v-for="(item, index) in danmus"
      :key="index"
      :text="item.text"
      :top="item.top"
      :speed="item.speed"
      @transitionend="removeDanmu(index)"
    />
  </div>
</template>

<script>
import DanmuItem from './DanmuItem.vue'

export default {
  components: { DanmuItem },
  data() {
    return {
      danmus: [],
      containerHeight: 0
    }
  },
  mounted() {
    this.containerHeight = this.$refs.container.clientHeight
  },
  methods: {
    addDanmu(text) {
      const top = Math.random() * (this.containerHeight - 20)
      const speed = 5 + Math.random() * 5 // 5-10秒的随机速度
      this.danmus.push({ text, top, speed })
    },
    removeDanmu(index) {
      this.danmus.splice(index, 1)
    }
  }
}
</script>

<style>
.danmu-container {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: #000;
  overflow: hidden;
}
</style>

优化弹幕性能

使用requestAnimationFrame 对于大量弹幕，CSS动画可能不够高效，可以改用requestAnimationFrame：

// 在DanmuItem组件中
methods: {
  startAnimation() {
    let start
    const duration = this.speed * 1000
    const step = (timestamp) => {
      if (!start) start = timestamp
      const progress = timestamp - start
      this.left = `${100 - (progress / duration) * 200}%`
      if (progress < duration) {
        requestAnimationFrame(step)
      } else {
        this.$emit('animationend')
      }
    }
    requestAnimationFrame(step)
  }
}

使用虚拟滚动 对于超大量弹幕，可以只渲染可视区域内的弹幕：

computed: {
  visibleDanmus() {
    return this.danmus.filter(danmu => {
      // 根据当前位置判断是否在可视区域
      return danmu.left > -10 && danmu.left < 110
    })
  }
}

弹幕功能扩展

添加弹幕样式选项 允许自定义颜色、大小等样式：

props: {
  color: {
    type: String,
    default: '#fff'
  },
  size: {
    type: Number,
    default: 16
  }
}

实现弹幕碰撞检测 防止弹幕重叠：

methods: {
  getSafeTop() {
    const occupied = new Set()
    this.danmus.forEach(d => occupied.add(d.top))

    let top
    do {
      top = Math.random() * (this.containerHeight - 20)
    } while (occupied.has(top))

    return top
  }
}

添加弹幕互动功能 允许点击暂停或举报弹幕：

<div 
  class="danmu-item"
  @click="togglePause"
  @contextmenu.prevent="report"
>
  {{ text }}
</div>

methods: {
  togglePause() {
    this.paused = !this.paused
    if (this.paused) {
      cancelAnimationFrame(this.animationId)
    } else {
      this.startAnimation()
    }
  },
  report() {
    this.$emit('report', this.text)
  }
}