😀一个原生js弹幕

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%) }
    }
  • 弹幕防重叠原理
  • 原理图screen.pngimage.png
  • 另外一点需要注意的:我在项目里从接口里读出来数据每页20条,每隔 1s 去发一条弹幕(用 setTimeout),这时有个问题,当页面休眠休眠时,会出现setTimeout堆积的情况,解决办法:用 requestAnimationFrame替代 setTimeout
阅读 1k

推荐阅读
大桔子
用户专栏

在2017年成为一名合格的前端攻城狮狮狮

15 人关注
22 篇文章
专栏主页