1.业务场景
在工作上需要实现一个类似b站的弹幕组件，主要的功能开发点如下：
- 弹幕不发生重叠（最基本的要求）
- 轨道数控制
- 轨道间距控制
- 速度均匀，且足够密集
- 单个弹幕可以定义样式
2.设计思路
其实弹幕的实现方法还是有蛮多种的，你可以用定时器 + transform实现从右向左的动画效果或者直接使用绝对定位 + 动画，这两种也是我一开始考虑的方案，于是我动手实现了一个初步的版本，代码如下 但是这个版本存在一个很大的问题，当数据足够大或者说运行时间足够长时，弹幕会不可避免的发生重叠，这是因为我采用的是动画 + 延时显示的方案，然后单个弹幕采用的是绝对定位，然后因为弹幕长度的不同以及延时不够细致化，时间一长就会导致重叠的问题，如果是用弹幕作为一个动画单位的话，这个是不可避免的问题，要修改的话，讲真，挺难搞的。
在同事的启发下，我把重心放到的轨道上，用一个轨道作为一个动画单位，然后让轨道执行从右向左的动画，然后让轨道内的弹幕使用flex布局，我一听这个思路瞬间打开了！这样就能永远避免重叠的问题，而且还能在一定基础上对弹幕进行自定义，理论存在，实践开始
3.最终版本
我在之前的版本中先通过轨道的长度以及当时弹幕的时间，求取了一个比较合适的速率， 单位px/s，然后就可以用这个速率来控制各种长度的弹幕数组，用轨道作为动画单位，先把数据渲染两遍得到一个足够长的轨道，然后控制动画走到左侧-50%的时候就回到原点，这样类似轮播的效果可以实现无缝衔接，代码如下
