Ograniczenia Lottie i powszechne błędy w animacji After Effects

Typowe błędy popełniane przez nowicjuszy podczas tworzenia animacji w After Effects dla Lottie.

Czym jest Lottie?

Lottie to otwarte, wydajne i elastyczne rozwiązanie, które sprawia, że implementacja animacji jest prosta i płynna. Redukuje koszty pisania tysięcy linii kodu i pozwala programistom szybko wdrażać nawet najbardziej złożone animacje. Animacja Lottie umożliwia płynny przebieg pracy, przechowując wartości animacji w plikach JSON, tworząc bogate animacje przy mniejszym wysiłku i wykorzystując tryby mieszania bez łączenia układów.

Zespół Airbnb wprowadził Lottie w 2017 roku. To biblioteka dla iOS, Android i React Native, która renderuje animacje stworzone w After Effects. Lottie wykorzystuje pliki JSON eksportowane z darmowego wtyczki After Effects Bodymovin. Lottie wspiera różne funkcjonalności i możliwości, w tym typy klatek kluczowych, warstwy kształtów, kontury, wypełnienia, gradienty i inne funkcje After Effects.

Codzienny przebieg pracy w After Effects jest nieco inny niż tworzenie animacji dla Lottie. Zanim zaczniesz planować swoją przyszłą animację, musisz zrozumieć, że Lottie ma kilka ograniczeń, takich jak określona lista wspieranych funkcji After Effects czy zabronione wtyczki.

Jeśli Lottie jest dla Ciebie nowe i chcesz zaoszczędzić pieniądze klienta, korzystając z łatwego w użyciu narzędzia lub uniknąć godzin zmagania się z wdrożonymi animacjami, które nie działają, oto niektóre z najczęstszych błędów początkujących.

Błędy do unikania podczas tworzenia animacji w After Effects dla Lottie:

Stare nawyki

Po latach pracy jako animatorzy i projektanci, nabywamy wiele nawyków związanych z planowaniem i tworzeniem animacji. Używanie i poleganie na znanych sztuczkach, wtyczkach, presetach i wyrażeniach w After Effects to pierwszy powszechny błąd nowicjuszy.

Niestety, biblioteka Lottie nie obsługuje niektórych podstawowych funkcji After Effects, takich jak wyrażenia czy efekty (z menu Efekty). Zapomnij również o trybach mieszania, Luma Mattes i efektach warstwy (takich jak cień, nałożenie koloru), ponieważ te funkcje również nie są obsługiwane. Jednak Lottie obsługuje ścieżki przycinania jako część funkcjonalności dla warstw kształtów.

Platforma (Android, iOS lub Web), na której planujesz używać animacji, ma również znaczenie. Ponieważ nie wszystkie funkcje są obsługiwane na każdej platformie, musisz najpierw sprawdzić długą listę obsługiwanych funkcji.

Najbezpieczniejszym, ale może nie najłatwiejszym rozwiązaniem jest skupienie się głównie na „czystej” animacji kształtów i, jeśli musisz, użycie obsługiwanych funkcji. Utrzymuj swój projekt tak prosty, jak to możliwe, i twórz piękne animacje!

Nieporządne warstwy

Jest oczywiste, że Lottie najlepiej działa z warstwami kształtów, ale szczerze mówiąc, czasami rysowanie ilustracji wektorowych w After Effects jest bolesne. Oczywiście możemy importować treści z oprogramowania takiego jak Illustrator i konwertować każdy wektorowy zasób na warstwy kształtów AE. Dla Sketch instrukcje są jeszcze bardziej skomplikowane. Niemniej jednak, należy być ostrożnym co do tego, co dokładnie zaimportowałeś do swojej kompozycji.

Oczyść swoje warstwy kształtów zaraz po zaimportowaniu z Adobe Illustratora

W większości przypadków, gdy dodajesz zasób przygotowany w innym oprogramowaniu i konwertujesz go na kształt After Effects, w warstwach będą ukryte niepotrzebne elementy. Możesz znaleźć takie rzeczy jak dodatkowe ścieżki scalania lub grupy. Te bezużyteczne elementy nie wpływają zbytnio na animację w podglądzie w AE. Jednak po długiej, ciężkiej pracy, gdy eksportujesz to i podglądasz z Lottie, zaczynają dziać się jakieś tajemnicze, złe rzeczy. Zwykle animacja jest w jakiś sposób uszkodzona i działa dziwnie, nieprawidłowo.

Pierwszym zadaniem, gdy zauważysz problem, jest zagłębienie się w każdą warstwę kształtu i usunięcie ścieżek scalania lub grup, aby uczynić kompozycję schludną. Niestety, w niektórych przypadkach musisz zbudować ją inaczej i animować jeszcze raz. Zalecałbym oczyszczenie tych warstw zaraz po imporcie, aby uniknąć możliwych problemów w przyszłości.

Dodatkowa wskazówka: Usuń zasoby z kompozycji po ich konwersji na warstwy kształtów. Unikniesz eksportowania ich z JSON.

Niepotrzebne klatki kluczowe

Jedną z najważniejszych zalet Lottie jest lekki plik JSON, który jest eksportowany. Programiści szaleją na punkcie małych rozmiarów swoich stron internetowych i aplikacji, a Ty powinieneś również. Bądź świadomy konsekwencji długiego czasu ładowania i opóźnionych animacji.

Przez przypadek możesz dodać niechciane kilobajty do swojej idealnej animacji. Pierwsza rada to stosowanie techniki „parenting” w każdej sytuacji, ponieważ dodatkowe klatki kluczowe oznaczają dodatkowe kilobajty. Duplikowanie tych samych klatek kluczowych na powiązanych warstwach dodaje niepotrzebne linie kodu.

Animowanie wzdłuż ścieżki lub używanie presetów takich jak Autotrace czy Wiggler generuje wiele dodatkowych klatek kluczowych i może sprawić, że rozmiar Twojego pliku JSON stanie się bardzo problematyczny.

Nie tylko duża liczba klatek kluczowych oznacza problemy, ale także rozmiar Alpha Matte i Mask ma znaczenie i może znacząco wpłynąć na wydajność. Jeśli musisz to użyć, pokryj jak najmniejszy obszar. Musisz znaleźć równowagę między tworzeniem animacji a wydajnością jej działania.

Nie sprawdzaj dwa razy

Chociaż wspomniałem o tym wcześniej, postanowiłem napisać osobny akapit na temat przeglądania swojej animacji, ze względu na znaczenie tego tematu.

Testuj swój projekt w trakcie procesu animacji

W niektórych przypadkach animacja po eksporcie z Bodymovin i podglądaniu jej w Lottie nie wygląda tak, jak animacja, którą stworzyłeś w After Effects. Oszczędź czas, nerwy i energię, unikając ponownego tworzenia swojej animacji, sprawdzając wspierane funkcje Lottie i testując swój projekt wcześniej.

Przeglądaj stan swojej animacji w trakcie procesu animacji, a nie tylko na końcu. Łatwiej będzie znaleźć ewentualne przeszkody i problemy, jeśli sprawdzisz niedokończoną animację w podglądzie Bodymovin w After Effects, na stronie Lottie lub za pomocą aplikacji Lottie.

Jeśli już masz trudności z złożoną kompozycją, nie jest łatwo zidentyfikować obszary, które powodują problem. Musisz przejść przez całą strukturę, zaczynając od wyłączenia niektórych grup warstw i eksportowania części animacji. Podglądaj to w Lottie i sprawdź, która część generuje komplikacje. Po odkryciu problemu powinieneś zbadać te warstwy, usunąć dodatkowe ścieżki lub zbudować to inaczej.

Bonus: Nieangielskie Problemy z After Effects

Problemy z gradientami nie są unikalne, ale byłem zszokowany, gdy po raz pierwszy znalazłem rozwiązanie. Najczęstszym problemem jest to, że kolorowy gradient jest eksportowany jako czarno-biały. Gdy twoje kolory nie wydają się działać, sprawdź, czy twój After Effects jest w języku angielskim i czy wszystkie twoje warstwy i kompozycje mają unikalne nazwy w języku angielskim. To nie działa za każdym razem, ale sprawdziło się podczas moich testów.

Potęga Lottie

Pomimo kilku ograniczeń, Lottie to potężne narzędzie. Przede wszystkim, proces pracy jest naprawdę prosty. Projektanci mogą tworzyć bogate animacje lottie z złożonymi interakcjami, nie tracąc przy tym dużo czasu, a deweloperzy mogą łatwo przekształcać te animacje w kod. Projektanci mogą po prostu eksportować swoje animacje z After Effects, a deweloperzy mogą łatwo dodać je do zasobów swojej aplikacji. Poza tym, Lottie jest wieloplatformowe, więc możesz używać tego samego pliku JSON zarówno w sieci, jak i w aplikacjach iOS. Warto również rozważyć użycie Lottie ze względu na skalowalność animacji wektorowych i lekkie pliki eksportowe.

Jeśli masz jakiekolwiek problemy z tym procesem, polecam przeszukać Github Airbnb lub zamieścić tam swoje problemy. Zauważyłem, że wsparcie jest naprawdę pomocne i odpowiada na każde zapytanie.

Teraz, gdy znasz ograniczenia Lottie, jesteś gotowy, aby pobrać to, co potrzebne, aby zacząć i dowiedzieć się, jak działa Bodymovin, aby rozpocząć swój pierwszy projekt! W końcu, po latach zmagań, wdrożenie animacji jest bezwysiłkowe i łatwe.