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

greatwhole 發(fā)布于2019-08-30 15:54 / 2775人閱讀

摘要：之前在一個移動端的抽獎頁面中，在抽獎結果的展示窗口需要彈幕輪播顯示，之前踩過一些小坑，現(xiàn)在總結一下前端彈幕效果的實現(xiàn)方式。實現(xiàn)彈幕除了通過實現(xiàn)彈幕的方法之外，通過也可以實現(xiàn)彈幕。通過實現(xiàn)彈幕的原理就是時時的重繪文字，下面來一步步的實現(xiàn)。

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

css3實現(xiàn)乞丐版的彈幕
css3彈幕性能優(yōu)化
canvas實現(xiàn)彈幕
canva彈幕的擴展功能

本文原文地址在我的博客主頁：原文地址

1. css3實現(xiàn)乞丐版的彈幕 (1)如何通過css3實現(xiàn)彈幕

首先來看如何通過css的方法實現(xiàn)一個最簡單的彈幕：

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

我是彈幕

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

.block{
   position:absolute;
}

初始位置：

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

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

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

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

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

@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;
}

這樣就可以實現(xiàn)一個乞丐版的彈幕效果：

(2)通過絕對定位和left實現(xiàn)彈幕的缺陷

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

I）根據(jù)HTML的結構生成DOM樹（DOM樹中包含了display:none的節(jié)點）

II）在DOM樹的基礎上，根據(jù)節(jié)點的幾何屬性（margin/padding/width/height/left等）生成render樹

III）在render樹的基礎上繼續(xù)渲染color,font等屬性

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

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

reflow（回流）會影響瀏覽器css的渲染速度，因此在做網(wǎng)頁性能優(yōu)化的時候要減少回流的發(fā)生。

在第一節(jié)，我們通過left屬性，實現(xiàn)了彈幕的效果，left會改變元素的布局，因此會發(fā)生reflow(回流)，表現(xiàn)在移動端頁面上會造成彈幕動畫的卡頓。

2. css3彈幕性能優(yōu)化

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

(1)CSS開啟硬件加速

在瀏覽器中用css開啟硬件加速，使用GPU（Graphics Processing Unit）可以提升網(wǎng)頁性能。鑒于此，我們可以發(fā)揮GPU的力量，從而使我們的網(wǎng)站或應用表現(xiàn)的更為流暢。

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

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

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

這樣就可以通過開啟硬件加速的方式，優(yōu)化網(wǎng)頁性能。但是這種方式?jīng)]有從根本上解決問題，同時使用GPU增加了內(nèi)存的使用，會減少移動設備的電池壽命等等。

(2)不改變left屬性

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

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

以父元素為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計算了父元素的寬度，從而確定彈幕節(jié)點的初始位置之外，這里在彈幕節(jié)點中我們?yōu)榱朔乐钩跏嘉恢镁陀酗@示，增加了visibility:hidden屬性。防止彈幕節(jié)點在未確定初始位置時就顯示在父容器內(nèi)。只有彈幕開始從初始位置滾動，才會變得可見。

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

3. canvas實現(xiàn)彈幕

除了通過css實現(xiàn)彈幕的方法之外，通過canvas也可以實現(xiàn)彈幕。

通過canvas實現(xiàn)彈幕的原理就是時時的重繪文字，下面來一步步的實現(xiàn)。

獲取畫布

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

繪制文字

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

上面的fillText就是實現(xiàn)彈幕效果的主要api，其中x表示橫方向的坐標，y表示縱方向的坐標，只要時時的改變x，y進行重繪，就可以實現(xiàn)動態(tài)的彈幕效果。

清除繪制內(nèi)容

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

具體實現(xiàn)

通過定時器，定時改變x,y,每次改變之前先進性清屏，然后根據(jù)改變后的x,y進行重繪。當存在多條彈幕的情況下,定義：

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

定時的重繪彈幕函數(shù)為：

_this.timer=setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    for(let j=0;j
實現(xiàn)的效果為：

4. canva彈幕的擴展功能
通過canvas實現(xiàn)彈幕的方式，很方便做比如暫停彈幕滾動等擴展功能，此外，也可以給彈幕增加頭像，給每條彈幕增加邊框等等功能，以后再補充。
最后給一個簡單的react彈幕組件；https://github.com/forthealll...

GPU云服務器云服務器 js實現(xiàn)f11的效果互聯(lián)網(wǎng)專線的接入實現(xiàn)方式彈幕實現(xiàn) js css3 canvas

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116851.html

大前端 - 收藏集 - 掘金

摘要：是目前唯一一個支持同步調(diào)用的跨平臺年度上最多的個項目前端掘金年接近尾聲，在最近的幾篇文章中，會整理總結一些年度開源項目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本，免費供大家觀看... 2016 年 10 個最佳的 CodePen 作品 - 前端 - 掘金說到 CodePen，前端開發(fā)者們肯定不會陌生。如果說 Dribbble 是設計師們聚集的圣...

honhon 2019-08-20 17:03 評論0 收藏0
【小案例】基于色鍵技術的純客戶端實時蒙版彈幕

摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關特性進行定制。對于這種類型的圖像，我們可以使用色鍵的方式進行摳圖生成蒙版。其中，用于更新蒙版的接口為。導讀：本文內(nèi)容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關接口進行了解。各位童鞋如果經(jīng)常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 評論0 收藏0
Canvas + WebSocket + Redis 實現(xiàn)一個視頻彈幕

摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時需要注意的默認寬為，高為，我們要保證完全覆蓋整個視頻，需要讓與寬高相等。因為我們不確定每一個使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設置，而是通過在類創(chuàng)建實例初始化屬性的時候動態(tài)設置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文頁面布...

WelliJhon 2019-08-29 16:55 評論0 收藏0
Canvas + WebSocket + Redis 實現(xiàn)一個視頻彈幕

摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時需要注意的默認寬為，高為，我們要保證完全覆蓋整個視頻，需要讓與寬高相等。因為我們不確定每一個使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設置，而是通過在類創(chuàng)建實例初始化屬性的時候動態(tài)設置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文頁面布...

gekylin 2019-08-02 11:41 評論0 收藏0
Canvas + WebSocket + Redis 實現(xiàn)一個視頻彈幕

摘要：創(chuàng)建彈幕功能的類及基本參數(shù)處理布局時需要注意的默認寬為，高為，我們要保證完全覆蓋整個視頻，需要讓與寬高相等。因為我們不確定每一個使用該功能的視頻的寬高都是一樣的，所以畫布的寬高并沒有通過來設置，而是通過在類創(chuàng)建實例初始化屬性的時候動態(tài)設置。 showImg(https://segmentfault.com/img/remote/1460000018998386); 閱讀原文頁面布...

wangdai 2019-08-23 12:19 評論0 收藏0