Aktualizacje funkcji wspomagania sprzętowego animacji

Una Kravets

Podsumowanie: Chromium automatycznie aktualizuje funkcje akceleracji sprzętowej w przypadku animacji SVG, przekształceń opartych na procentach, a wkrótce także animacji koloru tła i ścieżki klipu.

Jeśli chodzi o szybkość animacji, najprawdopodobniej pojawią się terminy „z akceleracją sprzętową” i „z akceleracją przez GPU”. Ale co to w ogóle oznacza? Style z akceleracją sprzętową to style, które do renderowania stylów wizualnych wykorzystują GPU (procesor graficzny), a nie procesor. Dzieje się tak, ponieważ GPU może renderować zmiany wizualne na stronie szybciej niż procesor.

Korzystanie z GPU w celu odciążenia przejść i animacji, które wymaga dużo grafiki, zapewnia płynniejszy obraz i mniej zakłóceń, ponieważ na animacje nie ma wpływu główny wątek. Animacje pomijają powłokę innych aktywnych skryptów działających na stronie, co spowalniałoby wyświetlanie treści wizualnych i generowało zastój.

Włączanie akceleracji sprzętowej animacji

Wspomagane sprzętowo animacje są komponowane w postaci warstw i pomagają programistom uzyskać płynne animacje przy 60 klatkach na sekundę, co zwiększa wydajność renderowania. Obecnie istnieje kilka sposobów określania i włączania akceleracji sprzętowych animacji i przejść w internecie:

  • Użyj funkcji CSS transform lub przejdź do wartości opacity i filter
  • Dodaj do elementu właściwość will-change.
  • Utwórz animowany rysunek na płótnie w OffscreenCanvas
  • Utwórz rysunek 3D WebGL
Zespół ds. renderowania Chromium stale śledzi wykorzystanie najczęściej animowanych właściwości, by określić, co należy zrobić, aby włączyć akcelerację sprzętową. Obecne właściwości CSS z domyślnie akceleracją sprzętową to na razie tylko opacity, filter i transform, ale wkrótce do listy dołączą właściwości background-color i clip-path.

Co jeszcze jest domyślnie akcelerowane sprzętowo w Chromium? Planujemy dodać już wiele rzeczy, w tym animacje SVG, o co prosili programiści.

Animacje SVG z akceleracją sprzętową

Format SVG świetnie nadaje się do każdej strony internetowej, a te interakcje z SVG mogą być bardziej wydajne. Od Chromium 89 Chrome dołączy do przeglądarki Firefox, aby domyślnie włączyć akcelerację sprzętową w animacjach SVG. Co musisz zrobić? Nic – zostanie to automatycznie zastosowane do animacji SVG w Chromium w wersji 89 i nowszych.

Przykład

Przyjrzyjmy się różnicom między animacją SVG z włączoną i wyłączoną akceleracją sprzętową. Wskaźniki wczytywania to często używane elementy interfejsu, np. ten widoczny na stronie facebook.com. Wskaźniki te wskazują, że serwer jest wykonywany na serwerze, podczas gdy użytkownik czeka na odpowiedź. W podanym tu przypadku odpowiedzią będzie wczytanie dodatkowych wyników na pasku bocznym.

Interfejs paska bocznego Facebooka z okrągłym modułem wczytywania podczas wczytywania dodatkowych treści.

Po otwarciu Narzędzi deweloperskich możemy zacząć profilować i dostrzegać różnice między animacją wykorzystującą procesor CPU i animację z akceleracją GPU.

Panel wydajności z włączonym miganiem farby
Po lewej: Chromium 88. Po prawej: Chromium 89 z akceleracją sprzętową animacji SVG. Obejrzyj prezentację Benoita Girarda na stronie JSFiddle.

Widać, że po lewej stronie (Chromium 87) odświeżanie ma miejsce przy każdym uruchomieniu wskaźnika postępu (w trybie ciągłym). Po prawej stronie nie jest możliwości odświeżania (Chromium 89 i Firefox). Możemy to sprawdzić w panelu Renderowanie w Narzędziach deweloperskich, gdy włączymy miganie Painta.

Panel wydajności przedstawiający renderowanie
Po lewej: Chromium 88. Po prawej: Chromium 89 z akceleracją sprzętową animacji SVG. Obejrzyj prezentację Benoita Girarda na stronie JSFiddle.

Przyjrzyjmy się bliżej panelu Skuteczność i ponownie zobacz ten efekt oraz jego wpływ na ogólną skuteczność Twojej usługi internetowej. Unikasz też czasu renderowania i malowania animacji, co zapewnia płynniejsze animacje i większe wydajność aplikacji. Facebook nie będzie wysyłać tego programu wczytującego opartego na SVG, dopóki przeglądarka nie będzie w większym stopniu obsługiwać sprzętowego formatu SVG z akceleracją sprzętową, zapewni to większą elastyczność w zakresie motywów, skalowania i rozdzielczości oraz łatwiejszej obsługi.

Procent animacji

Zespół ds. interakcji zapewnia też obsługę animacji przekształcenia procentowego w Chromium 89. Animacje z wartościami procentowymi opisują interakcje obejmujące ruch określony procentowo. Możesz na przykład skalować element w górę o 20% lub przesunąć menu elastycznego paska bocznego poza ekran za pomocą funkcji w stylu translateX: -100%.

Przykład nawigacji ze strony waze.com, który wykorzystuje przekształcenie procentowe do otwierania i ukrywania menu na mniejszych ekranach.

Tego typu animacje interfejsu użytkownika są dość powszechne, ale obecnie nie korzystają z akceleracji sprzętowej, ponieważ wcześniej nie było to możliwe. Procenty przekształceń zależą od rozmiaru pola (czyli układu), ale teraz, o ile rozmiar układu nie zmienia się w każdej klatce, przeglądarka może wstępnie obliczyć bezwzględne wartości przekształceń i uruchomić je tak, jakby to programista podał wartości w pikselach. Dobra wiadomość jest taka, że zespół Chromium pracuje nad tą funkcją i wkrótce tego typu animacje zostaną automatycznie skomponowane i przyspieszone przez sprzęt.

Co dalej?

Dzięki tym udoskonalonym animacji styl w internecie będzie znacznie płynniejszy. Jak już wspomnieliśmy, zespół wciąż szuka nadchodzących potrzeb związanych z internetem. Obecnie planujemy przekonwertować adresy background-color i clip-path, by umożliwić automatyczne korzystanie z akceleracji sprzętowej w kolejnych wersjach Chromium.

Element background-color jest priorytetem ze względu na dużą liczbę wykorzystania przejść i efektów, natomiast clip-path umożliwia znacznie skuteczniejsze efekty przejścia w internecie. Kiedy wydajność i interaktywność, to każdy wygrywa.

transition.style: witryna demonstracyjna prezentująca efekty przejścia z CSS przez Adama Argyle'a.

Zdjęcie okładki: Fotografia Siora – Unsplash.