Už od ranného dětství jsem velkým milovníkem kreslených pohádek a animovaných filmů. Když jsem byl ještě kluk, snažil jsem se udělat vlastní animovaný film – něco ve stylu Shreka nebo Hledá se Nemo. Dokonce jsem jednou celé léto strávil tvorbou dvou ručně kreslených filmů o indiánovi, který se snaží trefit do terče.
Animace mě tedy vždy fascinovala. Nicméně i přes to, že jsem designér, se k jejich návrhu dostanu spíše výjimečně. Často navrhuji především „funkčnější“ návrhy a na takové věci bohužel „nezbyde“ čas. Občas se mi ale nějakou maličkou animaci podaří protlačit.
V animacích a mikrointerakcích vidím velký smysl – pokud jsou účelné a dotváří význam dané věci. Nejen že mohou pomoci s pochopením produktu či dosahováním cílů, ale prostě mohou udělat zážitek z používání lepší a lidštější. Zároveň si myslím, že to není žádná věda – sám k jejich návrhu využívám 3 jednoduché kroky, díky kterým i začátečník jako já připraví hezkou animaci.
Zachytíme myšlenku a nápad
Ohledně tvorby animací existují různé zdroje a lze využít různé nástroje. Než se ale pustíme do řemeslného animování, je užitečné nejprve zachytit hlavní myšlenku a pointu toho, co bychom chtěli animovat.
Není potřeba být nikterak detailní. Například v knížce See What I Mean jsem se dočetl o jednoduché metodě pro zachycování dynamických prvků s využitím statické formy. (Což je mimo jiné metoda právě využívaná v komiksech, ale také filmech.)
Například jsem pro jeden webový widget přemýšlel nad tím, že by zde mohl být „usměváček“, který by reagoval na pohyb kurzoru a očima jej sledoval. Říkal jsem si, jak by něco takového vypadalo a namaloval jsem si několik základních pohledů a chování, tedy:
- Kurzor se hýbe a oči jej sledují a hýbají se.
- Jak se bude kurzor přibližovat a bude v určité vzdálenosti, widget nějakým způsobem „zareaguje“.
Základem této metody je zachytit pointu, tedy:
- Průběh dění a změny v čase.
- Začátek a konec dění.
Co jsem si tak vyzkoušel, je podle mě užitečné si:
- „Načmárnout“ základní kostru.
- Neřešit zatím detaily, ale soustředit se na hlavní pointu.
- Slovně si popsat co se nám nedaří zatím nedaří zachytit pomocí obrázku.
Ze začátku to chce trochu představivosti a trochu cviků, ale do toho se každý brzy dostane. Základem je načrtnout takový menší „scénář“ toho, co bude animace ilustrovat a jak bude vlastně fungovat.
Rozmýšlíme a rozpracováváme možnosti
Zachytit nápad je základ. Jde o to, stejně jako v případě návrhu, zachytit to nejdůležitější, tedy podstatu. Dalším krokem je nápad trochu zpřesnit a začít pomalu pracovat na detailech. Například:
- Jak rychlé budou pochyby jednotlivých prvků.
- Jak bude vypadat pohyb určitých částí.
- Jak se daná animace bude vyvíjet v čase.
- Jak bude kompozice vypadat v jiné perspektivě.
Například pro svůj nápad ohledně animace v rámci widgetu jsem přidal možnost, že by zde byl také nějaký doprovodný zvuk, pokud by na widget člověk kliknul nebo jej zmáčkl.
Pokud si nejsem jist, jak některé věci udělat a jak je hezky animovat, tak se pro inspiraci mrknu do skutečného světa a jak to funguje v něm. Odtud „okoukám“ základní pohyby a fungování, aby byla animace přirozená a působila hezky.
V případě svého widgets jsem přemýšlel nad tím, jak udělat animaci pohybu očí co nejvíce přirozenou a lidskou. Přeci jen, to lidskému oku lahodí více. Proto jsem si to zkusil sám na sobě – zkusil jsem sledovat pohybující se objekt nad sebou.
Tento princip se velice často využívá. Jak se můžete podívat například na princip animace skákajícího míčku, kdy si určíte:
- Dráhu a směr.
- Elasticitu předmětu a jeho změny v rámci pohybu a času.
- Stínování.
Něco takového samozřejmě nemusíte vymýšlet, ale můžete si sami vzít míček, hodit jej a natočit jeho pohyb a z toho si poté určit potřebná fakta.
V tomto případě se mi hodí například aplikace typu Folioscop, kdy si animaci mohu celkem rychle a jednoduše vyzkoušet rozpohybovat – pouze si nakreslím danou část animace a vidím, jak bude případně fungovat.
V této fázi se stále snažím spíš kreslit pomocí tužky a spíše si animaci rozmýšlet a připravovat. Snažím se si ujasnit, jak by měla animace probíhat a měl vše připravené do fáze, kdy ji začnu skutečně připravovat.
Animujeme a ladíme
Osobně bych řekl, že samotná tvorba animace v nějakém programu je vlastně to poslední, čím se zabývám. Je to de facto už samotná řemeslná tvorba, během které formuji své myšlenky a nápady, které jsem si nakreslil.
V případě mé animace widgetu si nejprve musím připravit vše potřebné. Tedy samotný widget a připravit si jeho stavy. Pro zjednodušení jsem si načrtl jednoduchou tvář (s linkami podle Thora, díky).
Poté si podle definovaných pravidel – tedy linek pohybu animace – připravím i stavy mého widgetu, případně dráhu pohybu, po kterém povedu změny, tedy například pohyb očí, nosu a rtů podle toho, jak bude sledovat daný objekt.
Během samotné tvorby animace pak ještě:
- Dolaďuji poslední detaily.
- Zkouším různé možnosti.
Jde vlastně o to začít animaci zpracovávat a dát ji finální podobu. Celkově se pak snažím udělat vše plynulé a přirozené. Je to pro mě poslední krok a právě dotažené detaily mohou danou animaci hodně pozvednout.
Poznámka – Samozřejmě hodně záleží na tom, v jakém nástroji budete animace vytvářet a jak moc jej umíte používat. Ale záleží také na formě a technice, kterou k animaci chcete využít. Pro ručně kreslené animace budete postupovat asi trochu jinak než pro 3D renderované animace.
Chce to cvik a trpělivost
Tvorba animací je podle mě dovednost jako každá jiná. Kdo chce dělat hezké věci, bude potřebovat trénovat a zkoušet, aby své schopnosti trochu vybrousil. V případě mikrointerakcí či doplňkových animací v produktu je potřeba myslet nejen na to, jak je efektivně připravit, ale také na to přesvědčit všechny stakeholdery, že stojí za to danou animaci přidat.
Otevřeně přiznám, že se mi nepodařilo protlačit desítky animací a mikrointerakcí. Vždy se našlo něco důležitějšího na práci a mnou navržené „vychytávky“ zůstaly v šuplíku. Nicméně to mi nezabránilo v tom, abych to dál zkoušel – ono to totiž občas „vyjde“ a výsledek je pak zase o kousek hezčí.