Bezpłatne animacje Lottie – zapomnij o GIF-ach

Kiedy pierwszy raz usłyszałem o Lottie, pomyślałem, że to taki następca GIF-ów. Mamy tutaj bowiem proste i krótkie animacje. Nie byłem świadomy, jak wielki potencjał tkwi w tym formacie. 

Na pierwszy rzut oka widać, że są oparte o krzywe, czyli pomyślałem sobie, że ktoś robi je na przykład w Illustratorze.  Zresztą zobaczcie sami przykładową animację Lottie:

Skąd jesteś, Lottie?

Czy pracując w After Effects możesz przyczyniać się do budowania stron internetowych i platform online? Mniej więcej w 2015 roku niejaki Hernan Torrisi wpadł na pomysł eksportowania animacji wykonanych w AE i renderowania do takiego formatu, aby były możliwe do łatwego wykorzystania online. W czym rzecz? Filmy, w tym animacje, są z natury rzeczy pakowane w ciężkie pliki przez co średnio nadają się do wykorzystania na stronie www. Nawet mocno skompresowany MP4 z 5-sekundową sekwencją będzie miał rozmiar 1024 KB lub więcej. Niby megabajt to niewiele, ale w praktyce ładowanie takich obiektów bezpośrednio na stronę, aby się odtwarzały, to zawsze był zły pomysł. Poza tym odtwarzacz z filmem zawsze był “ciałem obcym” w strukturze strony www.

Torrisi zadał sobie pytanie: co by było, gdybyśmy projekt z animacją zapisali do formy następujących po sobie obrazów krzywych i nie zamykali go w sposób nieedytowalny w danym kontenerze? Wykorzystał możliwości skryptowe Adobe After Effects i opracował wtyczkę do Adobe After Effects o nazwie Bodymovin, która eksportowała opis animacji w formacie JSON (czyli: JavaScript Object Notation). A więc spróbował zapisać językiem programowania to, co dla nas, osób związanych z kreacją, jest po prostu animacją wideo. Dlatego też Lottie wyglądają jak oparte na krzywych, ponieważ takie grafiki najłatwiej jest zapisać minimalną ilością kodu. Wszak to tylko obiekty matematyczne wypełnione danym kolorem.

Do Aftera i wtyczek jeszcze wrócimy, a teraz zobaczmy, co mamy w środku takiego Lottie.

Gdzie mieszkają Lottie?

Na wspomnianej już stronie www.lottiefiles.com znajdziemy tysiące projektów. Wystarczy wejść w zamieszczoną tam wyszukiwarkę i wpisać interesującą nas frazę. Wyszukiwarka pozwala też na filtrowanie projektów bezpłatnych, których są tysiące. Przyjrzyjmy się dokładniej przykładowemu projektowi. Można go pobrać w jednym z kilku formatów (w tym: animowany GIF i MP4), ale też do pewnego poziomu edytować. Można na przykład zmienić prędkość animacji czy jej zapętlenie. I co najważniejsze, wchodząc w edytor Lottie uzyskujemy możliwość edytowania koloru na każdej z warstw. Możemy więc bez trudu dostosować Lottie do identyfikacji wizualnej naszej strony. Dzięki temu ta prosta animacja będzie wyglądała, jak coś co rzeczywiście pasuje do całości.

Wyszukiwarka ma jeszcze jeden ciekawy filtr. Możemy zawęzić wyniki tylko do tych Lottie, które mają dołączony oryginalny projekt After Effects. I dzięki temu możemy taką animację poddać dokładniejszej edycji, na przykład zmieniać parametry ruchu w animacji.

Dodam jeszcze tylko, że Lottie na stronę www wrzucić możemy jako iframe, ale też wiele frameworków i serwisów ma już zaimplementowany specjalny mechanizm. Przykładowo, mój blog jest postawiony na WordPressie z tematem BeTheme i tam mogę po prostu zaimportować plik Lottie w formacie JSON. Ogólnie, umieszczanie Lottie na stronie, nawet wielu i w różnych konfiguracjach, jest bardzo proste, też dlatego, że pliki są bardzo małe, ale mogą się bez trudu automatycznie odtwarzać do przodu, do tyłu, w pętli, wolniej czy szybciej. Możemy nawet dodać warunek, że Lottie zacznie się animować dopiero, gdy w nią klikniemy lub ustawimy na niej myszkę. Animacja Lottie nie jest filmem w rozumieniu pliku wideo, więc wszystkie operacje wykonują się natychmiast, bez względu na jakość internetu.

Jak stworzyć Lottie?

Najlepiej pokazać to na przykładzie After Effects, ale zanim zaczniemy trzeba wejść do aplikacji Creative Cloud Desktop i tam w sekcji Stock i Rynek wyszukać odpowiednie rozszerzenie. Jest ono wymagane do tego, aby można było projekty AE eksportować do formatu Lottie.

W wyszukiwarce wtyczek wyszukujemy oczywiście “Lottie”, a następnie wybieramy tę wtyczkę, która jest dedykowana do After Effects (będzie też wersja dla Adobe Xd). Instalujemy i po tej czynności możemy już otwierać AE i tworzyć nowy projekt animacji. Możemy też oczywiście zaimportować sobie jakąś ilustrację stworzoną wcześniej w Illustratorze i później w AE stworzyć na podstawie jej komponentów animację. Ważne, abyśmy doprowadzili do sytuacji, gdy animacja będzie gotowa.

Teraz wystarczy wejść w Window i Extensions, a tam znajdziemy naszą wtyczkę Lottie. Otworzy się nowe okno, a my musimy wskazać, którą sekwencję chcemy zapisać jako Lottie. Następnie możemy pobrać ją na dysk, albo zapisać bezpośrednio na naszym koncie na www.lottiefiles.com. Animacja taka trafi do naszej prywatnej bazy, ale możemy też podzielić się nią ze społecznością.

Jest przy tym wiele ograniczeń dla animatorów, które powinniśmy znać. Lottie nie sprawdzi się, jeśli projekt ma skomplikowane maski typu lighten/darken/difference. Niektóre rodzaje ruchu, jaki zadamy obiektowi w AE może być dla Lottie za trudny do odwzorowania. Najlepiej więc na samym początku zapoznać się ze specyfikacją tego, co można: https://lottiefiles.com/supported-features

Dlaczego Lottie?

Jeszcze taka ciekawostka na koniec. Lottie wzięła swoją nazwę od Charlotte ‘Lotte’ Reiniger, niemieckiej reżyserki i animatorki, która była pionierką animacji typu silhouette, czyli takiej animacji sylwetkowej, bardzo często opartej o wycinanki. Rzeczywiście, można mieć wrażenie, że to taki protoplasta Lottie.

Jest jeszcze oczywiście drugi sens pytania “dlaczego Lottie?”. Otóż po raz pierwszy tak naprawdę animatorzy uzyskali możliwość tworzenia animowanych obiektów na stronę www, które poprawnie się wyświetlają i nie wymagają gimnastyki po stronie web developera. Zamiast dostarczać mu plik MP4 czy MOV dajemy po prostu kawałek kodu opartego o format JSON. Widzimy też jak blisko jest tak naprawdę od kreacji artystycznej do programowania. Może to trochę na wyrost, ale dziedziny te znacząco się do siebie zbliżyły. Zresztą ciężko jest animować w AE nie znając składni tamtejszych skryptów. I odwrotnie: trudno jest tworzyć serwisy internetowe nie wiedząc jak działa wideo w sieci.