Wstęp do Lottie

Kamil Ochenkowski

Format Lottie umożliwiają projektantom tworzenie i wdrażanie zaawansowanych, dopracowanych wizualnie animacji bez potrzeby angażowania w tym celu zespołu programistów. Za pomocą Lottie można bowiem bez trudu dodawać lekkie, łatwo skalowalne animacje do dowolnej aplikacji natywnej, czyniąc ją bardziej atrakcyjną dla użytkowników. Sprawdź, co jeszcze warto wiedzieć na temat plików Lottie i dowiedz się,
jak można je efektywnie wykorzystać w projekcie.


Czym jest Lottie?

Lottie to format pliku animacji oparty na JSON, który umożliwia projektantom wysyłanie animacji na dowolną platformę z taką samą łatwością, jak w przypadku wysyłania statycznych zasobów. Są to małe pliki, które działają na dowolnym urządzeniu i można je bez trudu skalować w górę lub w dół bez pikselizacji.


Historia powstania Lottie

Lottie bierze swój początek od inicjatywy Hernana Torrisi, który wpadł na pomysł eksportowania reprezentacji animacji w Adobe After Effect i renderowania animacji na www. Wykorzystał on możliwości skryptowe Adobe After Effects, aby przenieść projekt animacji
i wydał wtyczkę do Adobe After Effects o nazwie Bodymovin, która eksportowała animację w formacie JSON.

Programiści Brandon Withrow, Gabriel Peal oraz Leland Richardson z Airbnb dostrzegli potencjał, jaki prezentują animacje oparte na formacie JSON, zauważając również, że skutecznie rozwiązują one dotychczasowe problemy. W związku z tym postanowili nawiązać współpracę z głównym animatorem w Airbnb, Salihem Abdul-Karim, po to, by ten pomógł im w tworzeniu bibliotek iOS i Android (nazwanych właśnie terminem „Lottie”), które mogłyby renderować te animacje na różnych platformach.

Zalety stosowania Lottie w projekcie

Lottie stanowi lżejszą alternatywę dla animowanych plików GIF i PNG, a dzięki umieszczeniu w kodzie strony odwołania do JSON korzystnie wpływa na prędkość ładowania warstwy frontendowej aplikacji. Jakie jeszcze zalety niesie to rozwiązanie? Lottie zapewnia ponadto:

  • multiplatformowość – projektant tworzy jedną animację, którą można użyć zarówno
    na iOS, jak i Androidzie, Webie czy React Native;
  • skalowalność – oparcie animacji na wektorach daje możliwość ich szybkiego dopasowywania bez utraty jakości;
  • rozmiar pliku – pliki Lottie mają kilkakrotnie mniejszy rozmiar w porównaniu do formatu GIF czy PNG.

Proces tworzenia animacji

Planując stworzenie animacji, na początku warto skrupulatnie przemyśleć cały projekt
i wybrać najbardziej odpowiednie rozwiązania, które pozwolą na jego sprawną realizację.
W tym celu należy zastanowić się nad kilkoma kluczowymi kwestiami związanymi z kolejnymi etapami procesu tworzenia animacji.

Co chcemy animować?

Chcąc stworzyć animację, pierwszym krokiem powinno być przygotowanie projektu
i narysowanie rzeczy, które planujemy animować. W tym celu niezbędny będzie sprawdzony program graficzny taki jak:

  • Figma,
  • Sketch,
  • Adobe Illustrator,
  • Adobe XD.

Wszystkie powyższe programy posiadają bowiem plugin umożliwiający łatwy eksport naszego elementu animacji do After Effect.

W czym animować nasz design?

Na początku powstania Lottie animacje były tworzone w Adobe After Effects z uwagi na jego integrację z pluginem Bodymovin. Obecnie na rynku znajduje się kilka software umożliwiających wygodne eksportowanie animacji bezpośrednio do framerowka Lottie. Wśród nich wymienić można:

  • After Effects + Bodymovin,
  • FrameX,
  • ProtoPie,
  • Animator by Haiku,
  • Flow.

W dalszej części artykułu szczególnie skupimy się na After Effect, ponieważ to właśnie on daje nam najwięcej możliwości w zakresie animacji.

Eksport do AE

Jeśli stworzyliśmy design naszej animacji w Figmie lub Sketchu, musimy użyć pluginu
o nazwie AEUX. Jest to oczywiście darmowy plugin, który przenosi nasze wektory do AE.

Jeżeli natomiast mamy projekt w Adobe XD, wówczas eksport do AE jest bardzo prosty
i wygodny z uwagi na fakt, że są to produkty sygnowane logo jednej firmy.

Trochę inaczej wygląda eksport plików z Illustratora. Zadanie to okazuje się nieco trudniejsze, ponieważ wymaga wyeksportowania designu jako SVG i następnie przeniesienia do AE. Wprawdzie wstawienie pliku Illlustratora bezpośrednio do AE daje nam możliwość animacji, jednak nie pozwala na eksport do Lottie.

Animowanie w AE

After Effects jest bardzo skomplikowanym narzędziem oferującym duże możliwości
w zakresie animowania oraz nakładania różnych efektów w celu realizacji naszej animacji. Natomiast w przypadku Lottie nie możemy korzystać ze wszystkich dostępnych opcji.
Różne platformy dopuszczają bowiem odmienne opcje. Warto więc sprawdzić uprzednio pełną dokumentację obsługiwanych efektów.

Kiedy animacja jest gotowa, a jej efekt jest zadowalający, wówczas nadchodzi czas na jej eksport. Niezbędnym narzędziem do tego okazuje się plugin AE o nazwie Bodymovin.

Testy animacji

Zanim wyślemy naszą animację do implementacji na poszczególnych platformach, każdorazowo powinniśmy ją przetestować. Użyteczny w tym zakresie okazuje się serwis LottieFiles oraz natywne playery, które są możliwe do pobrania tutaj.



Poprzedni post Następny post