Jak stworzyć animację LottieFiles w After Effects?

LottieFiles stworzyła szybki, skalowalny, edytowalny typ pliku po renderowaniu, dzięki czemu możesz łatwo zaangażować się i tworzyć animacje w tym formacie. Używając Adobe After Effects i niektórych wtyczek, możesz stać się częścią szumu najnowszego typu plików: Lottie.

Co to jest loteria?

Lottie lub dotLottie to typ pliku, który szturmem podbija twórców stron internetowych. Być może stworzyłeś animacje, które chcesz uwzględnić w swoich projektach, niezależnie od tego, czy dotyczą mediów społecznościowych, projektowania stron internetowych, czy projektowania UX i interfejsu użytkownika. I prawdopodobnie zapisujesz swoje animacje jako pliki GIF, SVG lub PNG. Plik Lottie to wszystkie dobre części tych typów plików, ale mniejsze, szybsze i łatwiejsze do edycji po renderowaniu.

LottieFiles to ogromna baza gotowych animacji zapisanych w formatach Lottie lub JSON. Te animacje są renderowane w czasie rzeczywistym, co pozwala na szybszą wysyłkę do Twoich projektów. Nie trzeba czekać na pobranie tych plików; pojawią się zaraz po otwarciu strony.

Aby dowiedzieć się więcej o LottieFiles, sprawdź nasz wprowadzenie do Lottie.

Pierwsze kroki

Zamierzamy stworzyć Lottie za pomocą Adobe After Effects, ale istnieje inne oprogramowanie, którego możesz użyć do stworzenia animacji Lottie. Możesz użyć programu Adobe Animate z wtyczką LottieFiles, aby utworzyć Lottie. Możesz także przekonwertować animację w formacie SVG na Lottie, jeśli już stworzyłeś animację w tym formacie.

After Effects to nasz najlepszy wybór, jednak biorąc pod uwagę, że LottieFiles został stworzony pierwotnie do użycia w After Effects. Zacznijmy.

1. Stwórz swoją animację

Aspekt animacji Lottie jest taki sam, jak w przypadku każdego innego formatu. Ilustrację naszej animacji stworzyliśmy za pomocą programu Adobe Illustrator. Dzięki temu warstwy są oddzielone i gotowe do zaimportowania do programu After Effects. Po zaimportowaniu ilustracji możesz dostosować warstwy kompozycji do końcowej animacji.

Animacje Lottie działają w ciągłej pętli, więc weź to pod uwagę jako punkty końcowe i początkowe projektu. Animacja powinna być prosta i trwać około trzech sekund.

2. Pobierz wtyczki

Istnieją dwie wtyczki, których możesz użyć do stworzenia pliku Lottie: wtyczka LottieFiles lub wtyczka Bodymovin. Oba są dostępne dla After Effects, ale wtyczkę LottieFiles można również znaleźć w innym oprogramowaniu. Każdy z nich robi nieco inne rzeczy, ale teraz skupimy się na wtyczce LottieFiles.

Aby pobrać wtyczkę LottieFiles, przejdź do Strona wtyczki LottieFiles After Effects. Znajdziesz dwie opcje pobierania.

Opcja po prawej stronie wymaga Menedżer rozszerzeń od Anastasiy który działa zarówno z komputerami Mac, jak i Windows. Po pobraniu Menedżera rozszerzeń pobierz wtyczkę ZXP ze strony LottieFiles.

Po pobraniu wtyczki ZXP otwórz Menedżera rozszerzeń Anastasiy, kliknij Po efektach, wybierz wtyczkę LottieFiles z listy i naciśnij Zainstalować.

Wróć na stronę wtyczki LottieFiles, pobierz również wtyczkę Adobe Exchange; otwórz aplikację Creative Cloud na komputer i zainstaluj wtyczkę. Wróć do gotowych animacja w After Effects.

Niektóre osoby mają błąd uprawnień podczas korzystania z tych wtyczek. Aby uniknąć tego problemu, przejdź do Po efektach > Preferencje > Skrypty i wyrażenia > Skrypty aplikacji i zaznacz pole Zezwalaj skryptom na zapisywanie plików i dostęp do sieci.

Gdy to zrobisz, wyskakujące okienko LottieFiles poprosi Cię o zalogowanie. Jeśli nie masz jeszcze konta LottieFiles, nadszedł czas, aby je utworzyć.

3. Wyeksportuj swoją loterię

Po zainstalowaniu wtyczek LottieFiles możesz renderować animację Lottie. Będąc na gotowej kompozycji animacji, kliknij Okno > Rozszerzenia > LottieFiles. Spowoduje to wyświetlenie wyskakującego okienka z nazwami twoich kompozycji. Kliknij Zielona strzałka obok nazwy twojej kompozycji, otworzy się okno renderowania Lottie.

Po kilku sekundach Twoja animacja pojawi się w wyskakującym okienku. Animacja będzie odtwarzana w czasie rzeczywistym w pętli. Tutaj możesz wybrać, czy chcesz zapisać swoją animację, czy przesłać ją do biblioteki LottieFiles.

Kliknięcie Zapisz jako da ci dwie opcje eksportu: Lottie JSON (*.json) lub dotLottie (*.lottie). Plik dotLottie to spakowany plik zawierający metadane, których tak naprawdę nie potrzebujemy do eksportowania. Wybraliśmy się z Lottie JSON.

Wyeksportowany plik będzie plikiem tekstowym, a nie plikiem animacji wizualnej; tak działają pliki JSON. Ale co, jeśli chcesz, aby animacja była gotowa? Zobaczmy, jak możesz uzyskać do niego dostęp.

Jak możesz wykorzystać animację Lottie

Aby przesłać swoją Lottie do biblioteki LottieFiles, kliknij Wgrywać. To będzie renderować przez kilka sekund. Następnie kliknij przycisk z kulą ziemską. Spowoduje to otwarcie strony LottieFiles, na której możesz przesłać swoją animację Lottie do biblioteki LottieFiles. Nazwij swój plik i naciśnij Przekazanie.

Gdy animacja zostanie zatwierdzona w bibliotece LottieFiles, możesz użyć wtyczki LottieFiles w oprogramowaniu takim jak Adobe XD, Figma lub Sketch, aby wysłać animację do projektu.

Istnieją inne sposoby wykorzystania animacji LottieFiles poza bezpośrednio w bibliotece wtyczek. Możesz dalej edytować swoją animację Lottie w oknie przeglądarki. Oferuje podstawowy panel warstw; możesz zmienić kolor tła, prędkość odtwarzania, liczbę klatek na sekundę i kilka innych rzeczy.

Z okna Handoff możesz pobrać swoją animację jako Plik JSON do wdrożenia w web development i projekt, lub możesz przekonwertować go na GIF do bardziej konwencjonalnych zastosowań. Możesz także osadzić swoją animację za pomocą kodu HTML, a dostępne są również opcje iOS i Android, dzięki czemu możesz przesłać animację do swojego projektu internetowego.

Osadzenie kodu HTML Lottie umożliwia edycję kodu w celu edycji animacji. Możesz zmieniać kolory i rozmiary bezpośrednio w kodzie, gdy dodasz go do swojej witryny.

Pobranie aplikacji LottieFiles na telefon umożliwia zeskanowanie kodu QR animacji, aby wyświetlić podgląd animacji w aplikacji. Możesz także użyć klawiatury LottieFiles i upuścić swoją dotLottie jako komentarz w niektórych postach.

Stwórz Lottie w After Effects

Chociaż nadal może wydawać się to niekonwencjonalnym typem pliku, ponieważ nie możesz po prostu przesłać animacji bezpośrednio do mediów społecznościowych, takich jak możesz z GIF lub PNG, Lottie zapewnia wiele korzyści dla twórców stron internetowych i projektantów, którzy używają wtyczek lub kodów do osadzania w swoich projekty.

Pliki Lottie i JSON oszczędzają miejsce i czas ładowania oraz zachowują jakość w porównaniu z tradycyjnymi typami plików. LottieFiles nieustannie tworzy nowe sposoby realizacji projektów, możliwości są nieograniczone.

Jak stworzyć animację ruchu za pomocą Procreate

Tworzenie animacji ruchu w Procreate jest łatwe, a ten artykuł pokaże Ci, jak to zrobić.

Czytaj dalej

O autorze