CSS3-Lösung für das Problem des Einfrierens auf Mobilgeräten (Optimierung der Animationsleistung)

1. Verwenden Sie CSS, jQuery und Canvas, um Animationen zu erstellen

1. Leinwand

Vorteile: gute Leistung, leistungsstark, unterstützt die meisten Browser (außer IE6, IE7, IE8), die gezeichneten Grafiken können direkt als .png- oder .jpg-Grafiken gespeichert werden;

Nachteile: Hängt von HTML ab, Grafiken können nur über Skripte gezeichnet werden, keine API zum Implementieren von Animationen (basiert auf Ereignissen und Timer-Updates); da der programmgesteuert auf der Leinwand angezeigte Text tatsächlich eine Bitmap ist, wird der Suchcrawler den Text vollständig ignorieren. Der Textinhalt ist zudem für Screenreader nicht lesbar.

2.css3

Vorteile: einfach und vom Inhalt getrennt, CSS-Animation löst kein Layout und keine Farbe aus; (Änderung dieser Eigenschaften löst kein Layout und keine Farbe aus: Rückseitensichtbarkeit, Opazität, Perspektive, Perspektivenursprung, Transformieren);

Nachteile: Es gibt Browserkompatibilitätsprobleme, Android-Telefone können einfrieren, es ist durch die Satz-Engine eingeschränkt und es hängt eng mit der DOM-Struktur der gesamten Seite zusammen.

3. JQuery

Vorteile: Keine Kompatibilitätsprobleme

Nachteile: Jeder Rahmen muss neu bemalt und neu zusammengesetzt werden (sehr zeitaufwändig);

Zusammenfassung: In Bezug auf mobile Animationseffekte ist die Verwendung von CSS3-Animationen viel effizienter als die Verwendung von jQuery-Animationen. Dies gilt insbesondere für Android-Telefone! Daher werden mobile Animationen gegenüber CSS3-Animationen priorisiert und jQuery kann nur zur einfachen Verarbeitung der Anwendungslogik verwendet werden. CSS3-Animation ist eine universelle Lösung, um dem Inhaltslayout Spezialeffekte hinzuzufügen. Allerdings kann sie durch die Layoutleistung in mobilen Browsern mit schlechter Leistung eingeschränkt sein und den gewünschten Effekt nicht erzielen. In bestimmten Szenarien, die eine hohe Leistung erfordern, wie etwa Spielen, lässt sich die Leistung durch die Verwendung von Canvas erheblich verbessern.

2. CSS3 hat ein Einfrierproblem auf Mobilgeräten

Die mit CSS3 erstellte Animation läuft auf iOS zu 66 %, auf Android kommt es jedoch manchmal zu Verzögerungen. Möglicherweise möchten Sie anhand der folgenden Punkte nach dem Problem suchen.

a. Ob es Layout verursacht
Wenn ja, machen Sie das Animationselement möglichst absolut oder fixiert, um eine Beeinträchtigung des Dokumentbaums zu vermeiden und den Neufluss zu reduzieren.

b. Ob die Hardwarebeschleunigung aktiviert werden soll
„CSS3-Animation verwenden“ und „Hardwarebeschleunigung aktivieren“ sind zwei verschiedene Dinge, obwohl Ersteres zu Letzterem führen kann.
Es gibt in WebKit ein Allheilmittel, um die Hardwarebeschleunigung zu aktivieren: Opazität: 1; oder -webkit-backface-visibility: hidden;.

c. Gibt es teure Attribute (CSS-Schatten, Farbverläufe, Hintergrundanhang: fest usw.)?
Sofern vorhanden, sind auch Bilder möglich. Dies kann als eine Optimierung des Austausches von Raum gegen Zeit angesehen werden.

d. Wenn der Neuanstrichbereich vorhanden ist, müssen Sie den Animationsbereich verkleinern. In diesem Schritt ist eine Optimierung nur begrenzt möglich.

e. Versuchen Sie, zum Generieren von Animationen Transform zu verwenden, und vermeiden Sie die Verwendung von Höhe, Breite, Rand, Polsterung usw.; siehe Beispiele 1 und 2 unten.

PS: Mit Transform muss der Browser das Bitmap dieses Elements nur einmal generieren und es beim Start der Animation zur Verarbeitung an die GPU übermitteln. Danach muss der Browser keine Layout-, Zeichen- oder Bitmap-Übermittlungsvorgänge mehr durchführen. Somit kann der Browser die GPU voll ausnutzen, um das Bitmap schnell an verschiedenen Positionen zu zeichnen und Drehungen oder Skalierungen durchzuführen. Kurz gesagt, die Transformationsanimation wird von der GPU gesteuert, unterstützt Hardwarebeschleunigung und erfordert kein Software-Rendering.

3. Während der Animation kommt es zu Flimmern (meist zu Beginn der Animation)

Lösung:

.Würfel {

   -webkit-backface-visibility: versteckt;

   -moz-backface-visibility: versteckt;

   -ms-backface-visibility: versteckt;

   Rückseitensichtbarkeit: versteckt;

   -WebKit-Perspektive: 1000;

   -moz-Perspektive: 1000;

   -ms-Perspektive: 1000;

   Perspektive: 1000;

   /* Andere Transform-Eigenschaften hier */

}

In WebKit-basierten Browsern ist eine weitere effektive Methode

.Würfel {

   -webkit-transform: übersetzen3d(0, 0, 0);

   -moz-transform: übersetzen3d(0, 0, 0);

   -ms-transform: übersetzen3d(0, 0, 0);

   transformieren: übersetzen3d(0, 0, 0);

  /* Andere Transform-Eigenschaften hier */

}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.