前端算法之弹幕设计

大家都说前端写页面较多，几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用，我们先来看下实现效果：

图1.1 弹幕效果

 

开场之前我们先来描述弹幕开发的难度，再集中精力描述算法设计的思路。

* 如何保证不同字号的弹幕不碰撞
* 弹幕的位置计算
* 弹幕的速度控制及动画实现
* 弹幕与视频的同步

***如何保证不同字号的弹幕不碰撞***

如果弹幕采用相同的字号，碰撞的问题处理起来比较简单，只要考虑相邻弹幕的播放速度和偏移的位置就可以计算出来。然而使用不同字号的弹幕处理起来就麻烦了许多，弹幕的起始位置不可以线性的增加，比如第一行放了字幕，接下来的字幕可以按顺序从上至下依次放置即可。

***弹幕的位置计算***

只有设计好弹幕的初始位置，才可以动态、高效的管理不同字号弹幕的碰撞问题。打个比方，我们通过接口获取了2秒之内的弹幕数据1000条，每个字幕的长度、速度、字号都不同，怎么管理这些弹幕，示意图如下：

图2.1 弹幕管理示意图

 

这是第一种情况，按照从上到啊的顺序依次摆放以后会有几个问题：
1. 弹幕五、六、七该怎么计算位置，按top值循环取模+累加吗？
2. 当弹幕一或者弹幕三足够长的时候，如何准时的跳过当前位置计算？
3. 当前屏幕的弹幕播放结束，如何再计算的时候利用空出来的位置
4. 空