Webové animace v AE

Sdílet článek na Facebook
Sdílet článek na Twitter
Využívání vektorové grafiky namísto exportovaných rastrových obrázků na webu je možné díky podpoře SVG formátu. Jak ale SVG rozpohybovat? Podíváme se na ten nejjednodušší způsob vytvoření komplexních vektorových animací. Jedná se o využití javascriptové knihovny Lottie.js a pluginu Bodymovin pro Adobe After Effects.
Sdílet článek na Facebook
Sdílet článek na Twitter

Vetorová grafika formátu SVG je ze své podstaty (jedná se o značkovací jazyk) velmi vhodná pro webové animace. SVG můžeme animovat jak pomocí javascriptu, tak prostými CSS animacemi. Pro vytvoření skutečně komplexní animace je však nutné využít způsob, který nám dá perfektní kontrolu nad klíčovými snímky animace. Prostředí programu Adobe After Effects (AE) s klasickým uživatelským rozhraním pro animování se tak jeví jako ideální řešení.

Knihovna Lottie a plugin Bodymovin jsou dílem designového oddělení známé služby Airbnb, která zprostředkovává krátkodobý pronájem ubytování. Pro prohlédnutí dokumentace a správný postup při instalaci pluginu navštivte Airbnb.design/lottie, případně GitHub.

1 Lottie a Bodymovin

Bohužel plugin Bodymovin je podporován AE až od verze CC (2014) a na starších CS jej nespustíte. Zároveň (zatím) nepodporuje všechny funkce AE a na Vaše animace tak musíte využívat pouze funkce positions, strokes, solids, shapes, masks, alpha mattes, trim paths a dash patterns. To je však dostačující pro téměř jakoukoliv vektorovou animaci, pro cvik je však nejlepší začít s animací čárovou.

2 Omezení použití

Příprava SVG

SVG all SVG animate

Před importem vektorové grafiky do AE je nutné soubor připravit v Illustratoru. To nám usnadní následnou práci při animaci. Doporučuji rozdělit jednotlivé animované prvky do vrstev a ty následně přehledně pojmenovat dle obsahu. Statické části grafiky pak mohou zůstat ve společné vrstvě, kterou nebudeme dále upravovat. Zároveň je vhodné veškeré čárové animace (v tomto příkladě vrstvy clouds, water a coffee) vykreslit v jejich plné délce, jejich začátek a konec budeme ovlivňovat pomocí funkcí AE.

3 Rozdělení vrstev
4 Animované vrstvy

After Effects

Import AE Trim paths

Při importu připarveného souboru formátu .ai do AE máme na výběr z několika možností. Vybereme možnost "Import Kind: Composition" - díky ní se soubor v AE rozdělí na jednotlivé vrstvy, které jsou shodné s vrstvami vytvořenými v Illustratoru. Rovněž velikost kompozice se bude shodovat s původní velikostí grafiky.

Vrstvy kompozice mají sice správné rozdělení, ale je nutné je dále převést na tvary (Shapes). To provedeme pomocí pravého kliknutí myši a příkazu "Create Shapes from vector layer." Čárové tvary pak připravíme na animaci pomocí funkce "Trim Paths," kterou najdeme v malém menu "Add" u jednotlivých vrstev.

5 Import souboru
6 Funkce Trim Paths

Export animace

Následně vytvoříme běžnou animaci pomocí keyframes. Následuje už jen jednoduchý export pomocí pluginu Bodymovin. Ten najdeme v hlavní nabídce pod položkou "Window -> Extensions -> Bodymovin." Následně zatrhneme kompozici, kterou chceme exportovat a určíme místo uložení souboru .json. Ten obsahuje veškeré údaje o naší javascriptové animaci.

7 Export z AE

Pro spuštění animace na webu pouze potřebujeme do naší stránky vložit javascript "lottie.js", který najdete, ke stažení na GitHubu projektu. Exportovanou animaci lze na pak webu pouštět různou rychlostí, pozpátku, ve smyčce, případně vracet do konkrétního bodu. Můj výsledek si můžete prohlédnout v přiloženém codepenu.


8 Výsledná animace

< zpět