Ponowne rastowanie skomponowanych warstw przy zmianie skali

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

Począwszy od Chrome 53, gdy zmieni się skala przekształcenia, cała treść jest ponownie rasowana, jeśli nie ma właściwości CSS will-change: transform. Inaczej mówiąc, will-change: transform oznacza „szybko animuj obraz”.

Dotyczy to tylko przekształceń skal, które są wykonywane w wyniku manipulacji skryptami, i nie dotyczy animacji CSS ani animacji internetowych.

Oznacza to, że zawartość Twojej witryny prawdopodobnie będzie lepiej wyglądać, ale może działać wolniej, jeśli nie wprowadzisz kilku prostych zmian opisanych poniżej.

Konsekwencje dla programistów stron internetowych

W ramach tej zmiany will-change: transform można traktować jako wymuszanie rastrowania zawartości w stałą bitmapę, która nigdy nie zmienia się w trakcie aktualizacji przekształcanych. Dzięki temu deweloperzy mogą zwiększyć szybkość przekształcania animacji bitmapy, np. przesuwać ją, obracać lub skalować.

Nie odróżniamy przekształceń skali od przekształceń.

Dodaj will-change: transform do elementów, jeśli potrzebujesz bardzo szybkiej (inaczej 60 kl./s) prędkości przekształcania animacji oraz oczekuje się, że rasowanie elementu w wysokiej jakości w każdej klatce nie jest wystarczająco szybkie. W przeciwnym razie unikaj will-change: transform.

Aby zoptymalizować równowagę między wydajnością i jakością, możesz dodać element will-change: transform na początku animacji i usunąć go po zakończeniu animacji. Pamiętaj jednak, że dodanie lub usunięcie właściwości will-change: transform często wiąże się z wysokimi jednorazowymi kosztami.

Dodatkowe uwagi dotyczące wdrażania

Usunięcie elementu will-change: transform spowoduje, że treść jest ponownie rastrowana z ostrością, ale tylko na następnej klatce animacji (przy użyciu requestAnimationFrame). Jeśli więc masz na niej warstwę z elementem will-change: transform i chcesz po prostu wywołać ponowne rastrowanie, a potem kontynuować animację, musisz usunąć parametr will-change: transform, a potem ponownie dodać go w funkcji requestAnimationFrame() callback.

Jeśli w którymkolwiek momencie animacji chcesz skorzystać z rastrowania w bieżącej skali, zastosuj powyższą metodę, aby usunąć ją w jednej klatce, a element will-change: transform w kolejnej.

Może to spowodować utratę skomponowanej warstwy treści w efekcie ubocznym, przez co rekomendacja ta będzie dość kosztowna. Jeśli stanowi to problem, zalecamy dodanie do treści również właściwości transform: translateZ(0), aby podczas tej operacji pozostały w warstwie skomponowanej.

Podsumowanie wpływu

Ta zmiana ma wpływ na jakość renderowanych treści, wydajność i kontrolę deweloperów.

  • Jakość wyrenderowanej treści: renderowane dane wyjściowe elementów, które animują skalę przekształcenia, zawsze będą domyślnie ostry.
  • Wydajność: animowanie przekształcenia, gdy występuje element will-change: transform, będzie szybkie.
  • Kontrola dewelopera: deweloperzy mogą wybierać między jakością a szybkością w odniesieniu do poszczególnych elementów i klatek animacji, dodając i usuwając
    will-change: transform.

Więcej szczegółów znajdziesz w dokumentacji projektu powyżej.

Przykłady

W tym przykładzie element z identyfikatorem remainsBlurry pozostanie rozmyty po tej zmianie, ale element z identyfikatorem noLongerBlurry stanie się ostry. Dzieje się tak, ponieważ pierwsza z nich ma właściwość CSS will- change: transform.

Przykłady animacji przekształcania skali z prawdziwych aplikacji