vue实现弹幕

Vue 实现弹幕功能

弹幕功能常见于视频直播或播放场景，通过 Vue 可以实现动态、可配置的弹幕效果。以下是实现弹幕的几种方法：

基于 CSS 动画的弹幕

通过 CSS 的 animation 或 transition 控制弹幕的移动效果，结合 Vue 的动态渲染能力实现弹幕生成。

<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 }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danmuList: [],
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00']
    };
  },
  methods: {
    addDanmu(text) {
      const top = Math.floor(Math.random() * 200);
      const color = this.colors[Math.floor(Math.random() * this.colors.length)];
      this.danmuList.push({ text, top, color });

      setTimeout(() => {
        this.danmuList.shift();
      }, 5000);
    }
  }
};
</script>

<style>
.danmu-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move 5s linear;
}

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

基于 Vue Transition 的弹幕

利用 Vue 的 <transition-group> 实现弹幕的进入和离开动画，更灵活地控制弹幕行为。

<template>
  <div class="danmu-container">
    <transition-group name="danmu" tag="div">
      <div 
        v-for="(item, index) in danmuList" 
        :key="item.id"
        class="danmu-item"
        :style="{ top: item.top + 'px', color: item.color }"
      >
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danmuList: [],
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00'],
      idCounter: 0
    };
  },
  methods: {
    addDanmu(text) {
      const top = Math.floor(Math.random() * 200);
      const color = this.colors[Math.floor(Math.random() * this.colors.length)];
      this.danmuList.push({ 
        id: this.idCounter++,
        text, 
        top, 
        color 
      });

      setTimeout(() => {
        this.danmuList = this.danmuList.filter(item => item.id !== this.idCounter - 1);
      }, 5000);
    }
  }
};
</script>

<style>
.danmu-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  white-space: nowrap;
  transition: transform 5s linear;
  transform: translateX(100%);
}

.danmu-enter-active {
  transition: transform 5s linear;
}
.danmu-enter {
  transform: translateX(100%);
}
.danmu-enter-to {
  transform: translateX(-100%);
}
</style>

基于 Canvas 的高性能弹幕

对于大量弹幕的场景，使用 Canvas 渲染性能更高，适合高并发的弹幕需求。

<template>
  <canvas ref="canvas" width="800" height="200"></canvas>
</template>

<script>
export default {
  data() {
    return {
      danmuList: [],
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00'],
      ctx: null,
      animationId: null
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.renderDanmu();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    addDanmu(text) {
      const y = Math.floor(Math.random() * 180);
      const color = this.colors[Math.floor(Math.random() * this.colors.length)];
      this.danmuList.push({
        text,
        x: 800,
        y,
        color,
        speed: 2 + Math.random() * 3
      });
    },
    renderDanmu() {
      this.ctx.clearRect(0, 0, 800, 200);

      this.danmuList.forEach((item, index) => {
        item.x -= item.speed;
        this.ctx.fillStyle = item.color;
        this.ctx.fillText(item.text, item.x, item.y);
      });

      this.danmuList = this.danmuList.filter(item => item.x > -100);
      this.animationId = requestAnimationFrame(this.renderDanmu);
    }
  }
};
</script>

弹幕功能扩展

• 弹幕速度控制：通过调整 speed 属性实现不同弹幕的移动速度差异。
• 弹幕防遮挡：动态计算弹幕位置，避免重叠。
• 弹幕互动：监听点击事件，支持点击弹幕触发特定行为。

以上方法可根据实际需求选择，CSS 动画适合简单场景，Canvas 适合高性能需求。