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ściopacity
ifilter
- Dodaj do elementu właściwość
will-change
. - Utwórz animowany rysunek na płótnie w
OffscreenCanvas
- Utwórz rysunek 3D WebGL
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.
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](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-paint-1c546b2fb2532.png?authuser=4&hl=pl)
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](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-showing-bdf7ff078e40e.png?authuser=4&hl=pl)
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%
.
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.
Zdjęcie okładki: Fotografia Siora – Unsplash.