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

---

以前在一個移動端的抽獎頁面中，在抽獎結果的展現窗口須要彈幕輪播顯示，以前踩過一些小坑，如今總結一下前端彈幕效果的實現方式。

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

---

本文原文地址：原文地址

1. css3實現乞丐版的彈幕

(1)如何經過css3實現彈幕

首先來看如何經過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;
}
複製代碼

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

(2)經過絕對定位和left實現彈幕的缺陷

首先明確一下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(迴流)，表如今移動端頁面上會形成彈幕動畫的卡頓。

2. css3彈幕性能優化

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

(1)CSS開啓硬件加速

在瀏覽器中用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;
}
//js
let style = document.createElement('style');
document.head.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的實現方式，在實現彈幕的擴展功能方面比較麻煩，好比如何控制彈幕暫停等等。

3. canvas實現彈幕

除了經過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();  彈幕數組所對應的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);
複製代碼

實現的效果爲：

4. canva彈幕的擴展功能

經過canvas實現彈幕的方式，很方便作好比暫停彈幕滾動等擴展功能，此外，也能夠給彈幕增長頭像，給每條彈幕增長邊框等等功能，之後再補充。

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