不碰撞彈幕研究和實現

現在網路上有很多彈幕的實現代碼，主要分為以上兩類：

1.js或者jq

下載過幾個來看，它們無疑都存在這幾個特點。

要麼是划過一段彈幕後，中間間隔很長時間出現第二段彈幕，原因是為了控制不重疊；

要麼是都是按著順序來播放，所有的彈幕都有且只出現一次；

絕大多數都是通過改變絕對定位的top，left值來執行運動軌跡，無疑增大性能損耗；

都只是一個超簡單的小demo，只供參考，提供一下理解思路。

2.canvas畫布

這個方法網路上並不多，個人認為還是比上面那種好很多，重要的是它不是像上面js或者jq那樣是通過改變left的逐步遞減來操作的，而是在畫布上不斷重繪，減少了一些性能損耗，但還是有弊端的。

js方法可以對dom節點進行各種監聽，但canvas不行；

js方法可以控制不重疊，但不能真正實現重複無限循環，canvas可以控制重複循環，但不能實現不重疊。

我總結出來的也就這些，如果有異議的，我會虛心學習的~~~

接下來，我要說的是我自己在各位前輩的文獻上整理的一個關於「不碰撞重複循環彈幕」，顧名思義，你懂。

實現後的效果圖如下：

具體運用的技術：

彈幕從右邊滑到左邊，用到的是css3中的transform動畫，當然不是去改變translate3d的值，而是改變animation中的duration屬性，來控制每個彈幕的運行時間，以及animation中的delay來控制下一個彈幕出現的時間。

你有多少個彈幕，頁面element就幾個節點，不會特地去生成新的一批節點來循環，所有的順序都是無序的。

增加了「暫停」「開始」按鈕，為了在有些項目中，特別是我目前做的單頁面項目，作為切換其他路由時，能暫停住當前的彈幕，返回時，開啟彈幕，位置一直都沒改變，就是那種很自然的混合型app，很聽話的那種。

插件入口配置：

考慮到非同步獲取數據，增加了幾個配置，如圖所示，我們可以控制。

road_high彈幕的行高可固定可隨機，默認隨機；

road_per_runner每一行中彈幕最多的數量，意思是如果你設置20的話，你設置的越大，每條彈幕越密集，但是插件內部做了處理，它不管你設置的多大，他們都不會互相碰撞，只會按照他們自己的速度慢慢的滾完一條又一條；

duration速度如果設為1，超級快，簡直跟火箭一樣，不傳就默認插件本身設置的隨機；

click_call是一個回調函數，當你點擊了彈幕中的任何一條，它會返回element節點。

不碰撞彈幕-純JS實現鏈接

不碰撞彈幕-純JS實現

不碰撞彈幕-Vue單頁面實現鏈接

不碰撞彈幕-Vue組件實現