Zusammengesetzte Ebenen bei Skalierungsänderung neu rastern

Chris Harrelson
Chris Harrelson
X GitHub

Kurzfassung

Ab Chrome 53 werden alle Inhalte neu gerastert, wenn sich die Skalierung der Transformation ändert und die CSS-Eigenschaft will-change: transform nicht vorhanden ist. Anders ausgedrückt: will-change: transform bedeutet „Bitte animieren Sie es schnell“.

Dies gilt nur für Transformationen, die durch Scriptmanipulation erfolgen, und gilt nicht für CSS-Animationen oder Webanimationen.

Das bedeutet, dass deine Website vermutlich besser aussehen wird. Ohne einige einfache Änderungen, die im Folgenden beschrieben werden, kann es allerdings auch etwas länger dauern.

Auswirkungen für Webentwickler

Durch diese Änderung wird unter will-change: transform erzwungen, dass der Inhalt in eine feste Bitmap gerastert wird, die sich bei Transformationsupdates dann nie ändert. Auf diese Weise können Entwickler die Geschwindigkeit von Transformationsanimationen auf dieser Bitmap erhöhen und sie beispielsweise verschieben, drehen oder skalieren.

Wir unterscheiden nicht zwischen Skalierungs- und Übersetzungstransformationen.

Fügen Sie will-change: transform auf Elemente ein, wenn Sie sehr schnelle Animationsgeschwindigkeiten (mit anderen Worten: 60 fps) benötigen und es ist zu erwarten, dass das Rastern des Elements in hoher Qualität in jedem Frame nicht schnell genug ist. Andernfalls solltest du will-change: transform nicht verwenden.

Zur Optimierung der Leistung und Qualität können Sie will-change: transform zu Beginn von Animationen hinzufügen und am Ende wieder entfernen. Beachten Sie jedoch, dass das Hinzufügen oder Entfernen von will-change: transform häufig hohe einmalige Leistungskosten verursacht.

Weitere Hinweise zur Implementierung

Wenn Sie will-change: transform entfernen, werden Inhalte in einem gestochen scharfen Maßstab neu gerastert, jedoch nur im nächsten Animationsframe (über requestAnimationFrame)). Wenn Sie also eine Ebene mit will-change: transform haben und einfach ein neues Raster auslösen und dann mit der Animation fortfahren möchten, müssen Sie „will-change:transform“ entfernen und die Ebene dann in einem requestAnimationFrame() callback wieder hinzufügen.

Wenn Sie während einer Animation Rastern im aktuellen Maßstab durchführen möchten, wenden Sie die obige Technik an, um sie in einem Frame zu entfernen und will-change: transform in einem nachfolgenden Frame wieder hinzuzufügen.

Dies kann dazu führen, dass die Inhalte ihre zusammengesetzte Ebene verlieren und die obige Empfehlung etwas teuer ist. Wenn dies ein Problem ist, empfehlen wir, auch transform: translateZ(0) in den Inhalt aufzunehmen, damit er während dieses Vorgangs in einer zusammengesetzten Ebene verbleibt.

Zusammenfassung der Auswirkungen

Diese Änderung hat Auswirkungen auf die Qualität der gerenderten Inhalte, die Leistung und die Kontrolle durch Entwickler.

  • Qualität der gerenderten Inhalte: Die gerenderte Ausgabe von Elementen, die den Transformationsumfang animieren, ist standardmäßig immer scharf.
  • Leistung: Das Animieren der Transformation, wenn will-change: transform vorhanden ist, ist schnell.
  • Steuerungsmöglichkeiten für Entwickler: Entwickler können zwischen Qualität und Geschwindigkeit für Frames pro Element und pro Animation wählen, indem sie
    will-change: transform hinzufügen oder entfernen.

Weitere Informationen finden Sie oben im Verweis auf das Designdokument.

Beispiele

In diesem Beispiel wird das Element mit der ID remainsBlurry nach dieser Änderung verschwommen angezeigt, das Element mit der ID noLongerBlurry wird jedoch scharf. Das liegt daran, dass erstere eine CSS-Eigenschaft will- change: transform enthält.

Beispiele für Animationen im Transformationsmaßstab aus echten Anwendungen