Czym jest animacja Lottie? Wszystko, co musisz wiedzieć o Lottie

Tworzenie złożonych animacji na Androida, iOS itp. to oczywiście długotrwały proces. To nawet jako projektant lub animator, czasami jest to proces łamigłówki.

Musisz albo przesłać duże pliki graficzne dla każdego rozmiaru ekranu, albo napisać tysiąc wierszy kruchego, trudnego do utrzymania kodu. W rezultacie, pomimo tego, że jest potężnym narzędziem do komunikowania pomysłów i tworzenia atrakcyjnych doświadczeń użytkownika, większość aplikacji nie korzysta z animacji wideo.

Nie musi tak być! Te problemy już dawno minęły, a istnieje wiele przydatnych formatów plików, platform itp., które można wykorzystać do uproszczenia przepływu pracy. Jednym z takich formatów jest Lottie.

Na tym blogu opowiem Ci o tym ciekawym i poręcznym formacie.

Co to jest Lottie?

W latach poprzedzających Lottie projektanci ruchu tworzyli swoje animacje, a następnie wysyłali je do twórców oprogramowania, aby mogli je wprowadzić w życie. Opcje realizacji były nieodpowiednie i miały ograniczony zakres.

Powszechną praktyką dla programistów było eksportowanie animacji w formatach niskiej jakości lub próba odtworzenia projektu animacji w kodzie od podstaw, najlepiej jak potrafili. Nic dziwnego, że nie była to najskuteczniejsza technika i często skutkowała animacją, która była nieefektywna i wyglądała zupełnie inaczej niż zamierzona przez projektanta ruchu.

Hernan Torrisi wpadł na pomysł wyeksportowania reprezentacji animacji utworzonej w Adobe After Effects i wygenerowania animacji w czasie wykonywania w 2015 roku. Do iteracji projektu animacji wykorzystano możliwości skryptów After Effects oraz wtyczkę do Adobe After Effects o nazwie Bodymovin został opracowany, który wyprodukował opis animacji w formacie JSON.

Wraz z odtwarzaczem dla przeglądarki dostarczył pierwszy w historii renderer dla formatu, który został zbudowany przy użyciu Javascript.

Od momentu wprowadzenia w 2017 r. LottieFiles zapewnia animatorom i programistom platformę do szybkiego testowania, udostępniania i prezentowania swoich animacji w Internecie. Format plików oparty na animacji Lottie (JSON) umożliwia projektantom bezproblemowe przesyłanie animacji między platformami.

Lottie została nazwana na cześć Charlotte „Lotte” Reiniger, niemieckiej reżyserki filmowej, która jest powszechnie uważana za czołową światową pionierkę animacji sylwetki. Nie ma ograniczeń na obsługiwanych platformach. Dostęp do niej można uzyskać za pośrednictwem iOS, Androida i Internetu.

Kombinacja komponentów wektorowych i rastrowych jest używana w Lottie do tworzenia wysokiej jakości animacji, która ma charakter wieloplatformowy. Dążąc do określonych elementów i parametrów animacji, oferuje możliwość dodawania interaktywności i zmiany parametrów w czasie wykonywania.

Są to małe pliki, które mogą być używane na dowolnym urządzeniu i mogą być skalowane bez utraty jakości. Pliki Lottie mogą być ponownie wykorzystywane przez programistów w ich programowaniu.

Co może zrobić Lottie?

Lottie pozwala odtwarzać animacje na dowolnym urządzeniu internetowym lub mobilnym w wysokiej jakości, a dzięki inteligentnym ustawieniom sprawisz, że animacja będzie bardziej atrakcyjna.

Należy pamiętać, że podczas tworzenia dla Lottie pliki JSON muszą być jak najmniejsze dla platformy mobilnej. Używaj technik rodzicielskich, kiedy tylko jest to możliwe.

Dodatkowy kod jest dodawany podczas duplikowania tych samych klatek kluczowych na podobnej warstwie. W miarę możliwości należy używać animacji klatek kluczowych ścieżki.

Większość miejsca zajmuje dodawanie danych dla każdego wierzchołka w każdej klatce kluczowej.

Automatyczne śledzenie lub technika wiggler zapewnia klatkę kluczową dla każdej klatki, ale zwiększenie rozmiaru pliku JSON może mieć negatywny wpływ na wydajność. Powinny być zrównoważone składem, aby działały płynnie i wydajnie.

Gdzie możesz użyć Lottie?

Według dewelopera, Lottie's można uzyskać z praktycznie dowolnej platformy, w tym sieci i urządzeń mobilnych. Innymi słowy, można je łatwo zintegrować zarówno z aplikacjami mobilnymi, jak i aplikacjami internetowymi.

W niektórych usługach przesyłania wiadomości animacje Lottie mogą być nawet używane jako naklejki. Nie ogranicza się do sieci lub urządzeń mobilnych pod względem ograniczeń technicznych. W aplikacjach komputerowych, a także niektórych smartwatchach, możesz z tego skorzystać.

Różne wieloplatformowe wtyczki i biblioteki są dostępne dla sieci Web, iOS, Android, Flutter, React, Vue, Angular i Sketch. Figma, After Effects i inne są obsługiwane w plikach animacji Lottie.

Dlaczego warto korzystać z animacji Lottie?

To naturalne, że zastanawiasz się, dlaczego powinieneś używać animacji Lottie, gdy dostępnych jest tak wiele innych opcji.

Dlatego:

Można w nią grać w dowolnym miejscu

Odtwarzacz internetowy Lottie jest kompatybilny z każdą przeglądarką obsługującą współczesny Javascript, co oznacza, że ​​w Lottie można grać na dowolnej nowoczesnej przeglądarce obsługującej JavaScript. Ponadto, ponieważ najnowsze zestawy programistyczne oferują dynamiczną zawartość sieciową, integracja Lottie z dowolnym programem na komputerze stacjonarnym lub laptopie staje się prostsza.

Dostępne są również biblioteki do implementacji odtwarzania Lottie na platformach IOS, Android i Tizen, dzięki czemu można używać Lottie w aplikacjach mobilnych na zdecydowanej większości smartfonów i tabletów. Animacje Lottie są szybko adoptowane przez duże firmy w celu ulepszenia ich mobilnych frontendów, podczas gdy startupy wykorzystują Lottie w swoich projektach produktów, aby oddzielić się od konkurencji.

Łatwy w utrzymaniu

Animacje Lottie są zapisywane jako zwykły tekst, co oznacza, że ​​są widoczne dla ludzi. W rezultacie wykorzystanie Lottie do tworzenia interfejsów aplikacji skraca czas debugowania, a także łączny czas wdrażania. Ponadto, zwykłe pliki tekstowe Lottie są mniej skomplikowane w utrzymaniu i dostrajaniu, ponieważ nie wymagają użycia specjalistycznych narzędzi programowych.

Dane tekstowe w animacjach Lottie mają strukturę JSON, co oznacza, że ​​są gotowe do asymilacji do JavaScript lub dowolnego innego środowiska programistycznego aplikacji, które akceptuje JSON, bez potrzeby dodatkowego parsowania lub przetwarzania. W rezultacie Lottie stała się najczęściej używanym i przenośnym formatem animowanej grafiki na świecie.

Jest dynamiczny

Struktura JSON danych Lottie pozwala na łatwą manipulację i zamianę ich zawartości na wielu stopniach szczegółowości, od wartości ułamkowych do dużych porcji obiektów. Ponadto materiał zastępczy może być ładowany dynamicznie z dowolnej witryny. W rezultacie Lottie jest obecnie najbardziej dynamicznym i powszechnie używanym formatem grafiki animowanej.

Skalowalność

Ponieważ konwencjonalne wizualizacje są nieporęczne, wiele firm stosuje je oszczędnie w interfejsach użytkownika aplikacji. Zbyt duża liczba grafik może zwiększyć koszty przechowywania i pobierania, zwłaszcza w przypadku kontekstowego wyszukiwania i sortowania danych.

W przypadku dużych rozwiązań pliki Lottie mogą zminimalizować koszty przechowywania i kontekstowego sortowania/przeszukiwania. Ponieważ Lotties są dynamiczne, aplikacje muszą ładować tylko te komponenty, które wymagają aktualizacji w danym momencie.

Najwyższa jakość

Wykorzystuje wektory do reprezentowania wymiarów form geometrycznych, a także kwalifikatory do definiowania ich cech i sposobu poruszania się podczas animacji. Odtwarzacz Lottie renderuje w natywnej rozdzielczości ekranu. Gwarantuje to, że animacje Lottie są zawsze pokazywane w najlepszej możliwej jakości.

Użytkownik powiększa animację Lottie, a gracz przerysowuje ją w natywnej rozdzielczości. Oznacza to, że animacje Lottie nigdy nie są pikselowane, bez względu na to, jak są powiększone.

W sednie

Interfejsy użytkownika, które są szybkie, dynamiczne i eleganckie, można uzyskać za pomocą Lotties. Zużycie przepustowości przez klienta ulegnie znacznemu zmniejszeniu w wyniku mniejszego zapotrzebowania na pamięć masową dla hostowanego składnika aplikacji.

Jeśli nie możesz się doczekać tworzenia filmów animowanych Lottie, najlepszym miejscem, w którym chciałbyś być, jest webdew.

W webdew filmy wyjaśniające, animacje postaci, animacje 2D i animacje tablic są szeroko tworzone przez wykwalifikowanych animatorów i grafików ruchu. Skontaktuj się z nami, aby dowiedzieć się więcej.

Redaktor: Amrutha