😀一个原生js弹幕库

danmujs
😀一个原生js弹幕库,基于 CSS3 Animation
  • 地址核心代码
  • 本项目基于 rc-bullets,项目约70%的代码基于rc-bullets,首先要感谢这个项目的作者,如需学习请深入阅读 rc-bullets
  • 项目产生原因:

    • 因为rc-bullets是基于 React,可能很多使用其他框架的同学没法使用
    • 另一个原因对弹幕重叠检测有一些不同的看法
    • 新增了 speed参数,让所有弹幕以相同速度运动(自己项目的需要)
    • queues队列的处理方式不同
    • 弹幕格式 dom 字符串
    • 去掉了一些自己项目用不到的 api

API

  • 初始化弹幕屏幕:const screen = new Danmjs(<queryString>|<HTMLElement>,[<option>]),此处的option和下面的一致,偏向全局初始化,没有则使用默认值,每次发送弹幕不传则使用默认或全局设置,传了则该条弹幕覆盖全局设置。
  • 发送弹幕:screen.push(<dom字符串>,[<option>])

option

选项含义值类型默认值备注
trackHeight轨道高度string50px均分轨道的高度
onStart自定义动画开始函数functionnull开始开始回调
onEnd自定义动画结束函数functionnull弹幕运动结束回调
pauseOnClick鼠标点击暂停booleanfalse再次点击继续
pauseOnHover鼠标悬停暂停booleantrue鼠标进入暂停,离开继续
loopCount循环次数number/string1animation-loop
duration滚动时长number/string10传入speed该参数无效
speed滚动速度number100100px/s
isCustomeQueue是否需要自动消费queuesbooleanfalse见下面注意事项
delay延迟number/string0animation-delay
direction动画方向stringnormalanimation-direction
animateTimeFun动画函数stringlinear:匀速animation-timing-function
  • 暂停弹幕:screen.pause([<bulletId>]),无参则暂停全部
  • 弹幕继续:screen.resume([<bulletId>]),无参则继续全部

使用

  • 示例代码
  • 使用方式:直接将 ./src/comps/srccopy 到你的项目内即可使用
...
const screen = new Danmujs('#screen', {
    trackHeight: 35,
    speed: 80,
    pauseOnClick: true,
})

// 发送弹幕
handleSend = () => {
    const danmu = `<div style="border: 1px solid; padding: 5px;">我是一条弹幕哈哈哈😝</div>`
    screen.push(danmu)
}

...

注意事项

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

    @keyframe name {
        from { transform: translateX(width px) }
        to { transform: translateX(-100%) }
    }
  • 说注意事项之前先说一下该项目的弹幕防重叠原理
  • 每条轨道三种状态:idle/feed/running 分别如上图所示
    
    轨道初始状态为:idle
    
    当一条弹幕 push 到弹幕对列了,该条轨道变为 running
    
    利用 IntersectionObserver 当一条弹幕较短时并完全出现在舞台中,该条轨道变为 feed
    
    当弹幕运动完毕时触发 animationEnd 事件,将该条弹幕移除对列
      此时检查该轨道是否还有其他弹幕
      如没有:该条轨道置位 idle
      如有:检查该轨道内最后一条弹幕是否已经完全出现在屏幕中
          如完全出现该轨道置位 feed
          否则 仍为 running
  • !!!注意:代码中有个名为 queues对列是个实例属性,当短时间弹幕过多,没有轨道可以分配时,会把多余的弹幕放进该队列,对该队列里的内容提供两种处理方案

    • 其一:当下次出现空闲对列时优先使用 queues里面的内容(可能会出现重叠现象,我也没想到好的处理办法)
    • 其二:queues里的弹幕交给宿主来安排执行(因为宿主是触发弹幕的执行者,自然知道何时处理该弹幕较为何时;比如:我的场景,弹幕列表是从一个分页接口读出来的,当页执行完再去请求下一页的数据,在请求下一页数据的这个空档时间可以检查下 queues是否有东西,有则执行没有就算了)
    • 其三:直接丢弃 queues里的弹幕
  • 另外一点需要注意的:我在项目里从接口里读出来数据每页20条,每隔 1s 去发一条弹幕(用 setTimeout),这时有个问题,当页面休眠休眠时,会出现setTimeout堆积的情况,解决办法:用 requestAnimationFrame替代 setTimeout
原文链接:segmentfault.com

上一篇:@aimee-blue/ab-auth
下一篇:vue两个版本的浅析:vue.js和vue.runtime.js

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    2 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    3 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    1 个月前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    2 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的“类“究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​ 面向...

    3 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    4 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    3 个月前
  • (干货👍)从详细操作js数组到浅析v8中array.js

    前言 最近在写面试编程题,经常用到数组,经常想偷个懒,用它提供的方法,奈何还是对数组方法使用不熟练,导致写了很多的垃圾代码,很多地方稍加修改的话肯定变得简洁高效优雅👊 所以✍这篇文章本着了解一下Ja...

    8 天前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前

官方社区

扫码加入 JavaScript 社区