前端算法之弹幕设计

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

图1.1 弹幕效果

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

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

如何保证不一样字号的弹幕不碰撞

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

弹幕的位置计算

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

图2.1 弹幕管理示意图

这是第一种状况，按照从上到啊的顺序依次摆放之后会有几个问题：

1. 弹幕5、6、七该怎么计算位置，按top值循环取模+累加吗？
2. 当弹幕一或者弹幕三足够长的时候，如何准时的跳过当前位置计算？
3. 当前屏幕的弹幕播放结束，如何再计算的时候利用空出来的位置
4. 空出的位置是否知足当前弹幕的高度
5. ……

一系列问题就不通通列举出来了，基于这个背景咱们结合数学建模的思惟方式，找到了弹幕场景类似度很是高的机场运营。咱们能够把弹幕当作飞机，每一个时间段播放多少弹幕和机场每一个时间段放飞多少飞机一个道理。

首都国际机场一共有3条跑道，两条4E级跑道、一条4F级跑道，2016年的吞吐量为9000万人次。它的运行机制就是全部飞机经过搭台有顺序的共用3条跑道来完成运输任务的。

同理，咱们也设计了几个个角色：一个是轨道(跑道)、一个是调度(塔台)、一个是弹幕(飞机)，咱们为每一个角色设计一个类分为为Track、Main、Bullet。

• 轨道

  轨道这个角色很重要，它能够解决弹幕位置计算、速度控制、碰撞检测问题。
  首先，咱们要来初始化轨道。通俗的说咱们要修建几个跑道呢，咱们不是实物，能够动态调整轨道的 数量，计算的原则：

  轨道数量 = 播放器有效高度 / 设备基准字号

  • 播放器有效高度：播放器的实际高度减去控制条的高度，由于弹幕不能够遮挡控制条。

  • 设备基准字号：移动端是10px，pc端是12px；
    为啥计算公式是这样的？由于咱们要支持不一样字号的弹幕。试想不一样的字号对物理空间的占用是不一样的，然而若是要求轨道的尺寸是动态的，那就带来很复杂的计算。本文提出“虚拟轨道”的概念，在交通管制中最多见的就是道路合并或者改向。咱们也是采用将相邻的物理轨道临时合并为一条轨道。这样就能够轻松的解决不一样字号的轨道占用问题。原理图以下：
    

    图2.2 轨道计算示意图

其次咱们来回忆下机场的工做流程：

1. 机长呼叫塔台，CZ6132请求起飞

   • 目前跑道均被占用，请等待

     • N时刻后再次执行步骤1

   • 目前跑道 A1 空闲，准许进入

     • 执行步骤3
2. 塔台查看跑道使用状况
3. 进入跑道，起飞完成
4. 机长通知塔台，本次起飞完成，释放跑道的占用
5. 其余飞机一样执行上述步骤

按照这个思路，咱们的弹幕工做流程：

1. 弹幕进入播放器

2. 轨道根据弹幕的播放速度、尺寸计算是否有合适的轨道提供

   • 没有

     • 通知弹幕尚无合适轨道提供，请等待；同时，弹幕队列中的其余弹幕依次执行步骤1

   • 有

     • 执行步骤3
3. 播放器加载弹幕DOM，开始播放，待播放完成
4. 播放完成通知轨道更新轨道占用状况
5. 其余弹幕一样执行上述步骤

图2.3 轨道可用性计算示意图

关于轨道的基本原理咱们整理清楚了，固然还有很多细节好比如何和调度通讯、如何和弹幕通讯以及虚拟轨道检测算法等。有兴趣的同窗能够参考代码吧。https://github.com/bytedance/...

• 弹幕
  弹幕基本是实现“飞机”的角色，咱们要求它具备自身的属性和方法。好比调度中心经过id能拿到它全部的基本信息，轨道控制也能够经过弹幕进行检查和更新。固然弹幕也必须具有状态自动更新、移动、播放结束通知、自动销毁等功能。

• 调度

  调度就是搭台的化身，承接着轨道、弹幕的控制，也保持着与播放器的步调一致。它的职责以下：

  1. 播放器交互控制
  2. 弹幕队列控制
  3. 自身状态更新
  4. 数据格式转换
  5. 动画执行
     仍是直接用流程图来描述更直接些：

     

在弹幕启动以后，首先要检查本地是否已有缓存数据，没有的话直接请求数据并缓存，而后执行数据读取，首次过滤数据进入弹幕队列，同时启动定时器。弹幕队列的数据会按期请求轨道，检测队列里的弹幕是否能够进入，一旦确认后轨道作好登记，弹幕就能够进入播放器开启动画播放了。定时器每隔2秒就会再次更新数据进入到弹幕队列（这块不一样的业务能够定制不一样的规则）。弹幕播放结束后会通知调度和轨道，调度会在弹幕队列中移除该弹幕实例，轨道也会移除该弹幕实例的轨道占用。

全部代码实现来自带解析器、能节省流量的西瓜播放器, Github