前端html如何實(shí)現(xiàn)彈幕效果

這篇文章給大家分享的是有關(guān)前端html如何實(shí)現(xiàn)彈幕效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

之前在一個(gè)移動(dòng)端的抽獎(jiǎng)頁(yè)面中，在抽獎(jiǎng)結(jié)果的展示窗口需要彈幕輪播顯示，之前踩過(guò)一些小坑，現(xiàn)在總結(jié)一下前端彈幕效果的實(shí)現(xiàn)方式。

• css3實(shí)現(xiàn)乞丐版的彈幕

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

• canvas實(shí)現(xiàn)彈幕

• canva彈幕的擴(kuò)展功能

1. css3實(shí)現(xiàn)乞丐版的彈幕

(1)如何通過(guò)css3實(shí)現(xiàn)彈幕

首先來(lái)看如何通過(guò)css的方法實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的彈幕：

首先在html中定義一條彈幕的dom結(jié)構(gòu)：

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

彈幕的移動(dòng)可以通過(guò)移動(dòng)這個(gè)block來(lái)實(shí)現(xiàn)，以從右向左移動(dòng)的彈幕為例，彈幕的初始位置在容器的最左側(cè)且貼邊隱藏（彈幕的最左邊與容器的最右貼合）,可以通過(guò)絕對(duì)定位加transform來(lái)實(shí)現(xiàn)：

.block{
   position:absolute;
}

初始位置：

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

移動(dòng)到最左邊的結(jié)束位置為（彈幕的最右邊與容器的最左邊貼合）：

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

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

根據(jù)起始位置和結(jié)束位置可以定義完整的兩幀彈幕動(dòng)畫(huà)：

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

給彈幕元素引入這個(gè)動(dòng)畫(huà)：

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

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

(2)通過(guò)絕對(duì)定位和left實(shí)現(xiàn)彈幕的缺陷

首先明確一下css的渲染過(guò)程

I）根據(jù)HTML的結(jié)構(gòu)生成DOM樹(shù)（DOM樹(shù)中包含了display:none的節(jié)點(diǎn)） II）在DOM樹(shù)的基礎(chǔ)上，根據(jù)節(jié)點(diǎn)的幾何屬性（margin/padding/width/height/left等）生成render樹(shù) III）在render樹(shù)的基礎(chǔ)上繼續(xù)渲染color,font等屬性

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

reflow(回流)：當(dāng)render樹(shù)中的一部分或者全部因?yàn)榇笮∵吘嗟葐?wèn)題發(fā)生改變而需要重建的過(guò)程叫做回流 repaint(重繪)：當(dāng)元素的一部分屬性發(fā)生變化，如外觀背景色不會(huì)引起布局變化而需要重新渲染的過(guò)程叫做重繪

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

在第一節(jié)，我們通過(guò)left屬性，實(shí)現(xiàn)了彈幕的效果，left會(huì)改變?cè)氐牟季郑虼藭?huì)發(fā)生reflow(回流)，表現(xiàn)在移動(dòng)端頁(yè)面上會(huì)造成彈幕動(dòng)畫(huà)的卡頓。

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

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

(1)CSS開(kāi)啟硬件加速

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

CSS animations, transforms 以及 transitions 不會(huì)自動(dòng)開(kāi)啟GPU加速，而是由瀏覽器的緩慢的軟件渲染引擎來(lái)執(zhí)行。那我們?cè)鯓硬趴梢郧袚Q到GPU模式呢，很多瀏覽器提供了某些觸發(fā)的CSS規(guī)則。

比較常見(jiàn)的方式是，我們可以通過(guò)3d變化（translate3d屬性）來(lái)開(kāi)啟硬件加速，鑒于此，我們修改動(dòng)畫(huà)為：

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

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

(2)不改變left屬性

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

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

以父元素為body時(shí)為例：

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

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

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

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

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

獲取畫(huà)布

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

繪制文字

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

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

清除繪制內(nèi)容

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

具體實(shí)現(xiàn)

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

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

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

_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);

實(shí)現(xiàn)的效果為：

4. canva彈幕的擴(kuò)展功能

通過(guò)canvas實(shí)現(xiàn)彈幕的方式，很方便做比如暫停彈幕滾動(dòng)等擴(kuò)展功能，此外，也可以給彈幕增加頭像，給每條彈幕增加邊框等等功能，以后再補(bǔ)充。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

感謝各位的閱讀！關(guān)于“前端html如何實(shí)現(xiàn)彈幕效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！