Eksport After Effects Animations do HTML5

Animacja w sieci jest tutaj, aby zostać. Jest we wszystkim, od subtelnych ruchów, które pomagają przynieść nasze Projekt UI Do życia, w pełni animowane doświadczenia na płótnie i eksperymenty Webgl, które są trudne, co kiedyś uważaliśmy za możliwe w przeglądarce.

Chociaż kreatywność dev i możliwości przeglądarek wzrasta, animacja w sieci od dawna była złym związkiem z filmem - coś, co społeczność graficzna Rucha zbliżyła się do ostrożności od lat. Pamiętaj, że jeśli masz złożoną stronę, aby utrzymać, twój hosting Usługa musi być w punkcie.

• Przewodnik po projekcie UI

Deweloperzy oparli się na bibliotekach, takich jak Greensock i Snap.Svg, aby wykonać ciężkie podnoszenie animacji przez JavaScript. Podczas gdy narzędzia te otrzymały dużą elastyczność, nie mogą porównać do precyzji i subtelności animacji, które można osiągnąć Po efektach CC. "s własna osi czasu i wykresy. Z perspektywy internetowej, po efektach bardzo dobrze nadaje się do ulepszenia i wypróbowania ruchu przed popełnieniem go do kodu.

Wchodzić Bodymovin. , przełomowe rozszerzenie dla Adobe po efektach, które eksportuje animację bezpośrednio z po efektach JavaScript, który ma być wyświetlany i manipulowany w przeglądarce. Stworzone przez Hernan Torrisi. , Bodymovin usuwa wiele barier między animatorem a deweloperem. Na poziomie bazowym wtyczka działa jako magiczna funkcja "renderowania dla sieci" Adobe zapomniała. W najbardziej zaawansowanym otwiera nowe możliwości interaktywnej animacji.

Bodymovin jest linkiem w łańcuchu narzędzi, wtyczek i systemów rosnących, aby spełnić niektóre z tych nowych możliwości. Lottie Airbnb. i Kloki na Facebooku. Oba budują na tych fundamentach - i w końcu przynoszą najpotężniejsze narzędzie animacji do sieci.

Dlaczego warto używać Bodymovin?

SVG przejęła przez Internet i przyniósł z nim oczekiwanie, że wszystko powinno być wysokiej jakości, lekkie i skalowalne. Bodymovin renderuje wszystko w twoim kompozycji, aby pięknie ostry SVG, który utrzymuje jakość wektora w dowolnym rozmiarze. Nie więcej kompromisów, aby rozjaśnić, że GIF lub zmuszanie użytkowników do załadowania naddrowych plików wideo.

Oprócz uproszczenia procesu eksportującego animacji, Bodymovin otwiera więcej potencjału dla programistów, aby uzyskać kreatywność z nowymi interaktywnymi doświadczeniami. Sprawdź Codepen dla niektórych fantastycznych sposobów, jakie rozszerzenie zostało użyte - z interaktywnych platform IK, aby animować tekst interaktywny tekst.

Aby uzyskać dalsze uproszczenie procesu internetowego, spróbuj Kreator strony internetowej .

Eksportowana animacja może być manipulowana w przeglądarce jak każdy inny element, umożliwiając nam myśleć o animacji jako interaktywne i eksperymentalne narzędzie w ramach projektowania stron internetowych. A teraz z powodu Bodymovina, przynosząc animacje do sieci nigdy nie było łatwiejsze. W tym samouczku dowiesz się, jak wyeksportować animację z po efektach i utworzyć prostą animację zapętlą, która odpowiada na kliknięcie użytkownika.

Jak przygotować pliki po efektach

Wsparcie dla funkcji efektów znacznie się poprawiły i możesz spodziewać się całkiem dobre wyniki prosto z pudełka. To jest powiedziane, twoje fantazyjne latające warstwy 3D nie będą grać ładnie, więc bądź świadomy limitów przed rozpoczęciem. Przed rozpoczęciem projektu zawsze pobieraj najnowszą wersję Bodymovin i sprawdź stronę GitHub, aby zobaczyć, które funkcje są aktualnie obsługiwane.

Nie bądź zbyt pospieszny, aby przejść do części zabawy ... schludne pliki robią porządny umysł. W tym przypadku pomogą również wziąć część dodatkowej pracy z dala od przeglądarki i dać ci jedwabisty gładki odtwarzanie. Po pierwsze, będziesz chciał upewnić się, że Twoja zawartość znajduje się na warstwach kształtowania efektów do pełnej mocy wektorowej. Aby przekonwertować dowolny plik ilustratora do warstw kształtu, możesz po prostu kliknąć prawym przyciskiem myszy i wybierz opcję Utwórz kształty z warstwy wektorowej. Wszelkie warstwy, które nie są kształtne na tym etapie, zostaną następnie przekształcone na obrazy i nie będą renderowane jako wektory.

Następnie należy sprawdzić swoje warstwy i podmuchacze; Jest dobra szansa, że ​​możesz uprościć zawartość kształtu bez poświęcania niczego. Spróbuj obniżyć liczbę grup, ścieżek i wypełnić tylko naga Essentials.

Uważaj na maski

Maski są łatwym sposobem narzucenia na tym etapie. Bądź świadomy, że maski Alpha będą działać z renderującym SVG, ale nie pojawią się, jeśli zdecydujesz się przełączyć na płótno. Maski mogą być drogie w wydajności, więc używaj ich skutecznie.

Wykonanie

Bodymovin działa w dwóch częściach - rozszerzeniem After Effects, który przekształca dane animacji do pliku JSON i odtwarzacza bodymovin.js, aby uwzględnić na swojej stronie internetowej, która może interpretować ten plik i renderować go w przeglądarce.

Myślisz, że twoje pliki są dobre do pójścia? Otwórz rozszerzenie nadwozia przez okno i GT; Rozszerzenia, a następnie Bodymovin.

Po trafieniu odświeżania zobaczysz listę wszystkich kompozycji w tym projekcie efektów. Wybierz wybrane kompozycje, a następnie wybierz folder docelowy w swoim projekcie internetowym. Kiedy jesteś szczęśliwy, kliknij Renderuj i obserwuj, jak się dzieje. Kiedy się skończysz, otrzymasz komunikat "gotowy". Gratulacje! Właśnie wyeksportowałeś plik JSON ze wszystkimi informacjami, które gracz musi odtworzyć animację.

Aby przetestować nowo wyeksportowaną animację, kliknij podgląd i GT; Aktualne renderuje i pamiętaj, aby zaroślić przez osi czasu, jak można zauważyć coś, co wygląda trochę inaczej niż oczekiwać. Jeśli spotykasz problemy z powrotem i sprawdź swoje warstwy - może to być nieobsługiwana funkcja lub wyrażenie stosowane po efektach.

Niektóre wtyczki po efektach, takie jak Rubberhose teraz obsługują Bodymovin. Rubberhose wykorzystuje warstwy prowadzące i ukryte warstwy. Aby je aktywować, kliknij przycisk Cog Ustawienia obok wybranej kompozycji i zaznacz potrzebne funkcje.

Jeśli wszystko wygląda dobrze, jest jeszcze jedna rzecz, którą musisz zrobić przed wyjazdem po efektach. Na tym etapie powinieneś mieć plik Fresh Data.Json opisujący swoją animację, ale nie ma odtwarzacza Bodymovina, aby go zinterpretować. W rozszerzeniu kliknij przycisk "Uzyskaj odtwarzacz" w prawym górnym rogu i zapisz go za pomocą pliku JSON.

Załaduj animację

Teraz masz wszystko, czego potrzebujesz, skoczmy prosto do kodu i ustanowaj podstawy, aby uzyskać animację wyświetloną na stronie.

Najpierw wykonaj nowy pojemnik #ANIM_CONTAINER. Aby trzymać animację. Musisz także dołączyć bodymovin.js. plik przed zamykającym znacznikiem ciała. Następnie powiedz Bodymovinowi wszystko o swojej animacji i załaduj go do nowego kontenera.

Przejdźmy przez krok po kroku:

 Var Container = Document.getElementByid ('Anim_Container');
// skonfiguruj naszą animację

var animdata = {
Pojemnik: pojemnik,
Renderator: "SVG",
AutoPlay: True,
Pętla: Prawda,
Ścieżka: "Data.json"
};
var anim = bodymovin.Loadanimation (animdata); 

Musisz zdefiniować wszystkie parametry animacji. Powiedz Bodymovin pojemnik, który chcesz załadować animację, a następnie powiedz mu, aby uczynić animację jako elementy SVG. Następnie powiedz animację, aby grać jak najszybciej załadować i chcesz, aby wrócić do początku, gdy się skończy.

Nieruchomość ścieżki informuje gracza Bodymovin, gdzie znaleźć plik danych JSON dla animacji. Ze względu na politykę udostępniania zasobów Cross-Origin (CORS) technika, której będziesz używany do uzyskiwania dostępu do pliku JSON, będzie działać tylko wtedy, gdy jesteś na serwerze lub lokalnym serwerze. Aby pracować lokalnie, możesz dokonać danych.json w pliku JavaScript, który przypisuje obiekt do zmiennej. W takim przypadku twoja konfiguracja może wyglądać tak:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var kontener = dokument.getElementByid ('Anim_container');
// skonfiguruj naszą animację
var animdata = {
Pojemnik: pojemnik,
Renderator: "SVG",
AutoPlay: True,
Pętla: Prawda,
AnimationData: Dane
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Odśwież stronę, a animacja powinna odtwarzać w pojemniku. Wybierz z narzędziami Dev, a zobaczysz, że każdy element w animacji jest teraz zawarty & lt; gt; Tagi i są przekształcane w czasie rzeczywistym.

Wygląda niesamowicie, prawda? Teraz powinieneś mieć piękną, wyraźną animację pokazującą w przeglądarce (bez nędznego znacznika wideo w widoku ...). Animacja będzie zawsze skalowana, aby pasowała do jego pojemnika, więc idź do przodu i wyślij go!

Bodymovin ma szereg potężnych metod sterowania animacją po załadowaniu. Wywołanie metody anim.pause () lub anim.setdirection () umożliwi Ci manipulowanie odtwarzaniem na różne sposoby. Spójrzmy na kilka przykładów:

• anim.setdirection (-1) odtwarza animację w odwrotnej
• anim.pause () i anim.play () rozpocznie się i zatrzyma animację
• anim.setspeed (0,5) zagram animację na pół prędkości

Dodaj interakcję

W tym następnym kroku zbadasz kilka różnych sposobów, aby dodać interakcję do animacji przez JavaScript. W tym przykładzie wyeksportujemy animację After Effects z dwiema sekcjami: sekcja A i sekcja B. Sekcja A Ramy zastosowań od jednego do 20 (trójkąt trzyma jego kij Pogo) Sekcja B używa ramek od 20 do 40 (trójkąt skacze w górę iw dół na patyku Pogo).

Teraz chcesz odtwarzać sekcję A w pętli (dopiero po kliknięciu użytkownika) odtwarzanie i sekcja pętli B. Możesz skorzystać z nieruchomości odtwarzania, aby podzielić animacje w ten sposób. Ta metoda zajmie dwa argumenty - tablicę z wartościami startowymi i końcowymi oraz druga boolean - rama ISFrame. Ustawienie tego na true będzie powiedzieć animację, aby przeczytać wartości startowych i końcowych jako ramek, podczas gdy fałsz powie mu, aby przeczytać te wartości w miarę upływu czasu.

 Anim.Pause ();
Anim.PlayEgments ([0,20], prawda); 

Dodanie tego mówi Bodymovin, aby wstrzymać przy pierwszej klatce i grać tylko animację od 0 do 20 klatek. Jak utworzysz animację za pomocą Pętla: True. Nieruchomość Będzie nadal odtwarzać sekcję A ponownie i ponownie.

Ustawmy cały przykład. Za pomocą tego przykładu będziesz używać dwóch segmentów animacji, więc utworzysz dwie funkcje:

 Var Container = Document.getElementByid ('Anim_Container');
// skonfiguruj naszą animację
var animdata = {
Pojemnik: pojemnik,
Renderator: "SVG",
autoodtwarzanie: false,
Pętla: Prawda,
Ścieżka: "Data.json"
};
var anim = bodymovin.loadanimation (animdata);
// Gdy animacja jest ładowana uruchomić naszą funkcję FirstLoop
anim.addeventlistener ("DOMOLICED", FILDOOP);
// Utwórz nasze funkcje odtwarzania
Funkcja Firstloop () {
Anim.PlayEgments ([0,20], prawda);
};
Funkcja SecondLoop () {
anim.playsegments ([20,40], prawda);
};
// Słuchaj zdarzenia kliknięcia
kontener.addeventlistener ("kliknij", funkcja (zdarzenie) {
anim.addeventlistener ("LoopComplete", secondLoop);
}); 

Tak trzymać! Teraz twoja animacja będzie zapętlić, dopóki użytkownik nie kliknie go, rozpocznie drugą pętlę. Jedynym problemem jest teraz, że taki skok jest bardzo gwałtowny i może zrujnować gładkość animacji.

Idealną sytuacją jest dołączenie trzeciej sekcji do animacji, która przejduje od trzymania kija Pogo, aby na niej skakać. Teraz twoja struktura będzie wyglądać w ten sposób:

• Firstloop. - Rama 0 do 20
• przejście - Rama 20 do 30
• drugi - Rama 30 do 50

Chcemy, aby twoja animacja pozostała w pierwszej pętli, aż zostanie kliknięta. W tym momencie będziesz chciał czekać na koniec pętli, w której jesteś obecnie i przechodzisz do przejścia. Po zakończeniu przejścia przejdź do drugiej pętli. To brzmi skomplikowane, ale zostań ze mną! Oto twój kod w całości:

 Var Container = Document.getElementByid ('Anim_Container');
// skonfiguruj naszą animację
var animdata = {
Pojemnik: pojemnik,
Renderator: "SVG",
autoodtwarzanie: false,
Pętla: Prawda,
Ścieżka: "Data.json"
};
var anim = bodymovin.loadanimation (animdata);
// Gdy animacja jest ładowana uruchomić naszą funkcję FirstLoop
anim.addeventlistener ("DOMOLICED", FILDOOP);
// Utwórz nasze funkcje odtwarzania
Funkcja Firstloop () {
Anim.PlayEgments ([0,20], prawdziwe);
};
Przejście funkcyjne () {
anim.PlayEgments ([20,30], prawda);
anim.removeeventlistener ("LoopComplete");
anim.addeventlistener ("LoopComplete", secondLoop);
};
Funkcja SecondLoop () {
anim.PlayEgments ([30,100], prawda);
anim.removeeventlistener ("LoopComplete");
};
// Słuchaj zdarzenia kliknięcia
kontener.addeventlistener ("kliknij", funkcja (zdarzenie) {
anim.addeventlistener ("LoopComplete", przejście);
}); 

Na kliknięciu używasz LoopComplete. słuchacz czekać, aż dojdziesz do ostatniej ramy pętli, a następnie uruchom przejście() funkcjonować. Tutaj usuniesz ostatni słuchacz, odtwarzaj następny zestaw ramek, a następnie zrób to samo. Po zakończeniu przejścia zadzwoni () .

Otóż ​​to!

Dziś pracowałeś z kilkoma cechami Bodymovin, ale jeśli jesteś zainteresowany Więcej informacji na temat wtyczki, można znaleźć ładunek informacji na temat Bodymovin Github. strona. Aby uzyskać więcej przykładów, sprawdź, jak zawsze imponująca kolekcja CodePen CodoMovin.

Mam nadzieję, że ten samouczek dał ci pomysł na różne sposoby, które można łączyć użycie po efektach i nadwozia, aby wytworzyć animację supercool dla sieci!

Możesz teraz skonfigurować animację, która ma zostać wyeksportowana do sieci, przynieś eksportowane pliki do przeglądarki i sprawić, aby animacja była respłacalna na kliknięcie. Pomyśl poza pliki MP4, które wcześniej korzystałeś i spojrzeć na Bodymovin do tworzenia znacznie bogatszych doświadczeń w sieci w przyszłości.

Bycie w stanie zaangażować animatorów ściśle w procesie rozwoju staje się coraz ważniejsze, a dziedzina animacji internetowej porusza się niesamowicie szybko. Z ciągłym rosnącą kolekcją nowych rozszerzeń, wtyczek i ram, animatorów i programistów mogą oczekiwać tego procesu, aby uzyskać łatwiejsze i lepiej z czasem. Nie mogę się doczekać, aby zobaczyć, co trzyma przyszłość.

Dostałem wiele plików do tworzenia kopii zapasowych? Sprawdź naszą magazyn w chmurze wybór.

Ten artykuł pierwotnie pojawił się magazyn netto. W 2017 roku. Subskrybuj tutaj .

Czytaj więcej:

• Tworzyć i animować wielokątów SVG
• 14 Niesamowity Adobe. Po wtyczkach efektów.
• Utwórz storyboardy do animacji internetowych