推广-Vue3.x实现弹幕功能

前言

弹幕功能在大伙刷视频、直播的时候肯定都有遇到过，可以让观看者之间有一个很好的互动效果。我想用在vue3.X里用这个功能但是没找到，就拿了2版本的改了下，在这推广推广，欢迎大家来用！！

使用介绍

安装

$ npm install vue3-barrage --save

导入

// main.ts
import vue3Barrage from 'vue3-barrage';
app.use(vue3Barrage);

案例

<template>
  <vue3-barrage ref="barrage" :lanesCount="6" :boxHeight="data.stageHeight" :isShow="data.barrageIsShow" :list="data.list" :loop="data.barrageLoop" :speed="data.speed" attachId="barrage" :fontSize="data.fontSize">
    <!-- 自定义弹幕样式 -->
    <template #barrage="list">
      <span style="color: #00099">{{ list.item.msg }}</span>
    </template>
  </vue3-barrage>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
type PositionStatus = 'normal' | 'top' | 'bottom';

interface BarrageList {
  msg: string | undefined;
  position: PositionStatus;
}

// 响应式数据
let data = reactive({
  barrageList: [] as Array<BarrageList>,
  msg: [
    '礼',
    '老子',
    '孔子云：',
    '何陋之有',
    '谈笑有鸿儒',
    '孔子云：何陋之有？',
    '山不在高，有仙则名',
    '予谓菊，花之隐逸者也',
    '无丝竹之乱耳，无案牍之劳形',
    'Hello! vue3-barrage 0.0.1',
    '崇祯五年十二月，余住西湖',
    '莫说相公痴，更有痴似相公者。',
    '先天下之忧而忧，后天下之乐而乐',
    '是进亦忧，退亦忧。然则何时而乐耶？',
    '居庙堂之高则忧其民，处江湖之远则忧其君。',
    '嗟夫！予尝求古仁人之心，或异二者之为，何哉？',
    '是日更定矣，余拏一小舟，拥毳衣炉火，独往湖心亭看雪',
    '惟长堤一痕、湖心亭一点、与余舟一芥、舟中人两三粒而已。',
    '醉翁之意不在酒，在乎山水之间也。山水之乐，得之心而寓之酒也。',
    '然而禽鸟知山林之乐，而不知人之乐；人知从太守游而乐，而不知太守之乐其乐也。',
  ],
  position: 'normal',
  fontSize: 12,
  stageHeight: 300,
  barrageIsShow: true,
  currentId: 0,
  barrageLoop: true,
  speed: 10
});
const addToList = () => {
  if (data.position === 'bottom') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'bottom',
      };
    });
    data.barrageList.push(...arr);
  } else if (data.position === 'top') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'top',
      };
    });
    data.barrageList.push(...arr);
  } else {
    const arr: Array<BarrageList> = Array.from({ length: 30 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'top',
      };
    });
    data.barrageList.push(...arr);
  }
};

</script>

属性

list属性

方法

插槽配置

<template>
  <vue-barrage ref="barrage" :lanesCount="6" :boxHeight="data.stageHeight" :isShow="data.barrageIsShow" :list="data.list" :loop="data.barrageLoop" :speed="data.speed" attachId="barrage" :fontSize="data.fontSize">
    <!-- 自定义弹幕样式 -->
    <!-- #barrage为聚名插槽，必须为这个，下面item也必须为item，其他自定义 -->
    <!-- item里自己加的东西就自己发挥了 -->
    <template #barrage="xxx">
      <span style="color: #00099">{{ xxx.item.msg }}</span>
    </template>
  </vue-barrage>
</template>

实现原理

看了几个2版本的源代码，基本都是使用css的animation属性实现动画的效果。
我使用的是requestAnimationFrame结合css transform属性实现动画的效果。requestAnimationFrame字面意思：请求动画帧。官方解释：帧动画。就是可以一帧一帧的执行动画。详细的介绍可以去这里看:全面了解requestAnimationFrame。

requestAnimationFrame实现帧刷新，然后配合方法修改transform参数从而达到移动的效果。固定的效果就固定transform参数不变，到时间了移除就实现了。

核心原理就这两句话，感兴趣的朋友去源码看下，原理简单，就是数据的处理写了一大堆。

缺点

还有不足的就是和时间的关联没实现，拿到弹幕列表，一股脑的全部显示就没了，不懂如何优雅的和时间关联，有idea的朋友欢迎评论告诉下，十分感谢！