Zusammenfassung der Methoden zur Erzielung eines Sperreffekts (CSS und Canvas)

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Methoden zur Erzielung des Sperreffekts vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen >Zuvor veröffentlicht in a Auf der Lotterieseite auf dem mobilen Endgerät muss das Anzeigefenster der Lotterieergebnisse in einem Sperrkarussell angezeigt werden. Ich habe bereits einige Fallstricke durchgemacht, und jetzt werde ich zusammenfassen, wie das Frontend erreicht wird Sperrwirkung.

CSS3 implementiert die Beggar-Version von Barrage

CSS3-Barrage-Leistungsoptimierung

Canvas implementiert Barrage

Erweiterte Funktionen von Canvas Barrage

1. Implementieren Sie die Bettlerversion von Barrage mit CSS3

(1) So implementieren Sie Barrage über CSS3

Schauen wir uns zunächst an, wie Sie die einfachste Barrage über CSS implementieren:

Definieren Sie zunächst die Dom-Struktur eines Barrages in HTML:

<p>我是弹幕</p>

Die Bewegung des Barrages kann durch Verschieben dieses Blocks erreicht werden, sodass sich das Barrage von rechts nach links bewegt. Zum Beispiel die Initiale Die Position der Sperre befindet sich auf der äußersten linken Seite des Containers und die Kante ist verdeckt (die äußerste linke Seite der Sperre passt auf die äußerste rechte Seite des Containers. Dies kann durch absolute Positionierung und Transformation erreicht werden:

.block{
   position:absolute;
}

Anfangsposition:

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

Die Endposition, wenn sie ganz nach links verschoben wird, ist (die äußerste rechte Seite des Staudamms passt auf die äußerste linke Seite des Containers):

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

Die spezifischen Abbildungen der Startposition und Endposition sind wie folgt dargestellt:

Eine vollständige Zwei-Frame-Sperrfeueranimation kann basierend auf der Startposition und Endposition definiert werden:

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

Gib die Bombe Das Bildschirmelement leitet diese Animation ein:

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

Auf diese Weise können Sie eine Bettlerversion des Sperreffekts erzielen:

(2) Bestandene Mängel der absoluten Positionierung und des linken Sperrfeuers

Lassen Sie uns zunächst den CSS-Rendering-Prozess klären

I) Generieren Sie ein DOM Baum basierend auf der Struktur von HTML (der DOM-Baum enthält den Knoten display :none)
II) Generieren Sie basierend auf dem DOM-Baum einen Renderbaum gemäß den geometrischen Attributen des Knotens ( Rand/Abstand/Breite/Höhe/links usw.)
III) Rendern Sie weiterhin Attribute wie Farbe und Schriftart basierend auf dem Renderbaum
Was passiert, wenn sich die Attribute in I) und II) beim Reflow (Reflow) ändern? Wenn sich nur die Eigenschaften in III) ändern, erfolgt nur ein Neuzeichnen (Neuzeichnen). Natürlich können wir auch am CSS-Rendering-Prozess erkennen: Reflow muss mit Neuzeichnen einhergehen.

Reflow (Reflow): Wenn sich ein Teil oder der gesamte Renderbaum aufgrund von Größe, Rand usw. ändert, wird der Prozess, der neu erstellt werden muss, als Reflow bezeichnet.

Repaint (Neuzeichnen): Wenn einige Attribute Wenn sich das Element ändert, führt die Hintergrundfarbe des Erscheinungsbilds nicht zu Layoutänderungen und muss erneut gerendert werden. Dies wird als Neuzeichnen bezeichnet.

Reflow (Reflow) wirkt sich auf die Rendering-Geschwindigkeit des Browser-CSS aus, also bei der Optimierung Um die Leistung einer Webseite zu verbessern, ist es notwendig, das Auftreten von Reflows zu reduzieren.

Im ersten Abschnitt haben wir das linke Attribut verwendet, um den Effekt von Barrage Left zu erzielen. Dadurch wird das Layout des Elements geändert, sodass ein Reflow auftritt, der dazu führt, dass die Barrage-Animation auf der mobilen Seite hängen bleibt .

2. CSS3-Sperrleistungsoptimierung

Wir haben herausgefunden, dass die Sperranimation im ersten Abschnitt ein Problem hat und blieb stehen.

(1) Aktivieren Sie die Hardwarebeschleunigung für CSS

Verwenden Sie CSS, um die Hardwarebeschleunigung im Browser zu aktivieren, und verwenden Sie GPU (Graphics Processing Unit), um die Webseitenleistung zu verbessern. Vor diesem Hintergrund können wir die Leistung der GPU nutzen, um die Leistung unserer Website oder Anwendung zu verbessern.

CSS-Animationen, Transformationen und Übergänge aktivieren nicht automatisch die GPU-Beschleunigung, sondern werden von der langsamen Software-Rendering-Engine des Browsers ausgeführt. Wie können wir also in den GPU-Modus wechseln? Viele Browser bieten bestimmte ausgelöste CSS-Regeln.

Der üblichere Weg ist, dass wir die Hardwarebeschleunigung durch 3D-Änderungen aktivieren können (translate3d-Attribut). In Anbetracht dessen ändern wir die Animation wie folgt:

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

Auf diese Weise können wir Aktivieren Sie die Hardwarebeschleunigung und optimieren Sie die Webseitenleistung. Diese Methode löst das Problem jedoch nicht grundsätzlich. Gleichzeitig erhöht die Verwendung der GPU die Speichernutzung, was die Akkulaufzeit des Mobilgeräts verkürzt und so weiter.

(2) Das linke Attribut nicht ändern

Die zweite Methode besteht darin, einen Weg zu finden, den Wert des linken Attributs vor und nach der Sperranimation nicht zu ändern, sodass kein Reflow erfolgt geschehen.

Wir wollen die Anfangsposition des Barrage-Knotens nur über TranslateX bestimmen, aber TranslateX(-100%) ist relativ zum Barrage-Knoten selbst, nicht zum übergeordneten Element, also koppeln wir js und css, Get Geben Sie die Breite des übergeordneten Elements an, in dem sich der Sperrknoten in js befindet, und definieren Sie dann die Anfangsposition des Sperrknotens basierend auf der Breite.

Nehmen Sie als Beispiel das übergeordnete Element als Körper:

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

Zusätzlich zur Kopplung von js wird die Breite des übergeordneten Elements berechnet, um die Anfangsposition des Sperrknotens zu bestimmen, hier im Staudamm Knoten wir Um zu verhindern, dass die Anfangsposition angezeigt wird, wird das Attribut „visibility:hidden“ hinzugefügt. Verhindern Sie, dass Sperrknoten im übergeordneten Container angezeigt werden, bevor die Anfangsposition bestimmt wird. Das Sperrfeuer wird erst sichtbar, wenn es von seiner Ausgangsposition aus zu scrollen beginnt.

但是这种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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/655/667/209/1532493329346452.gif" class="lazy" title="1532493329346452.gif" alt="Zusammenfassung der Methoden zur Erzielung eines Sperreffekts (CSS und Canvas)"></span></p>
<h2 id="canva弹幕的扩展功能">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>

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Erzielung eines Sperreffekts (CSS und Canvas). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!