前言

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

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

文字彈幕

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

圖片彈幕

文字+表情

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

設(shè)置速度

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

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

預(yù)覽效果：

正文

彈幕相關(guān)計算：

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

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

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

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

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

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

彈幕執(zhí)行邏輯：

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

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

3，開啟彈幕，此時requestAnimationFrame開始執(zhí)行，并調(diào)用addTextMessages方法新增彈幕隊列。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。