Czasami miło jest ożywić obrazek. Przedstawić coś nie na jednym, lecz na ich serii, szybko się zmieniających. Wszelkiej maści animacje, sprawiają, że po prostu więcej się dzieje, przyciągają wzrok widza, ale równie często pozwalają wyrazić coś co ciężko by było wygłosić w słowach. Takie „ruszające się obrazki” znane są nie od dziś. Przykładowo prawie każdy napotkał się z czymś takim jak GIF (Graphics Interchange Format). Mimo, że nie są one najbardziej optymalnymi formami zapisu animacji i filmów, większość osób od razu byłaby gotowa wykrzyknąć ich nazwę po zapytaniu o to w jakim formacie zapisane są animacje w Internecie. Nie bez echa bowiem odbiła się ich szeroka rola w świecie cyfrowym. Mało kto za to kojarzy pliki takie jak WebM, ale w ogóle wie, że bardzo popularnym sposobem na tworzenie animacji na stronach internetowych są sposoby wyświetlania odpowiedniego wycinka jednego dobrze przygotowanego obrazu.
GIFy to przeszłość? Jakie są współczesne sposoby na animacje?
Mimo, że wydawać by się mogło, że GIF-y starzeją w oczach, wciąż się jakoś trzymają. Jeśli jednak chciałbyś/chciałabyś skorzystać z nich w czymś więcej niż komunikatorze jak Messenger i Discord, na przykład we własnym projekcie strony internetowej to lepiej dobrze się zastanów. Gif mimo swojej popularności, absolutnie nie stanowi najlepszego zapisu animacji. Nie jest zoptymalizowany pod kątem kompresji, co oznacza, że pliki GIF-ów animowanych są zazwyczaj bardzo duże, szczególnie w przypadku długich animacji. GIF-y zapisują każdą klatkę jako oddzielny obraz, co dodatkowo zwiększa rozmiar pliku. Co więcej są ograniczone do 256 kolorów na klatkę, co jest wynikiem ich 8-bitowej palety. To sprawia, że GIF-y często wyglądają gorzej w przypadku bardziej złożonych lub szczegółowych grafik. I nie są to jedyne wady GIF-ów. Nie chodzi tu, że są one bezużyteczne, ale obecnie dostępne są lepsze rozwiązania. Przykładowo WebM. WebM wykorzystuje nowoczesne algorytmy kompresji wideo, takie jak VP8 lub VP9, które są znacznie bardziej efektywne. Dzięki temu nawet długie animacje w WebM mają stosunkowo niewielki rozmiar pliku w porównaniu do GIF-ów. WebM obsługuje pełną paletę kolorów (do 16,7 milionów kolorów), dzięki czemu oferuje znacznie lepszą jakość wizualną, szczególnie dla gradientów, fotografii i detali. Z kolejnych plusów taki format obsługuje pełne standardy wideo, więc może osiągać znacznie wyższą liczbę FPS, co sprawia, że animacje wyglądają bardziej naturalnie.
Animacja klatkowa, kolejne zastępstwo dla GIF-ów?
Kolejnym sposobem do odtwarzania animacji, często używanych zwłaszcza w interaktywnych stronach internetowych jest animacja klatkowa czyli pokazywanie wycinków obrazu w odpowiednio szybkim tempie. Mimo, że wydaje się być nie intuicyjne oraz kłopotliwe, tak naprawdę takie nie musi być. Aby lepiej to wyjaśnić przybliżę ten sposób na przykładzie poniższego obrazka.
Widać na nim zmieniający pas samochód. Klatka po klatce. Odpowiednio napisany program dostaje informacje o wycinanym prostokącie, który to zostanie przestawiony użytkownikowi. Za pomocą prostej funkcji ustawia prędkość wyświetlenia kolejnej klatki z dokładnym wyznaczeniem jej miejsca na obrazie. To oznacza, że deweloper ma możliwość wyznaczania takiej kolejności klatek jaką tylko chce, jak również i prędkości każdej ze zmian. Daje to szeroką paletę możliwości, a także szanse na zmienianie się animacji w bardzo elastyczny sposób. W powyższym obrazku najoczywistszą możliwość stanowiłoby iterowanie po klatkach tak jak czyta się książkę. Co więcej zamiast obszernych animacji, które niekiedy mogłyby ważyć już nawet kilka GB tak jak wiele GIF-ów mamy do wczytania tylko jeden plik png co zaoszczędzi serwer jak i czas użytkownika na załadowanie strony.
Przykładowo na swojej stronie Animated Note użyty został sposób iteracji po elementach. Animowany świstak, który bazuje na kilkunastu animacjach, które dynamicznie się zmieniają zapisany jest w jednym wielkim pliku WebP (taki chudszy png). Program dynamicznie skacze po animacjach, zapewniając przy tym większą płynność. Animated Note służy do tworzenia notatek i połączeniu grywalizacji z uczeniem się. W przyszłości oprócz notatnika planowane jest wprowadzenie interaktywnych testów wiedzy, również w formie zabawy.
Autor: Piotr Koczur