😀一个原生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 轨道高度 string 50px 均分轨道的高度
onStart 自定义动画开始函数 function null 开始开始回调
onEnd 自定义动画结束函数 function null 弹幕运动结束回调
pauseOnClick 鼠标点击暂停 boolean false 再次点击继续
pauseOnHover 鼠标悬停暂停 boolean true 鼠标进入暂停,离开继续
loopCount 循环次数 number/string 1 animation-loop
duration 滚动时长 number/string 10 传入speed该参数无效
speed 滚动速度 number 100 100px/s
isCustomeQueue 是否需要自动消费queues boolean false 见下面注意事项
delay 延迟 number/string 0 animation-delay
direction 动画方向 string normal animation-direction
animateTimeFun 动画函数 string linear:匀速 animation-timing-function
  • 暂停弹幕:screen.pause([<bulletId>]),无参则暂停全部
  • 弹幕继续:screen.resume([<bulletId>]),无参则继续全部

使用

  • 示例代码
  • 使用方式:直接将 ./src/comps/src copy 到你的项目内即可使用
...
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汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

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

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

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

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

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

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

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

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

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

    前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Github,欢迎 Star,一起接水💧 作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无...

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

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

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

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

    3 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

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

    参考《官方》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 ...

    1 年前

官方社区

扫码加入 JavaScript 社区