前端實現彈幕效果的方法總結(包含css3和canvas的實作方式)

之前在一個行動端的抽獎頁面中，在抽獎結果的展示視窗需要彈幕輪播顯示，之前踩過一些小坑，現在總結一下前端彈幕效果的實現方式。

• css3實現乞丐版的彈幕
• css3彈幕效能優化
• canvas實現彈幕
• canva彈幕的擴充功能

首先來看如何透過css的方法實現一個最簡單的彈幕：

首先在html中定義一條彈幕的dom結構：

 <div class=block>我是彈幕</div>

彈幕的移動可以透過移動這個block來實現，以從右向左移動的彈幕為例，彈幕的初始位置在容器的最左側且貼邊隱藏（彈幕的最左邊與容器的最右貼合）,可以透過絕對定位加transform來實現：

 .block{ position:absolute;}

初始位置：

 from{ left:100%; transform:translateX(0)}

移動到最左邊的結束位置為（彈幕的最右邊與容器的最左邊貼合）：

 to{ left:0; transform:translateX(-100%)}

起始位置和結束位置的具體圖示如下所示：

根據起始位置和結束位置可以定義完整的兩幀彈幕動畫：

 @keyframes barrage{ from{ left:100%; transform:translateX(0); } to{ left:0; transform:translateX(-100%); }}

給彈幕元素引入這個動畫：

 .block{ position:absolute; /* other decorate style */ animation:barrage 5s linear 0s;}

這樣就可以實現一個乞丐版的彈幕效果：

首先明確一下css的渲染流程

I）根據HTML的結構產生DOM樹（DOM樹中包含了display:none的節點） II）在DOM樹的基礎上，根據節點的幾何屬性（margin/padding/width/height/left等）產生render樹III）在render樹的基礎上繼續渲染color,font等屬性

其中如果I）中和II）中的屬性發生變化會發生reflow(回流)，如果僅僅III）中的屬性發生改變，只會發生repaint（重繪）。顯然從css的渲染過程我們也可以看出來：reflow(回流）必伴隨著重繪。

reflow(回流)：當render樹中的一部分或全部因為大小邊距等問題改變而需要重建的過程叫做回流repaint(重繪)：當元素的一部分屬性發生變化，如外觀背景色不會引起佈局變化而需要重新渲染的過程叫做重繪

reflow（回流）會影響瀏覽器css的渲染速度，因此在做網頁效能優化的時候要減少回流的發生。

在第一節，我們透過left屬性，實現了彈幕的效果，left會改變元素的佈局，因此會發生reflow(回流)，表現在行動端頁面上會造成彈幕動畫的卡頓。

我們直到了第一節中的彈幕動畫存在卡頓的問題，下面我們來看看如何解決動畫的卡頓。

在瀏覽器中以css開啟硬體加速，使用GPU（Graphics Processing Unit）可以提升網頁效能。有鑑於此，我們可以發揮GPU的力量，從而使我們的網站或應用程式表現的更為流暢。

CSS animations, transforms 以及transitions 不會自動開啟GPU加速，而是由瀏覽器的緩慢的軟體渲染引擎來執行。那我們怎麼可以切換到GPU模式呢，很多瀏覽器提供了某些觸發的CSS規則。

比較常見的方式是，我們可以透過3d變化（translate3d屬性）來開啟硬體加速，有鑑於此，我們修改動畫為：

 @keyframes barrage{ from{ left:100%; transform:translate3d(0,0,0); } to{ left:0; transform:translate3d(-100%,0,0); }}

這樣就可以透過開啟硬體加速的方式，優化網頁效能。但這種方式沒有從根本解決問題，同時使用GPU增加了記憶體的使用，會減少行動裝置的電池壽命等等。

(2)不改變left屬性

第二種方法，就是想辦法在彈幕動畫的前後不改變left屬性的值，這樣就不會發生reflow。

我們想僅僅透過translateX來確定彈幕節點的初始位置，但是translateX(-100%)是相對於彈幕節點本身的，而不是相對於父元素，因此我們耦合js和css，在js中獲取彈幕節點所在的父元素的寬度，接著根據寬度定義彈幕節點的初始位置。

以父元素為body時為例：

 //css .block{ position:absolute; left:0; visibility:hidden; /* other decorate style */ animation:barrage 5s linear 0s;}//jslet style = document.createElement('style');documenthead. .appendChild(style);let width = window.innerWidth;let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;style .sheet.insertRule(`@-webkit-keyframes barrage { ${from} ${to} }`, 0);

除了耦合js計算了父元素的寬度，從而確定彈幕節點的初始位置之外，這裡在彈幕節點中我們為了防止初始位置就有顯示，增加了visibility:hidden屬性。防止彈幕節點在未確定初始位置時就顯示在父容器內。只有彈幕開始從初始位置滾動，才會變得可見。

但是這種css的實現方式，在實現彈幕的擴展功能方面比較麻煩，例如如何控制彈幕暫停等等。

除了透過css實現彈幕的方法之外，透過canvas也可以實現彈幕。

透過canvas實現彈幕的原理就是時時的重繪文字，下面來一步步的實現。

取得畫布

 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d');

繪製文字

 ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000'; ctx.fillText('canvas 繪製文字', x, y);

上面的fillText就是實現彈幕效果的主要api，其中x表示橫方向的座標，y表示縱方向的座標，只要時時的改變x，y進行重繪，就可以實現動態的彈幕效果。複製程式碼

清除繪製內容

 ctx.clearRect(0, 0, width, height);

透過定時器，定時改變x,y,每次改變之前先進性清屏，然後根據改變後的x,y進行重繪。當存在多個彈幕的情況下,定義：

 let colorArr=_this.getColor(color); 彈幕數組多對應的顏色數組let numArrL=_this.getLeft(); 彈幕數組所對應的x坐標位置數組 let numArrT=_this.getTop(); 彈幕數組所對應的x座標位置數組 let numArrT=_this.getTop();對應的y座標位置數組let speedArr=_this.getSpeed(); 彈幕數組所對應的彈幕移動速度數組

定時的重繪彈幕函數為：

 _this.timer=setInterval(function(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.save(); for(let j=0;j<barrageList.length;j++){ numArrL [j]-=speedArr[j]; ctx.fillStyle = colorArr[j] ctx.fillText(barrageList[j],numArrL[j],numArrT[j]); ctx.restore(); },16.7);

實現的效果為：

透過canvas實現彈幕的方式，很方便做例如暫停彈幕滾動等擴充功能，此外，也可以給彈幕增加頭像，給每條彈幕增加邊框等等功能，以後再補充。

最後給一個簡單的react彈幕組件；https://github.com/forthealllight/react-barrage

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。