Eine Einführung in die Hardwarebeschleunigung mit CSS -Animationen

In den letzten Jahren haben wir oft von der Beschleunigung der Hardware gehört und wie es dazu beiträgt, die Animation auf Webseiten zu verbessern und sie selbst auf mobilen Browsern schön und reibungslos zu machen. Aber ich denke, viele weniger erfahrene Entwickler wissen nicht, wie Hardware -Beschleunigung funktioniert und wie wir sie richtig verwenden können, um unsere Animationen zum Leuchten zu bringen.

Der Begriff selbst klingt nach etwas übermäßig kompliziertem, nahezu höherer Mathematik. In diesem Artikel werde ich dieses Thema Licht beleuchten und zeigen, wie diese Technik in Ihren Front-End-Projekten verwendet werden kann.

Key Takeaways

• Hardware -Beschleunigung kann die Qualität von CSS -Animationen erheblich verbessern und sie reibungsloser und effizienter machen, insbesondere in mobilen Browsern. Dies wird erreicht, indem der Rendering -Prozess in die GPU (Grafikverarbeitungseinheit) abgeladen wird, die für solche Aufgaben besser ausgestattet ist.
• CSS-Transformationen sind GPU-freundliche Eigenschaften, die verwendet werden können, um teure Neulackiervorgänge zu vermeiden. Der „Transformation Hack“ kann auch verwendet werden, um ein Element in der GPU zu erzwingen, noch bevor die Animation beginnt, und somit die Beschleunigung der Hardware auslöst.
• Die Verwendung der Hardwarebeschleunigung sollte mit Vorsicht erfolgen, da dies zu Speicherproblemen führen kann, insbesondere auf mobilen Geräten. Es kann auch die Schrift gegen Aliasing durch unterschiedliche Rendering-Mechanismen der GPU und CPU beeinflussen.
• Die Eigenschaft "Willenswechsel" wurde eingeführt, um den Browser zu informieren, welcher Eigenschaft sich ändern wird, damit der Browser entsprechende Optimierungen im Voraus vornehmen kann. Allerdings unterstützen nicht alle Browser diese Eigenschaft.

Warum sollte es mich interessieren?

Schauen wir uns ein einfaches Animationsbeispiel an, das mehrere übereinander gestapelte Bälle enthält (dh auf der Z-Achse, also sieht es aus wie ein Ball). Das Ziel ist es, diese Gruppe von Bällen mit Animation zu bewegen. Der einfachste Weg, dies zu tun, besteht darin, die linken und oberen Eigenschaften anzupassen. Wir könnten dies mit JavaScript tun, aber stattdessen werden wir CSS -Animationen verwenden. Bitte beachten Sie, dass ich Anbieterpräfixe ausschließe, aber Sie sollten so etwas wie Autoprefixer verwenden, um die vollständige Kompatibilität zu gewährleisten.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Hier ist eine Live -Demo, die eine Taste verwendet, um die Animation mit JavaScript zu initiieren:

Siehe den Stift animierende überlappende Bälle mit oberen/linken Eigenschaften von SitePoint (@sinepoint) auf CodePen.

Nachdem Sie auf die Schaltfläche "Animation starten" geklickt haben, werden Sie feststellen, dass die Animation auch bei einem Desktop -Browser nicht sehr reibungslos aussieht. Wenn Sie die Animation auf Ihrem mobilen Gerät testen, werden Sie feststellen, dass sie weit entfernt von 60 fps ist. Um dies zu beheben, können wir die CSS -Transformation mit der Funktion translate () verwenden, anstatt die oberen und linken Werte zu animieren.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>transform: translate(0, 0);
</span>  <span>}
</span>
  <span>25% {
</span>    <span>transform: translate(200px, 0);
</span>  <span>}
</span>
  <span>50% {
</span>    <span>transform: translate(200px, 200px);
</span>  <span>}
</span>
  <span>75% {
</span>    <span>transform: translate(0, 200px);
</span>  <span>}
</span><span>}</span>

Probieren Sie den obigen Code in der folgenden Demo aus:

Siehe den Stift animiert überlappende Bälle mit CSS -Transformationen mit SitePoint (@sinepoint) auf CodePen.

Jetzt ist die Animation schön und glatt. Großartig! Warum hat diese geholfen? Nun, CSS -Transformationen verursachen keine Reponten, im Gegensatz zu Animationen mit den linken und den oberen Eigenschaften. Schauen wir uns das Timeline -Panel in Chromes Devtools während der Animationsausführung an:

Im linken und oberen Beispiel können wir bei jedem Animationsschritt grüne Balken sehen. Dies ist eine teure Neulackierungsoperation. Die Animations -Bildrate beträgt weniger als 60 fps, was wir immer darauf abzielen, die Animation glatt zu machen.

Schauen Sie sich nun die Zeitleiste im Fall von CSS -Transformationen an:

Wie Sie sehen, gibt es während der Animation keine grünen Balken.

Eine weitere Funktion, die in Chrome's Devtools zur Verfolgung des Neulackierungsprozesses verfügbar ist, ist "Lackblenden aktivieren". Sie können diese Option finden, indem Sie die Devtools öffnen, die ESC -Taste treffen und dann die Registerkarte "Rendering" auswählen. Wenn diese Funktion eingeschaltet ist, werden grüne Kisten (d. H. Lack -Rechtecke) um neu gestrichene Bereiche angezeigt. Im linken und oberen Beispiel haben die Bälle eine grüne Box für den gesamten Animationsprozess, der die Repainten anzeigt.

Andererseits wird im CSS -Transformationsbeispiel das Lack -Rechteck nur auf den ersten und letzten Animationsrahmen angezeigt.

Wie genau transformiert die Animation die Animation ohne Repainten? Die grundlegende Antwort ist, dass CSS -Transformationen direkt im GPU -Pear auftreten, in dem Hardware -Beschleunigung verwendet wird, wodurch das Rendern der Software vermieden wird. Schauen wir uns dies genauer an.

Wie Hardware Beschleunigung funktioniert

Wenn der Browser das Markup einer Seite erhält, analysiert er ihn, um den Dom -Baum zu erstellen. Der DOM -Baum und das CSS ermöglichen es dem Browser, den Renderbaum zu bauen. Der Renderbaum besteht aus Renderobjekten - den Elementen, die auf der Seite gerendert werden sollen. Jedes Renderobjekt wird einer grafischen Schicht zugeordnet. Jede Schicht wird als Textur in die GPU hochgeladen. Der Trick hier ist, dass die Schicht wie im Fall von 3D -Grafiken in der GPU ohne Neulackierung transformiert werden kann. Diese Transformationen werden durch den separaten Kompositionsverfahren vorgenommen. Weitere Informationen zur Komposition in Chrome finden Sie hier.

In unserem Beispiel erzeugt die CSS -Transformation eine neue zusammengesetzte Schicht, die direkt in der GPU transformiert werden kann. Die Devtools von Chrome ermöglichen das Anzeigen von Verbundschichten mithilfe der Option "Layer Borders". Jede zusammengesetzte Schicht hat einen orangefarbenen Rand.

Unsere Bälle mit der CSS -Transformation haben orangefarbene Grenzen und werden in getrennte Verbundschichten bewegt:

Zu diesem Zeitpunkt könnten Sie fragen: Wann erstellt ein Browser eine separate zusammengesetzte Ebene?

es geschieht in den folgenden Fällen:

• für 3D- oder Perspektiven -CSS -Transformationen (in unserem Beispiel)
• für
• Bei Verwendung von CSS -Filtern
• für ein Element, das ein anderes Element überlappt, das in eine zusammengesetzte Schicht extrahiert wurde (z. B. unter Verwendung von Z-Index)

Sie könnten denken: „Halten Sie sich fest. In diesem Beispiel wurde 2D -Übersetzung verwendet, nicht 3D -Transformationen “. Und du hast recht. Deshalb gibt es zwei zusätzliche Neulackiervorgänge - zu Beginn und am Ende des Animationsprozesses in unserer Zeitleiste.

Der Unterschied zwischen den 3D- und 2D -Transformationen besteht darin, dass 3D -Transformationen den Browser im Voraus eine separate zusammengesetzte Schicht erzeugen, während 2D -Transformationen dies im laufenden Fliegen durchführen. Zu Beginn der Animation wird eine neue zusammengesetzte Ebene erstellt, und die Texturen werden in die GPU geladen, wodurch das Neulackieren initiiert wird. Dann wird die Animation vom Kompositor in der GPU durchgeführt. Wenn die Animation beendet ist, wird die zusätzliche Verbundschicht entfernt, was zu einem weiteren Neulackiervorgang führt.

Renderingelemente in der GPU

Nicht alle CSS -Eigenschaftenänderungen an Elementen können direkt in der GPU behandelt werden. Nur die folgenden Eigenschaften werden unterstützt:

• Transformation
• Opazität
• filter

und so, um die beste Chance für eine reibungslose, qualitativ hochwertige Animation zu gewährleisten, sollten wir immer versuchen, diese GPU-freundlichen Eigenschaften zu verwenden.

ein Element erzwingen, in GPU

zu rendern

In bestimmten Fällen kann es erforderlich sein, ein Element in der GPU noch bevor die Animation begonnen hat. Dies hilft, die erste Neulackierungsoperation zu vermeiden, die durch die neue Schichtschöpfung verursacht wird. Um dies zu erreichen, kann der sogenannte „Transformation Hack“ nützlich sein.

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Was dies tut, ist, dass der Browser wissen, dass wir eine 3D -Transformation durchführen möchten. Dadurch erstellt der Browser eine separate Ebene und verschiebt das Element im Voraus an die GPU, wodurch die Beschleunigung der Hardware ausgelöst wird.

Diese Technik kann auch nützlich sein, wenn das Neuaufbau eines Elements aufgrund eines anderen Elements dahinter zu teuer ist. Kehren wir zum ersten Beispiel zurück und ändern Sie es leicht, damit er einen einzelnen Ball und einen Container mit einem Hintergrundbild enthält, das mit CSS -Filtern verschwommen ist. Der Ball ist mit den linken und den oberen Eigenschaften animiert.

Siehe den Stift, der einen Ball mit oberen/linken Eigenschaften von SitePoint (@sinepoint) auf CodePen animiert.

Wieder ist die Ballbewegung ruckartig. Dies geschieht, weil jede Neulackierungsbetrieb aufgrund des verschwommenen Hintergrunds zu stark kostet.

Lassen Sie uns nun den Transformationshack zum Container hinzufügen.

Siehe den Stift, der links/obere Eigenschaften mit Hardware -Beschleunigung von SitePoint (@sinepoint) auf CodePen animiert.

Das Ergebnis ist nicht schlecht und die Animation funktioniert gut. Warum? Denn jetzt wird der verschwommene Farbausgleichshintergrund in eine andere zusammengesetzte Ebene verschoben, und das Neulackieren des Balls bei jedem Animationsschritt ist billig.

Hardwarebeschleunigung mit Vorsicht

verwenden

Nichts kommt kostenlos. Es gibt einige Probleme im Zusammenhang mit der Beschleunigung der Hardware.

Speicher
Das wichtigste Problem hängt mit dem Gedächtnis zusammen. Wenn Sie zu viele Texturen in die GPU geladen werden, können Speicherprobleme verursacht werden. Dies ist auf mobilen Geräten sehr wichtig und kann sogar einen mobilen Browser zum Absturz bringen. Beachten Sie die Konsequenzen und verwenden Sie die Hardware -Beschleunigung für jedes Element auf einer Seite nicht.

Schriftart
Das Rendern der GPU beeinflusst die Schrift gegen Aliasing. Dies geschieht, weil GPU und CPU unterschiedliche Rendering -Mechanismen haben. Selbst wenn Sie die Hardwarebeschleunigung am Ende einer Animation ausschalten, wird der Text während der Animation verwischt. In diesem Beitrag von Keith Clark können Sie mehr über Font -Rendering -Probleme lesen.

Die nahe Zukunft

Die Notwendigkeit, den „Transformation Hack“ zu verwenden, um separate zusammengesetzte Schichten zu erstellen, ist mühsam. Browser sollten auf jeden Fall eine einfache Möglichkeit bieten, dies zu tun. Deshalb wurde die Willensmeldung vorgestellt. Mit dieser Funktion können Sie den Browser darüber informieren, welche Eigenschaft sich ändern wird, damit der Browser im Voraus entsprechende Optimierungen vornehmen kann. Hier ist ein Beispiel, das den Browser darüber informiert, dass die Transformationseigenschaft geändert wird:

<span><span>.ball-running</span> {
</span>  <span>animation: run-around 4s infinite;
</span><span>}
</span>
<span><span>@keyframes run-around</span> {
</span>  <span>0%: {
</span>    <span>top: 0;
</span>    <span>left: 0;
</span>  <span>}
</span>
  <span>25% {
</span>    <span>top: 0;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>50% {
</span>    <span>top: 200px;
</span>    <span>left: 200px;
</span>  <span>}
</span>
  <span>75% {
</span>    <span>top: 200px;
</span>    <span>left: 0;
</span>  <span>}
</span><span>}</span>

Leider unterstützen nicht alle Browser den Willen. In den folgenden Ressourcen erfahren Sie mehr über den Willenswechsel:

• Eine Einführung in die CSS-Willensmobilie von Nick Saloum
• Alles, was Sie über das CSS-Wille von Sara Soueidan wissen müssen.

Schlussfolgerung

zusammenfassen, was wir behandelt haben:

• Verwendung von GPU kann die Qualität Ihrer Animationen verbessern
• GPU-gerenderte Animationen sollten auf jedem Gerät 60 fps sein
• GPU-freundliche CSS-Eigenschaften
verwenden
Verstehe, wie man ein Element zwingt, das in der GPU mit dem "Transformation Hack" gerendert wird.

Wenn Sie diese Techniken verwendet haben oder über ein Feedback verfügen, können Sie Ihre Kommentare gerne anbieten.

häufig gestellte Fragen zur Hardwarebeschleunigung und zur CSS -Animationen

Welche Rolle spielt die GPU in Hardware-Beschleunigungs-CSS-Animationen? Es ist verantwortlich für die Rendern von Grafiken und Bildverarbeitung. Wenn CSS-Animationen hardwarebeschleunigt sind, übernimmt die GPU die Aufgabe, die Animationen von der Central Processing Unit (CPU) zu rendern. Dies führt zu reibungsloseren, schnelleren und effizienteren Animationen, da die GPU speziell für die Behandlung solcher Aufgaben ausgelegt ist. von CSS -Animationen, indem einige der grafischen Verarbeitungsaufgaben von der CPU zur GPU abgeladen werden. Dies ermöglicht es der CPU, sich auf andere Aufgaben zu konzentrieren und so die Gesamtleistung der Website oder Anwendung zu verbessern. Darüber hinaus ist die GPU besser ausgestattet, um grafische Aufgaben zu erledigen, was zu glatteren und effizienteren Animationen führt. Kann die Leistung erheblich verbessern, es gibt potenzielle Nachteile. Eines der Hauptprobleme sind Kompatibilitätsprobleme. Nicht alle Geräte oder Browser unterstützen die Beschleunigung der Hardware, was zu inkonsistenten Benutzererlebnissen führen kann. Darüber hinaus kann eine Überbeanspruchung der Hardwarebeschleunigung zu einem erhöhten Stromverbrauch führen. Dies kann ein Problem für mobile Geräte sein. Kann durch die Verwendung der Eigenschaft "Transformation" in Ihrem CSS -Code erfolgen. Diese Eigenschaft löst die GPU aus, die Darstellung der Animation zu übernehmen. Sie können beispielsweise 'Transform: TranslateZ (0)' oder 'Transform: Dreh (0DEG)' verwenden, um die Beschleunigung der Hardware zu ermöglichen. > CSS -Animationen, die komplexe grafische Aufgaben wie 3D -Transformationen, Übergänge und Keyframe -Animationen umfassen, können stark von der Beschleunigung der Hardware profitieren. Diese Aufgaben können ressourcenintensiv sein, wenn sie von der CPU behandelt werden, aber die GPU kann sie effizienter verarbeiten, was zu glatteren Animationen führt. 🎜> Um die Kompatibilität bei der Verwendung von CSS-Animationen mit Hardware-Beschleunigungen zu gewährleisten, ist es wichtig, Ihre Website oder Anwendung auf verschiedenen Geräten und Browsern zu testen. Sie können auch Fallbacks in Ihrem CSS -Code verwenden, um alternative Animationen für Geräte oder Browser bereitzustellen, die Hardware -Beschleunigung nicht unterstützen.

Kann Hardware -Beschleunigung mit CSS -Übergängen verwendet werden? Durch die Verwendung der Eigenschaft "Transformation" können Sie die GPU zum Rendern des Übergangs auslösen, was zu einer glatteren und effizienteren Animation führt. Während die Hardwarebeschleunigung die Leistung von CSS -Animationen verbessern kann, kann sie auch den Stromverbrauch erhöhen und möglicherweise die Akkulaufzeit auf mobilen Geräten beeinflussen. Es ist wichtig, bei Verwendung der Hardwarebeschleunigung ein Gleichgewicht zwischen Leistung und Stromverbrauch zu erreichen.

Kann ich die Hardware -Beschleunigung für 2D -Animationen verwenden? Durch die Verwendung der Eigenschaft "Transformation" in Ihrem CSS -Code können Sie die GPU dazu auslösen, die Animation zu rendern, was zu einer glatteren und effizienteren Animation führt. >

Optimieren Sie Ihren CSS -Code für die Beschleunigung von Hardware für die Beschleunigung der Hardware, um die Eigenschaft "Transform" zu verwenden, um die GPU für das Rendern von Animationen auszulösen. Es ist auch wichtig, die Überbeanspruchung der Hardwarebeschleunigung zu vermeiden, da dies zu einem erhöhten Stromverbrauch führen kann. Darüber hinaus kann das Testen Ihrer Website oder Anwendung auf verschiedenen Geräten und Browsern dazu beitragen, die Kompatibilität zu gewährleisten.

Das obige ist der detaillierte Inhalt vonEine Einführung in die Hardwarebeschleunigung mit CSS -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!