vue实现发送弹幕

Vue 实现发送弹幕功能

创建弹幕组件

在 Vue 项目中创建一个弹幕组件 Danmu.vue，用于显示和管理弹幕。组件包含弹幕容器和发送弹幕的表单。

<template>
  <div class="danmu-container">
    <div class="danmu-display" ref="danmuDisplay">
      <div
        v-for="(danmu, index) in danmuList"
        :key="index"
        class="danmu-item"
        :style="{
          top: `${danmu.top}px`,
          color: danmu.color,
          fontSize: `${danmu.size}px`,
        }"
      >
        {{ danmu.text }}
      </div>
    </div>
    <div class="danmu-input">
      <input v-model="inputText" placeholder="输入弹幕内容" />
      <button @click="sendDanmu">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      danmuList: [],
      colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"],
    };
  },
  methods: {
    sendDanmu() {
      if (!this.inputText.trim()) return;
      const danmu = {
        text: this.inputText,
        top: Math.random() * 200,
        color: this.colors[Math.floor(Math.random() * this.colors.length)],
        size: Math.floor(Math.random() * 10 + 14),
      };
      this.danmuList.push(danmu);
      this.inputText = "";
      setTimeout(() => {
        this.danmuList.shift();
      }, 5000);
    },
  },
};
</script>

<style>
.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.danmu-display {
  position: relative;
  width: 100%;
  height: 100%;
}
.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move 10s linear;
}
@keyframes move {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.danmu-input {
  margin-top: 10px;
}
</style>

使用弹幕组件

在父组件中引入并使用弹幕组件，确保弹幕功能可以正常工作。

<template>
  <div>
    <Danmu />
  </div>
</template>

<script>
import Danmu from "./Danmu.vue";
export default {
  components: {
    Danmu,
  },
};
</script>

弹幕动画优化

通过 CSS 动画控制弹幕的移动速度和方向，确保弹幕从右向左平滑移动。

.danmu-item {
  animation: move 10s linear;
}
@keyframes move {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

弹幕随机样式

为弹幕添加随机颜色、大小和垂直位置，增强视觉效果。

const danmu = {
  text: this.inputText,
  top: Math.random() * 200,
  color: this.colors[Math.floor(Math.random() * this.colors.length)],
  size: Math.floor(Math.random() * 10 + 14),
};

弹幕自动清理

设置定时器自动清理过期的弹幕，防止弹幕列表无限增长。

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