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

大桔子1223
4,164 阅读2分钟

BulletJs

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

版本已更新

2020-08-13更新

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

使用方式

  1. 直接cdn引入

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

  2. ESModule 引入

    yarn install 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：

选项含义值类型默认值备注
trackHeight轨道高度string50px均分轨道的高度
onStart自定义动画开始函数functionnull开始开始回调
onEnd自定义动画结束函数functionnull弹幕运动结束回调
pauseOnClick鼠标点击暂停booleanfalse再次点击继续
pauseOnHover鼠标悬停暂停booleantrue鼠标进入暂停，离开继续
duration滚动时长string10s传入speed该参数无效
speed滚动速度number100100px/snull
  • 暂停弹幕：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

avatar
文章
阅读
粉丝