jb

js-bullets

👨‍💻‍一个原生js弹幕库

Showing:

Popularity

Downloads/wk

32

GitHub Stars

33

Maintenance

Last Commit

4mos ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

2.2KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

BulletJs

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

更新日志

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/js-bullets@latest/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

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100