BulletJs

😀一个原生js弹幕库，基于 CSS3 Animation

• segmentFault文章地址
• 项目地址
• 本项目灵感来源于 rc-bullets
• 演示页面 https://hugeorange.github.io/gh-pages/bullets/index
• 演示图

更新日志

2021-01-22更新

• 全局增加isAllPaused标志，当全部暂停后不会再有push或是render，resume 之后即可恢复
• 问题：切记：不可覆盖内部样式类 bullet-item-style否则可能会出现弹幕重叠问题
• 增加演示页面

2020-08-24更新

• 源码采用ts书写，增加 .d.ts 文件
• 采用rollup打包并发布到npm，rollup打包教程
• 去除靠IntersectionObserver来对弹道进行调度，采用新的弹道选择算法，增加防重叠检测
• 支持同速/不同速弹幕
• 默认情况下直接丢弃排不上对的弹幕，不对其进行缓存，对于必定要上墙的弹幕在push时可以增加一个参数 this.screen.push(danmu, {}, true)(适用于用户自己发的弹幕，需要将第三个参数传为true)
• 变更名字，想想用拼音起名还是太low了😂😂😂

使用方式

1. 直接cdn引入

   // 示例代码: https://github.com/hugeorange/BulletJs/blob/master/src/index.html
   <script src="https://unpkg.com/[email protected]/dist/BulletJs.min.js"></script>
   <script>
   const screen = new BulletJs('.screen', { 
                     trackHeight: 35 
                   });
   </script>
   

2. ESModule 引入

   yarn add js-bullets
   
   // react
   import BulletJs from "js-bullets";
   
   componentDidMount() {
       this.screen = new BulletJs("#danmu-screen", {})
   
       setInterval(() => {
           this.screen.push('<span>12222222</span>')
       }, 1000)
   }
   

3. 简单粗暴的办法直接拷贝comps目录下的代码到你的项目中使用，vue、react项目均可

• 项目产生原因：
  • 因为rc-bullets 是基于 React，可能很多使用其他框架的同学没法使用
  • 新增了 speed 参数，让所有弹幕以相同速度运动（自己项目的需要）
  • 在animationEnd的时候增加了轨道置空处理
  • 对 queues 队列的处理方式不同
  • 弹幕格式 dom 字符串
  • 去掉了一些自己项目用不到的 api

API

option：

• 暂停弹幕：screen.pause([<bulletId>])，无参则暂停全部
• 弹幕继续：screen.resume([<bulletId>])，无参则继续全部

注意事项

• 弹幕原理：利用 css3 animation 关键帧动画, 从左移动到右，duration 控制速度

  @keyframe name {
      from { transform: translateX(width px) }
      to { transform: translateX(-100%) }
  }
  

• 弹幕防重叠原理

• 另外一点需要注意的：我在项目里从接口里读出来数据每页20条，每隔 1s 去发一条弹幕（用 setTimeout），这时有个问题，当页面休眠休眠时，会出现setTimeout堆积的情况，解决办法：用 requestAnimationFrame替代 setTimeout