弹幕模块学习记录

目录

资料：

第三方实现的弹幕：

内部弹幕组件：

弹幕组件分析：

学习后疑问汇总

思考：

---

资料：

PureComponent PureComponent使用方法_前端精髓的博客-CSDN博客_purecomponent

第三方实现的弹幕：

rc-bullets

1. 演示地址  GitHub - zerosoul/rc-bullets: 🌈基于CSS3 Animation，使用React构建的弹幕组件
2. github仓库 弹幕演示 - based on rc-bullets - created by Tristan
3. 文档地址 rc-bullets —— React 弹幕组件-低调大师

CommentCoreLibrary  ( 这个最牛逼 基本所有功能都能实现 )

1. github仓库 https://github.com/jabbany/CommentCoreLibrary
2. 演示地址： Debugger Sandbox For CommentCoreLibrary

Danmaku

1. github https://github.com/weizhenye/Danmaku
2. 演示地址 danmaku.js.org

内部弹幕组件：

1. 仓库：http://gitlab2.dui88.com/front-end/module/new_dom_component

弹幕组件分析：

shuffleArr:扑克牌打乱算法 展开源码

单向链表数据结构 展开源码

核心逻辑 展开源码

1、通过全量渲染弹幕，利用ref api 进行dom的收集和dom的头尾位置处理

2、通过requestAnimationFrame 递归调用，形成如帧动画类似，一个requestAnimationFrame 对应一个弹幕，设计如此，就无法实现并排 弹幕

工具库分析 展开源码

学习后疑问汇总

问题1：HBarrageHeight 设置容器高度(好像没有作用)

问题2：滚动中的项，没有hover没有停止动画的功能 ，如果心愿墙类似功能，就无法实现。

问题3：写法是直接进行全量弹幕渲染 render，这样弹幕数量很大的时候，会不会卡顿？然后在用requestAnimationFrame 每一个时间段只会有一个弹幕。

问题4：因为设计原因，每个弹幕都是有先后顺序的？没法实现很多弹幕一起并排出现的场景

思考：

1. 将屏幕设置的高度划分为相同高度的多条轨道。每条轨道的x,y范围就可以确定=》存为map，每条轨道设置一个数组，这样就解决了问题4 和问题3 同时还可实现问题2 
2. 有没有可能使用react-flip-toolkit 类似的库来处理dom