前言

最近因項目需要，使用canvas做了一個簡單的彈幕插件，能滿足基本功能, 后期還需要不斷完善，有好的建議和想法歡迎提出。

為了做一個彈幕前期調研考察了頗久，首先列一下我需要的功能：

文字彈幕

新增彈幕可以根據跑道上已有彈幕長短自動選擇跑道

圖片彈幕

文字+表情

單條彈幕可以點擊暫停并進行操作，如點贊等(本次不需要實現，后續再考慮😳)

設置速度

經過調研目前有兩種彈幕實現方式：CSS3 Animation 和 Canvas，毋庸置疑，CSS3的彈幕更加靈活，后期處理單條暫停，點擊也更加簡單。但是性能不如canvas, 在經過一番抉擇之后，發現canvas也是可以實現單條控制的功能，那必然選擇性能更好的canvas以及requestAnimationFrame動畫。

彈幕中最難也是最核心的應該就是計算彈幕什么時機在哪個軌道出現。在實現之前需要深切理解之后再動手。

預覽效果：

正文

彈幕相關計算：

1，彈幕容器需要根據父級容器自適應寬高，并根據高度計算跑道數量，跑道高度這里通過傳入的字號大小進行計算。

2，每條跑道的top值，這里根據字號大小，padding-top, 以及上一個跑道的高度計算得到。

3，每條彈幕需要位移的距離，我們這里從第一條彈幕說起：

第一條彈幕的left為整個畫布的寬度+彈幕自身的寬度(自身寬度可由canvas的measureText方法計算得到)

之后每條彈幕的left則等于前一條彈幕的left+當前這條彈幕的寬度+兩條彈幕之間的間距。

4，彈幕每幀動畫移動的位移在這里等于速度，可在初始化彈幕插件時傳入。

彈幕執行邏輯：

1，初始化彈幕插件時會先根據父級容器計算彈幕容器高度寬度，然后創建畫布，

2，根據字體大小計算跑道數量，并計算每條跑道上的彈幕的top值(同一跑道的top值相同)。

3，開啟彈幕，此時requestAnimationFrame開始執行，并調用addTextMessages方法新增彈幕隊列。

4，每繪制完一條彈幕將其從隊列移除，直到隊列為空時停止執行。

總結

以上是生活随笔為你收集整理的android 带图片的弹幕,一个可以支持文本，图片，文本+表情的简单弹幕插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。