Wstęp do Lottie

Format Lottie umożliwia projektantom tworzenie i wdrażanie zaawansowanych i dopracowanych wizualnie animacji bez konieczności angażowania zespołu programistów. W rzeczywistości dzięki Lottie możesz łatwo dodawać lekkie i łatwo skalowalne animacje do dowolnej natywnej aplikacji, dzięki czemu jest bardziej atrakcyjna dla użytkowników. Sprawdź, co jeszcze powinieneś wiedzieć o plikach Lottie i dowiedz się, jak efektywnie wykorzystać je w swoim projekcie.

Co to jest Lottie?

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

Historia pochodzenia Lottie

Lottie wzięła swoją nazwę od inicjatywy Hernana Torrisiego, który wpadł na pomysł eksportowania reprezentacji animacji w Adobe After Effects i renderowania animacji w Internecie. Wykorzystał możliwości skryptowe Adobe After Effects do przeniesienia projektu 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.