na-danmaku

Snail Danmaku

一个简洁的弹幕动画组件，不提供太多配置，只提供最基础的功能。

示例

<template>
  <div style="display: flex; flex-direction: column; align-items: center">
    <Danmaku
      ref="danma"
      :paused="paused"
      style="
        width: 600px;
        height: 450px;
        background-color: black;
        overflow: hidden;
      ">
      <template #="danmakuItem">
        <div
          @mouseenter="toggleItemPaused(danmakuItem)"
          @mouseleave="toggleItemPaused(danmakuItem)"
          style="cursor: pointer">
          {{ danmakuItem.text }}
        </div>
      </template>
    </Danmaku>
    <div class="danma-controls">
      <select v-model="danmaItem.type">
        <option value="move">move</option>
        <option value="top">top</option>
        <option value="bottom">bottom</option>
      </select>
      <input type="color" v-model="danmaItem.color" />
      <input v-model="danmaItem.text" />
      <button @click="draw">发送</button>
      <button @click="togglePaused">{{ paused ? "播放" : "暂停" }}</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Danmaku from "snail-danmaku";
import type { DanmakuItem } from "@/_interface";

const danma = ref<InstanceType<typeof Danmaku>>();

const paused = ref(false);
const togglePaused = () => {
  paused.value = !paused.value;
};
const toggleItemPaused = (da: DanmakuItem) => {
  if (!da.$el) return;
  if (da.$el.style.animationPlayState === "paused") {
    da.$el.style.animationPlayState = "running";
  } else {
    da.$el.style.animationPlayState = "paused";
  }
};

const danmaItem = ref<DanmakuItem>({
  text: "",
  type: "move",
  color: "#ffffff",
});
const draw = () => {
  const item = { ...danmaItem.value };
  danma.value?.draw([item]);
};
</script>