實現彈幕效果的方法總結（css和canvas）

這篇文章主要介紹了關於實現彈幕效果的方法總結（css和canvas） ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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

css3實作乞丐版的彈幕

css3彈幕效能最佳化

canvas實作彈幕

canva彈幕的擴充功

#1. css3實作乞丐版的彈幕

(1)如何透過css3實作彈幕

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

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

<p>我是弹幕</p>

彈幕的移動可以透過移動這個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><p>实现的效果为：</p>
<p><span class="img-wrap"><img src="https://img.php.cn//upload/image/655/667/209/1532493329346452.gif" title="1532493329346452.gif" alt="實現彈幕效果的方法總結（css和canvas）"></span></p>
<h2>4. canva弹幕的扩展功能</h2>
<p>通过canvas实现弹幕的方式，很方便做比如暂停弹幕滚动等扩展功能，此外，也可以给弹幕增加头像，给每条弹幕增加边框等等功能，以后再补充。</p>
<p>相关推荐：</p>
<p><a href="http://www.php.cn/html5-tutorial-406922.html" target="_blank" title="H5微信支付之引入微信的js-sdk包失败的解决方法">H5微信支付之引入微信的js-sdk包失败的解决方法</a></p>
<p><a href="http://www.php.cn/html5-tutorial-406614.html" target="_blank" title="使用h5 canvas实现时钟的动态效果">使用h5 canvas实现时钟的动态效果</a></p>
<div></div></barragelist.length>

以上是實現彈幕效果的方法總結（css和canvas）的詳細內容。更多資訊請關注PHP中文網其他相關文章！