Animacje za pomocą CSS25.X.2014

Spis treści

  1. Wstęp
  2. *Nie wszystko złoto
  3. Dodatkowe źródła informacji

Wstęp

Kontynuując temat apliacji hybrydowych warto się zastanowić nad ich wydajnością. Ważnym jest aby aplikacja działała płynnie i swym zachowaniem odpowiadała oczekiwaniom użytkownika a nie karała go za każdą akcję podejmowaną przez niego.

Wykonywanie animacji interfejsu za pomocą JavaScript nie są pod tym względem najlepszym rozwiązaniem bo:

  1. Wszyskie operacje na stronie wykonywane w JavaScript przeglądarka uruchamia w jednym wątku (wątek główny interfejsu użytkownika) a zatem następują one w sekwencji, czyli albo animujemy albo wykonujemy akcje - nie można zrobić kilku rzeczy jednocześnie.
  2. Animacje w CSS są wspierane sprzętowo* i wykonywane w oddzielnym wątku (wątek kompozycji) - większa część obliczeń przeniesiona zostaje na GPU i w niewielkim stopniu zużywa CPU. (Rys. 1). Więcej informacji na temat wewnętrznego działania przeglądarek - [1].
  3. Gdy zmieniamy kartę lub animacja przestaje być widoczna na ekranie (przewijamy stronę) animacja w CSS przestaje obiążać GPU bo nie jest rysowana na widocznej częsci ekranu ale nadal jest kontynuowana (jeśli wrócimy na kartę, lub przewiniemy stronę do poprzedniego miejsca, gdzie była animacja, będzie ona w innym miejscu niż była w momencie zmiany karty/przewinięcia) co wskazuje odczyt z aktualnego użycia CPU.
  4. Wspierane przez praktycznie wszystkie przeglądarki - [2] oraz [3].
  5. Do dyspozycji jest bogata lista różnego rodzaju transformacji nie ograniczając się tylko do takich jak przesunięcie, obrót czy skalowanie. ([4])

Pełna składnia atrybutu animation przedstawiona jest poniżej. Skrócona składnia wymaga podania nazwy animacji oraz czasu jej trwania. Reszta parametrów jest nieobowiązkowa.

animation: nazwa_animacji czas_trwania sposób_interpolacji opóźnienie_startowe ilość_powtórzeń kierunek_animacji;

Podstawową wiedzę na temat animacji w CSS3 można znaleźć w [5]. Poniżej umieszczam kilka bardzo prostych przykładowch animacji.

Zmienna przeźrocztstość
Zmienna przeźroczystość
Animacja położenia
Obrót obiektu
Animacja CSS w SVG (Chrome)
Kliknij w ikonę

*Nie wszystko złoto

Oczywiście nie wszystkie animacje można zrealizować za pomocą animacji w CSS. Podobnie z resztą nie jest prawdą, że wszystkie operacje w JavaScript nie są wspierane sprzętowo przez GPU. Bardzo dobrze wyjaśnia ten temat artykuł [7].

Dodatkowo w przypadku sterowania podłączaniem animacji CSS za pomocą JavaScript (na przykład na kliknięcie) nie wystarczy dodać/zmienić klasy posiadającej animację do atrybutu class - co wydawało by się logiczne. Należy natomiast stosować trik ze sklonowaniem elementu DOM, podmianą klas CSS odpowiadających za animację, wstawieniem go obok oryginalnego i usunięciem oryginalnego elementu.

Dodatkowe źródła informacji