Animace je důležitou součástí každého projektu, který při správném použití může udělat dobrý dojem, dodat vašemu designu chuť a přilákat co nejvíce pozornosti.
Zde je animační průvodce s tipy a triky, jak vylepšit vzhled vašeho návrhu.
Zdroj
Netrix
Jak lze použít animaci?
Prezentace konceptu
Často používáme animace, abychom udělali dobrý první dojem. Motion design oživuje naše uživatelské rozhraní a ukazuje, jak budou všechny funkce fungovat bez zásahu programátora. Zde je jeden koncept, ve kterém jsme pomocí animace prezentovali naše nápady klientovi.
Práce se zdrojem designu
Import z náčrtu
Import z aplikace Sketch je snadný. K tomu potřebujete plugin AEUX pro After Effects a Sketch.
- Uspořádejte vše do skupin a správně pojmenujte všechny vrstvy
2. Konfigurujte parametry importu v pluginu AE. V nastavení pluginu si můžete vybrat, kam se má importovat: do nové nebo stávající kompozice. Plugin také může předem vytvářet kreslicí plátna, skupiny, měnit snímkovou frekvenci a velikost kompozice atd. (podrobné informace o nastavení pluginu si můžete přečíst zde).
3. Přejděte na panel doplňků, vyberte AEUX a klikněte na „Odeslat do AE“. Nejnovější verze pluginu automaticky otevře zdrojový kód z aplikace Sketch v After Effects.
Import z Figmy
K tomu budete potřebovat pomocný plugin AEUX pro After Effects a online plugin Figma (pokyny zde).
Po instalaci:
1. Nezapomeňte si stáhnout písma použitá ve vašem návrhu.
2. Ujistěte se, že jsou všechny vrstvy pojmenovány správně. To je velmi důležité, jinak strávíte spoustu času organizováním své práce v After Effects.
3. Upravte parametry importu v After Effects, vše je stejné jako při práci s aplikací Sketch.
4. Přejít na panel doplňků & gt; vývoj & gt; AEUX. V případě potřeby změňte nastavení a klikněte na odeslat do AE. Nejnovější verze pluginu automaticky otevře zdrojový kód od společnosti Figma v After Effects.
Prepare After Effects source
Předkomponovat
Precompose znamená novou kompozici s animací, kterou se z nějakého důvodu rozhodnete udělat samostatně. To se nejčastěji provádí k oddělení jedné logicky hotové práce od ostatních.
Jak víme, existují dva typy lidí:
- Milují předběžnou kompozici a používají je všechny time;
- Raději nepoužívají předkompozici.
Používáme je pouze k uspořádání neanimovaných nebo jen mírně animovaných částí návrhu: záhlaví , zápatí, karty a panely nástrojů.
K čemu? V procesu animace často ztrácíte flexibilitu. Pokud například potřebujete animovat posouvání a mít animace pro části obrazovky, ztratíte spoustu času pohybem tam a zpět v kompozicích.
Některé efekty vrstev navíc nemusí fungovat podle očekávání pokud jste vytvořili animaci v předkompozici (ohyb CC, 3D vrstvy atd.).
Organizace barev a dědičnost
Pokud nepoužíváte Precompose, musíte své vrstvy uspořádat. < /p>
Ke seskupování vrstev a objektů NULL vždy používáme barevné kódování, což nám pomáhá rychleji se animovat a najít vrstvy, které potřebujeme.
Při animaci změňte barvu pro všechny vrstvy na každé animované obrazovce (jako na levém obrázku ) nebo barevně odlišené části obrazovky (jako správný obrázek). Máme například obrazovku s nadpisem a pak jsou zde 3 sloupce obsahu.
První možností je použít stejnou barvu na všechny prvky obrazovky, druhou je použít na každý sloupec jedinečnou barvu. Poté vytvořte objekty NULL a nadřazte všechny vrstvy obrazovky této NULL.
Animační tipy
Když příprava skončí, jste připraveni začít s animací. Neučíme vás, jak animovat základní parametry, ale zde je několik osobních tipů, které jsme se naučili sami.
Zásadní bezplatné pluginy, které vám usnadní práci
Motion Tools
Bez tohoto pluginu si už ani nedokážeme představit den animace. Pomáhá zefektivnit váš pracovní postup a ušetří vám spoustu času. V tomto videu najdete všechny pokyny k jeho použití.
Snadné kopírování
Toto je další jednoduchý, ale šikovný plugin. Má pouze jednu jednoduchou funkci – kopírování dynamiky z jednoho klíčového snímku do druhého. Jak to použít? Stačí vybrat klíčové snímky, když už máte nastavenou dynamiku, klikněte na „kopírovat“, vyberte požadované rámce, pro které potřebujete stejnou dynamiku, a klikněte na „vložit“. Snadné a užitečné!
Soubory Bodymovin a Lottie
Pluginy používáme také k exportu našich ilustrací, předběžných načtení a animací ikon. Tyto doplňky převádějí kompozice After Effects do souborů JSON, které lze použít v Nativní iOS, Android a React bez úprav.
Změkčení
Dobré změkčení je ústředním bodem animace a klíčem ke všemu. Jak se tedy naučíte dobře změkčovat?
V pohybu uživatelského rozhraní budete neustále animovat dvě věci: posouvání a rozšiřování.
K jejich animaci se používají standardní vlastnosti: poloha, krytí, měřítko a otočení.
Například animujete posouvání: všechny vaše vrstvy jsou připravené a uspořádané, pro svitek a nadřazené vrstvy jste již vytvořili NULL (mluvili jsme o vytváření NULL pro každou obrazovku). Nyní je musíte nadřadit k posouvání NULL. Dobře, čas dělat zázraky.
- Klikněte na scroll NULL a aktivujte vlastnost Position (stiskněte P na klávesnici);
- Vytvořte klíčové snímky pro počáteční a koncový bod;
- Vyberte klíčové snímky a přejděte do editoru grafů. Vyberte graf rychlosti, pokud již není aktivní.
- Upravte křivku podle obrázku.
- Vraťte se na časovou osu a v případě potřeby upravte čas .
Častá chyba! Když máte konečně dokonalé posouvání, snažíte se všude používat stejný čas. Špatná zpráva – takhle to nefunguje. Ve většině případů nemusíte upravovat tvar křivky, musíte změnit načasování svitkové animace.
Odhalit
Nyní je čas mluvit o animaci předměty. Pohyb svitku jste již animovali, ale stále to nestačí. Aby pohyb vypadal dobře, musíte animovat zobrazení posouvaných vrstev.
Jak animovat zveřejnění?
- Vyberte vrstvy, stisknutím P a T na klávesnici vyberte vlastnosti polohy a krytí;
- Přesuňte 20 snímků dopředu a vytvořte klíčové snímky;
- Přejít zpět, animovat krytí na 0, pozice Y na +20;
- Vytvářejte dynamiku, jak je znázorněno na graf níže.
Sledujte animaci a všimnete si, že všechny pohyby nyní vypadají plynuleji.
Offsety
Takže, animovali jste rolování, rozšiřování a přidali jste dynamiku, ale stále něco chybí … Ofsety! Bez nich, nikde, na nich vždy záleží.
Co je ofset?
To znamená, že animace není simultánní. Například animace každé další vrstvy začne o 2 snímky později než animace předchozí vrstvy.
- Vytvořit odsazení – přesuňte každou vrstvu o 2 snímky dále (přesuňte klíčové snímky každé vrstvy po jednom nebo pomocí pluginu MDS to udělejte jediným kliknutím).
- Podle potřeby zkontrolujte a upravte animaci. Nyní uvidíte velký rozdíl. Nezapomeňte tedy použít posunutí, vždy to pomůže!
Animace fotografií
Jakmile zvládnete základní animaci, je čas být kreativnější.
Rozbalení fotografií
Přidejte k fotografiím masky, měřítko, otočení nebo dokonce zkreslení a okamžitě to zlepší vaši pozici.
Zde například můžete vidět přidanou animaci měřítka a zobrazenou masku. To se snadno implementuje a bude to vypadat mnohem lépe než standardní rozšíření.
Fotografické efekty
Kromě zveřejnění můžete k fotografiím přidat efekty zkreslení, které se zobrazí při najetí myší nebo jsou vždy viditelné.
Vytváření zkreslení je poměrně složitý a někdy docela komplikovaný proces, ale můžete použít hotová přednastavení, která jsou volně dostupná na internetu. Zde je několik skvělých možností, jak lze na vaše stránky použít fotografické efekty.
Naučit se animovat textové efekty je docela snadné. Pokud na YouTube zadáte „textovou animaci v After Effects“, budete mít k dispozici spoustu návodů. Pokud ale nechcete ztrácet čas studiem textové animace, můžete použít hotová přednastavení. Lze je použít jak pro nadpisy, tak pro základní textové animace.
Podívejte se, jak vám tento druh animace může pomoci vytvořit působivé video.
Animace ilustrací pro webové stránky/aplikace se vždy vyplatí. Implementace je rychlá, snadná a jednoduchá a zisk z těchto akcí bude maximalizován.
Po dokončení animace budou vývojáři potřebovat soubory JSON. K jejich tvorbě používáme plugin Bodymovin nebo Lottie pro After Effects. Většina časových efektů nefunguje ve formátu Lottie, proto se snažíme vytvořit pěknou animaci se základními vlastnostmi: poloha, rotace, měřítko, neprůhlednost a animace cesty.
Ověřovací práce
< p> Až budete s vytvářením animací hotovi, zkontrolujte několik věcí:
1. Několikrát si prohlédněte všechny animace. Ne jednou, ale nejméně pět. Ujistěte se, že vše vypadá tak, jak chcete.
2. Nechte vše na panelu projektu vypadat hezky. Všechny zdroje by měly být v samostatných složkách. Předběžné skladby jsou správně pojmenovány a seskupeny do jedné složky. Vytvořte složku „Archiv“ a sem uložte všechny verze animací (udělejte to, bude to lepší).
3. Znovu vykreslete a zkontrolujte vykreslenou animaci. Buďte prosím trpěliví a zkontrolujte to ještě alespoň 5krát, ujišťuji vás, že tam najdete chyby.
Tipy pro publikování a vykreslování na sociálních médiích
Pokud s animací začínáte, máme pro vás pár tipů.
Vykreslování
Použijte Adobe Media Encoder. Ano, .mov můžete vykreslit přímo v After Effects, ale to není nejlepší formát. MOV je těžký a ne vždy hraje správně. Můžete samozřejmě vykreslit do formátu MOV a poté použít online převaděče k vykreslení ve formátu MP4 nebo GIF.
V programu Media Encoder probíhá vykreslování ve formátu h.264. Ve většině případů vám bude stačit standardní nastavení. V případě potřeby zde můžete změnit snímkovou frekvenci nebo velikost videa, aniž byste se museli vracet k AE. Jen se ujistěte, že je vykreslení nastaveno na „Mercury Playback Engine GPU Acceleration (Metal)“.
Někdy je potřeba optimalizovat video tak, že váží méně. K tomu doporučujeme aplikaci HandBrake. Používání je velmi jednoduché a intuitivní. Zde můžete zmenšit velikost souboru videa, optimalizovat, změnit velikost, datový tok nebo obnovovací kmitočet.
Tipy pro sociální média
Především miniatury. Nejčastější chybou je zapomenutí dobrých miniatur. V důsledku toho můžete skončit s prázdným nebo neatraktivním náčrtem, který kazí dojem ze veškeré práce, kterou jste odvedli.
Druhá věc, na které je třeba zapracovat, je smyčková animace. Toto je bod, díky kterému vypadá animace hezčí a plynulejší.
Závěry
Nezapomeňte dělat vše postupně, krok za krokem. Pokud jste začátečník, začněte jednoduchými řešeními. Ovládněte dynamiku a načasování a teprve poté přejděte ke složitější animaci.
Když základní animace vypadají dobře, zkuste jim přidat trochu chuti: masky, složité disky s pohyblivou pozicí měřítka a dokonce i zkreslení.
Vyzkoušejte animaci ilustrací a ikon, aby byla vaše animace atraktivnější.
Vždy si pamatujte účel animace. Pokud to děláte pro vývojáře, ujistěte se, že nejsou příliš rychlí, aby mohli vidět každý detail animace. Prezentace pro klienta by měla být působivá a její důležitá součást – animace by měla upozornit na skvělá řešení UX a krásné rozhraní.
Udržujte vše čisté! Za to si budete děkovat o něco později.
Animace vyžaduje soustředění. Udělejte si tedy čas a soustřeďte se na kvalitu, nikoli kvantitu.
Podívejte se na další zajímavé a relevantní články na našem blogu a telegramovém kanálu.
# #aftereffects animace
