App下載

在html前端中怎么實現(xiàn)彈幕效果?實現(xiàn)彈幕效果的方法總結(jié)!

猿友 2021-07-14 17:08:47 瀏覽數(shù) (6678)
反饋

在平常使用電腦瀏覽網(wǎng)頁的時候我們都會碰到各種彈窗,那么今天我們就來說說有關(guān)于:“在html前端中怎么實現(xiàn)彈幕效果?”這個問題,下面是小編收集和整理的相關(guān)內(nèi)容,希望小編的分享可以幫助到大家。

現(xiàn)在我們來總結(jié)一下前端彈幕效果的實現(xiàn)方式:

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

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

(1)如何通過css3實現(xiàn)彈幕

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

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

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

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

.block{
   position:absolute;
}

初始位置:

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

移動到最左邊的結(jié)束位置為(彈幕的最右邊與容器的最左邊貼合):

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

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

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

@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的結(jié)構(gòu)生成DOM樹(DOM樹中包含了display:none的節(jié)點) II)在DOM樹的基礎(chǔ)上,根據(jù)節(jié)點的幾何屬性(margin/padding/width/height/left等)生成render樹 III)在render樹的基礎(chǔ)上繼續(xù)渲染color,font等屬性

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

reflow(回流):當(dāng)render樹中的一部分或者全部因為大小邊距等問題發(fā)生改變而需要重建的過程叫做回流 repaint(重繪):當(dāng)元素的一部分屬性發(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)站或應(yī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)存的使用,會減少移動設(shè)備的電池壽命等等。

(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)彈幕的擴(kuò)展功能方面比較麻煩,比如如何控制彈幕暫停等等。

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表示橫方向的坐標(biāo),y表示縱方向的坐標(biāo),只要時時的改變x,y進(jìn)行重繪,就可以實現(xiàn)動態(tài)的彈幕效果。復(fù)制代碼

清除繪制內(nèi)容

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

具體實現(xiàn)

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

let colorArr=_this.getColor(color);  彈幕數(shù)組多對應(yīng)的顏色數(shù)組
    let numArrL=_this.getLeft();  彈幕數(shù)組所對應(yīng)的x坐標(biāo)位置數(shù)組
    let numArrT=_this.getTop();  彈幕數(shù)組所對應(yīng)的y坐標(biāo)位置數(shù)組
    let speedArr=_this.getSpeed(); 彈幕數(shù)組所對應(yīng)的彈幕移動速度數(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);

實現(xiàn)的效果為:

 

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

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

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

以上就是有關(guān)于:“在html前端中怎么實現(xiàn)彈幕效果?”這個問題的相關(guān)內(nèi)容分享,對前端有感興趣的小伙伴們可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。 


0 人點贊