圖1.1 彈幕效果

開場(chǎng)之前我們先來(lái)描述彈幕開發(fā)的難度，再集中精力描述算法設(shè)計(jì)的思路。

* 如何保證不同字號(hào)的彈幕不碰撞
* 彈幕的位置計(jì)算
* 彈幕的速度控制及動(dòng)畫實(shí)現(xiàn)
* 彈幕與視頻的同步

***如何保證不同字號(hào)的彈幕不碰撞***

如果彈幕采用相同的字號(hào)，碰撞的問(wèn)題處理起來(lái)比較簡(jiǎn)單，只要考慮相鄰彈幕的播放速度和偏移的位置就可以計(jì)算出來(lái)。然而使用不同字號(hào)的彈幕處理起來(lái)就麻煩了許多，彈幕的起始位置不可以線性的增加，比如第一行放了字幕，接下來(lái)的字幕可以按順序從上至下依次放置即可。

***彈幕的位置計(jì)算***

只有設(shè)計(jì)好彈幕的初始位置，才可以動(dòng)態(tài)、的管理不同字號(hào)彈幕的碰撞問(wèn)題。打個(gè)比方，我們通過(guò)接口獲取了2秒之內(nèi)的彈幕數(shù)據(jù)1000條，每個(gè)字幕的長(zhǎng)度、速度、字號(hào)都不同，怎么管理這些彈幕，示意圖如下：

圖2.1 彈幕管理示意圖

這是第一種情況，按照從上到啊的順序依次擺放以后會(huì)有幾個(gè)問(wèn)題：
1. 彈幕五、六、七該怎么計(jì)算位置，按top值循環(huán)取模+累加嗎？
2. 當(dāng)彈幕一或者彈幕三足夠長(zhǎng)的時(shí)候，如何準(zhǔn)時(shí)的跳過(guò)當(dāng)前位置計(jì)算？
3. 當(dāng)前屏幕的彈幕播放結(jié)束，如何再計(jì)算的時(shí)候利用空出來(lái)的位置
4. 空出的位置是否滿足當(dāng)前彈幕的高度
5. ……

一系列問(wèn)題就不統(tǒng)統(tǒng)列舉出來(lái)了，基于這個(gè)背景我們結(jié)合數(shù)學(xué)建模的思維方式，找到了彈幕場(chǎng)景相似度非常高的機(jī)場(chǎng)運(yùn)營(yíng)。我們可以把彈幕當(dāng)做飛機(jī)，每個(gè)時(shí)間段播放多少?gòu)椖缓蜋C(jī)場(chǎng)每個(gè)時(shí)間段放飛多少飛機(jī)一個(gè)道理。

首都國(guó)際機(jī)場(chǎng)一共有3條跑道，兩條4E級(jí)跑道、一條4F級(jí)跑道，2016年的吞吐量為9000萬(wàn)人次。它的運(yùn)行機(jī)制就是所有飛機(jī)通過(guò)搭臺(tái)有順序的共用3條跑道來(lái)完成運(yùn)輸任務(wù)的。

同理，我們也設(shè)計(jì)了幾個(gè)個(gè)角色：一個(gè)是軌道(跑道)、一個(gè)是調(diào)度(塔臺(tái))、一個(gè)是彈幕(飛機(jī))，我們?yōu)槊總€(gè)角色設(shè)計(jì)一個(gè)類分為為Track、Main、Bullet。

* 軌道
            
       軌道這個(gè)角色很重要，它可以解決彈幕位置計(jì)算、速度控制、碰撞檢測(cè)問(wèn)題。
       首先，我們要來(lái)初始化軌道。通俗的說(shuō)我們要修建幾個(gè)跑道呢，我們不是實(shí)物，可以動(dòng)態(tài)調(diào)整軌道的                        數(shù)量，計(jì)算的原則：
        軌道數(shù)量 = 播放器有效高度 / 設(shè)備基準(zhǔn)字號(hào)
    * 播放器有效高度：播放器的實(shí)際高度減去控制條的高度，因?yàn)閺椖徊豢梢哉趽蹩刂茥l。
    * 設(shè)備基準(zhǔn)字號(hào)：移動(dòng)端是10px，pc端是12px；
        為啥計(jì)算公式是這樣的？因?yàn)槲覀円С植煌痔?hào)的彈幕。試想不同的字號(hào)對(duì)物理空間的占用是不同的，然而如果要求軌道的尺寸是動(dòng)態(tài)的，那就帶來(lái)很復(fù)雜的計(jì)算。本文提出“虛擬軌道”的概念，在交通管制中最常見的就是道路合并或者改向。我們也是采用將相鄰的物理軌道臨時(shí)合并為一條軌道。這樣就可以輕松的解決不同字號(hào)的軌道占用問(wèn)題。原理圖如下：
        

圖2.2 軌道計(jì)算示意圖

其次我們來(lái)回憶下機(jī)場(chǎng)的工作流程：
1. 機(jī)長(zhǎng)呼叫塔臺(tái)，CZ6132請(qǐng)求起飛
    * 目前跑道均被占用，請(qǐng)等待
        * N時(shí)刻后再次執(zhí)行步驟1
    * 目前跑道 A1 空閑，準(zhǔn)許進(jìn)入
        * 執(zhí)行步驟3
2. 塔臺(tái)查看跑道使用情況
3. 進(jìn)入跑道，起飛完成
4. 機(jī)長(zhǎng)通知塔臺(tái)，本次起飛完成，釋放跑道的占用
5. 其他飛機(jī)同樣執(zhí)行上述步驟

按照這個(gè)思路，我們的彈幕工作流程：
    
1. 彈幕進(jìn)入播放器
2. 軌道根據(jù)彈幕的播放速度、尺寸計(jì)算是否有合適的軌道提供
    * 沒(méi)有
        * 通知彈幕尚無(wú)合適軌道提供，請(qǐng)等待；同時(shí)，彈幕隊(duì)列中的其他彈幕依次執(zhí)行步驟1
    * 有
        * 執(zhí)行步驟3
3. 播放器加載彈幕DOM，開始播放，待播放完成
4. 播放完成通知軌道更新軌道占用情況
5. 其他彈幕同樣執(zhí)行上述步驟

圖2.3 軌道可用性計(jì)算示意圖

關(guān)于軌道的基本原理我們整理清楚了，當(dāng)然還有不少細(xì)節(jié)比如如何和調(diào)度通信、如何和彈幕通信以及虛擬軌道檢測(cè)算法等。有興趣的同學(xué)可以參考代碼吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 彈幕
       彈幕基本是實(shí)現(xiàn)“飛機(jī)”的角色，我們要求它具有自身的屬性和方法。比如調(diào)度中心通過(guò)id能拿到它所有的基本信息，軌道控制也可以通過(guò)彈幕進(jìn)行檢查和更新。當(dāng)然彈幕也必須具備狀態(tài)自動(dòng)更新、移動(dòng)、播放結(jié)束通知、自動(dòng)銷毀等功能。
* 調(diào)度
        調(diào)度就是搭臺(tái)的化身，承接著軌道、彈幕的控制，也保持著與播放器的步調(diào)一致。它的職責(zé)如下：
    1. 播放器交互控制
    2. 彈幕隊(duì)列控制
    3. 自身狀態(tài)更新
    4. 數(shù)據(jù)格式轉(zhuǎn)換
    5. 動(dòng)畫執(zhí)行
        還是直接用流程圖來(lái)描述更直接些：
        
       

圖2.4 彈幕運(yùn)行機(jī)制流程圖

在彈幕啟動(dòng)之后，首先要檢查本地是否已有緩存數(shù)據(jù)，沒(méi)有的話直接請(qǐng)求數(shù)據(jù)并緩存，然后執(zhí)行數(shù)據(jù)讀取，首次過(guò)濾數(shù)據(jù)進(jìn)入彈幕隊(duì)列，同時(shí)啟動(dòng)定時(shí)器。彈幕隊(duì)列的數(shù)據(jù)會(huì)定期請(qǐng)求軌道，檢測(cè)隊(duì)列里的彈幕是否可以進(jìn)入，一旦確認(rèn)后軌道做好登記，彈幕就可以進(jìn)入播放器開啟動(dòng)畫播放了。定時(shí)器每隔2秒就會(huì)再次更新數(shù)據(jù)進(jìn)入到彈幕隊(duì)列（這塊不同的業(yè)務(wù)可以定制不同的規(guī)則）。彈幕播放結(jié)束后會(huì)通知調(diào)度和軌道，調(diào)度會(huì)在彈幕隊(duì)列中移除該彈幕實(shí)例，軌道也會(huì)移除該彈幕實(shí)例的軌道占用。

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)