当前位置：首页 > VUE

vue实现弹幕功能

2026-01-18 17:15:10VUE

vue实现弹幕功能

基本思路

弹幕功能的核心在于动态生成并控制多条消息在屏幕上滚动显示。Vue的响应式特性和组件化开发方式非常适合实现这一功能。以下是实现弹幕功能的关键步骤。

创建弹幕组件

创建一个独立的弹幕组件，用于渲染每条弹幕消息。组件接收文本、颜色、速度等属性，并控制其动画效果。

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

<script>
export default {
  props: {
    text: String,
    color: {
      type: String,
      default: '#fff'
    },
    speed: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      left: '100%'
    }
  },
  computed: {
    styles() {
      return {
        color: this.color,
        left: this.left
      }
    }
  },
  mounted() {
    this.animate()
  },
  methods: {
    animate() {
      const duration = 10000 / this.speed
      this.left = '-100%'
      setTimeout(() => {
        this.$emit('end')
      }, duration)
    }
  }
}
</script>

<style scoped>
.danmu-item {
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
  transition: left linear;
}
</style>

弹幕容器组件

创建一个弹幕容器组件，负责管理所有弹幕消息的生成和销毁。该组件包含输入框用于发送新弹幕，并控制弹幕的显示区域。

<template>
  <div class="danmu-container">
    <div class="danmu-display" ref="display">
      <danmu-item
        v-for="(item, index) in items"
        :key="index"
        :text="item.text"
        :color="item.color"
        :speed="item.speed"
        @end="removeItem(index)"
      />
    </div>
    <div class="danmu-input">
      <input v-model="newDanmu" @keyup.enter="sendDanmu" />
      <button @click="sendDanmu">发送</button>
    </div>
  </div>
</template>

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

export default {
  components: {
    DanmuItem
  },
  data() {
    return {
      items: [],
      newDanmu: '',
      colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'],
      speeds: [3, 4, 5, 6, 7]
    }
  },
  methods: {
    sendDanmu() {
      if (!this.newDanmu.trim()) return

      this.items.push({
        text: this.newDanmu,
        color: this.colors[Math.floor(Math.random() * this.colors.length)],
        speed: this.speeds[Math.floor(Math.random() * this.speeds.length)]
      })
      this.newDanmu = ''
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

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

.danmu-display {
  position: relative;
  width: 100%;
  height: 100%;
}

.danmu-input {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  padding: 0 20px;
  box-sizing: border-box;
}

.danmu-input input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

.danmu-input button {
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

弹道控制

为了实现多条弹幕同时显示且不重叠，需要控制弹幕的发射轨道。可以通过计算弹幕位置和速度来实现。

// 在弹幕容器组件中添加
computed: {
  trackCount() {
    return Math.floor(this.$refs.display.clientHeight / 30)
  }
},
methods: {
  getRandomTrack() {
    return Math.floor(Math.random() * this.trackCount) * 30
  }
}

修改DanmuItem组件的样式计算属性：

computed: {
  styles() {
    return {
      color: this.color,
      left: this.left,
      top: `${this.$parent.getRandomTrack()}px`,
      transitionDuration: `${10000 / this.speed}ms`
    }
  }
}

性能优化

大量弹幕可能影响性能，可以采用虚拟滚动或对象池技术优化。

// 在弹幕容器组件中添加
watch: {
  items(newVal) {
    if (newVal.length > 50) {
      this.items = this.items.slice(-50)
    }
  }
}

高级功能扩展

添加弹幕屏蔽功能
实现弹幕悬停暂停
添加弹幕透明度渐变效果
支持图片弹幕

// 在DanmuItem组件中添加
<div 
  class="danmu-item" 
  :style="styles"
  @mouseenter="pause"
  @mouseleave="resume"
>
  {{ text }}
</div>

methods: {
  pause() {
    this.$el.style.transition = 'none'
    this.$el.style.left = getComputedStyle(this.$el).left
  },
  resume() {
    this.$el.style.transition = `left ${(10000 / this.speed) - this.elapsed}ms linear`
    this.$el.style.left = '-100%'
  }
}