In der Vergangenheit habe ich auf einer mobilen Lotterieseite, die zum Anzeigen eines Sperrkarussells erforderlich ist, einige Fallstricke durchlaufen. Jetzt werde ich zusammenfassen, wie man den Front-End-Sperreffekt erzielt.
Schauen wir uns zunächst an, wie man den einfachsten Barrage über CSS implementiert:
Definieren Sie zunächst die Dom-Struktur eines Barrages in HTML:
<div class=block>Ich bin Danmaku</div>
Die Bewegung des Sperrfeuers kann durch Verschieben dieses Blocks erreicht werden. Wenn sich das Sperrfeuer beispielsweise von rechts nach links bewegt, befindet sich die Ausgangsposition des Sperrfeuers auf der äußersten linken Seite des Containers und der Rand ist verdeckt (die äußerste linke Seite des Behälters). (Anpassung) kann durch absolute Positionierung und Transformation erreicht werden:
.block{ Position:absolute;}Ausgangsposition:
from{ left:100%; transform:translateX(0)}Die Endposition der Bewegung ganz nach links ist (die äußerste rechte Seite des Staudamms ist mit der äußersten linken Seite des Containers ausgerichtet):
to{ left:0; transform:translateX(-100%)}Die spezifischen Abbildungen der Startposition und Endposition sind wie folgt:
Basierend auf der Start- und Endposition kann eine vollständige Sperranimation mit zwei Frames definiert werden:
@keyframes barrage{ from{ left:translateX(0); } to{ left:0;Stellen Sie diese Animation dem Sperrfeuerelement vor:
.block{ position:absolute; /* anderer Dekorationsstil */ animation:barrage 5s linear 0s;}Auf diese Weise kann eine Bettlerversion des Sperreffekts erreicht werden:
Lassen Sie uns zunächst den Rendering-Prozess von CSS klären
I) Generieren Sie einen DOM-Baum basierend auf der Struktur von HTML (der DOM-Baum enthält display:none-Knoten). II) Generieren Sie basierend auf dem DOM-Baum einen Renderbaum basierend auf den geometrischen Attributen der Knoten (Rand/Abstand/Breite/Höhe). /left usw.) III) Renderattribute wie Farbe und Schriftart weiterhin basierend auf dem Renderbaum rendern
Wenn sich die Eigenschaften in I) und II) ändern, erfolgt ein Reflow. Wenn sich nur die Eigenschaften in III) ändern, erfolgt nur ein Neulackieren. 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, muss der Prozess neu erstellt werden. Repaint (Neuzeichnen): Wenn sich einige Attribute des Elements ändern, z. B. das Erscheinungsbild und die Hintergrundfarbe , es wird nicht dazu führen, dass das Layout aufgrund von Änderungen erneut gerendert wird, was als Neuzeichnen bezeichnet wird
Reflow wirkt sich auf die Rendergeschwindigkeit von Browser-CSS aus. Daher ist es bei der Optimierung der Webseitenleistung erforderlich, das Auftreten von Reflow zu reduzieren.
Im ersten Abschnitt haben wir das linke Attribut verwendet, um den Effekt von Barrage zu erzielen. Left ändert das Layout des Elements, sodass ein Reflow auftritt, der dazu führt, dass die Barrage-Animation auf der mobilen Seite einfriert.
2. Optimierung der CSS3-SperrleistungWir haben festgestellt, dass die Sperranimation im ersten Abschnitt ein Problem aufweist. Sehen wir uns an, wie wir die blockierte Animation lösen können.
(1) CSS aktiviert die HardwarebeschleunigungVerwenden Sie CSS, um die Hardwarebeschleunigung im Browser zu aktivieren, und nutzen Sie die 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 ermöglichen 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 (Attribut „translate3d“). Aus diesem Grund ändern wir die Animation wie folgt:
@keyframes barrage{ from{ left:translate3d(0,0,0); } to{ left:0;translate3d(-100%,0,0 }}Auf diese Weise können Sie die Webseitenleistung optimieren, indem Sie die Hardwarebeschleunigung aktivieren. 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)Ändern Sie das linke Attribut nicht
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 auftritt.
Wir möchten die Anfangsposition des Sperrknotens nur über TranslateX bestimmen, aber TranslateX (-100%) bezieht sich auf den Sperrknoten selbst und nicht auf das übergeordnete Element. Daher koppeln wir js und css, um die Sperrbreite in js zu erhalten des übergeordneten Elements, in dem sich der Knoten befindet, und dann wird die Anfangsposition des Sperrknotens basierend auf der Breite definiert.
Nehmen wir zum Beispiel, wenn das übergeordnete Element body ist:
//css .block{ position:absolute; left:0; sichtbarkeit:hidden; /* other decor style */ animation:barrage 5s linear 0s;}//jslet style = document.createElement('style');document.head .appendChild(style);let width = window.innerWidth;let from = `from { sichtbarkeit: sichtbar -webkit-transform: TranslateX(${width}px); }`;let to = `to { Visibility: sichtbar; -webkit-transform: translatorX(-100%);style.sheet.insertRule(@-webkit-keyframes barrage { ${from} ${to} }`, 0);Zusätzlich zur Kopplung von js zur Berechnung der Breite des übergeordneten Elements zur Bestimmung der Anfangsposition des Sperrknotens haben wir das Attribut „visibility:hidden“ hinzugefügt, um zu verhindern, dass die Anfangsposition im Sperrknoten angezeigt wird. 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.
Allerdings ist diese CSS-Implementierungsmethode schwieriger, wenn es darum geht, die erweiterten Funktionen von Barrage zu realisieren, z. B. die Steuerung der Barrage-Pause usw.
3. Canvas setzt Sperrfeuer einZusätzlich zur Methode zur Implementierung von Sperrfeuern über CSS kann Sperrfeuer auch über Leinwand realisiert werden.
Das Prinzip der Implementierung von Barrage durch Canvas besteht darin, den Text von Zeit zu Zeit neu zu zeichnen. Lassen Sie uns dies Schritt für Schritt implementieren.
Holen Sie sich Leinwand
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d');Text zeichnen
ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = '#000000';
Der obige fillText ist die Haupt-API zum Erzielen des Sperreffekts, wobei x die horizontale Koordinate und y die vertikale Koordinate darstellt. Solange x und y von Zeit zu Zeit geändert und neu gezeichnet werden, kann der dynamische Sperreffekt erzielt werden. Code kopieren
Klarer Zeicheninhalt
ctx.clearRect(0, 0, Breite, Höhe);Konkrete Umsetzung
Durch den Timer werden x, y regelmäßig geändert. Vor jeder Änderung wird der Bildschirm zuerst gelöscht und dann basierend auf den geänderten x, y neu gezeichnet. Wenn es mehrere Staustufen gibt, definieren Sie Folgendes:
let colorArr=_this.getColor(color); Das Farbarray, das dem Barrage-Array entspricht. let numArrL=_this.getLeft(); Das X-Koordinaten-Positionsarray, das dem Barrage-Array entspricht. let numArrT=_this.getTop(); Das entsprechende Y-Koordinaten-Positionsarray let speedArr=_this.getSpeed(); Das Sperrfeuer-Bewegungsgeschwindigkeitsarray, das dem Sperrfeuer-Array entspricht
Die geplante Sperrfeuerfunktion für das Neuzeichnen ist:
_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]);Der erzielte Effekt ist:
Die Implementierung von Barrage über die Leinwand ist für erweiterte Funktionen wie das Anhalten des Barrage-Scrollens sehr praktisch. Darüber hinaus können Sie auch Avatare zu Barrage hinzufügen, Rahmen zu jedem Barrage hinzufügen und andere Funktionen, die später hinzugefügt werden.
Geben Sie abschließend eine einfache React Barrage-Komponente an: https://github.com/forthealllight/react-barrage
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.