Animační techniky

• Podstata animace
• Sekvenční typ animace
• Počítačově-asistovaná animace
• Počítačově generovaná animace
• Webové animace
• Souhrn
  • Klíčové pojmy
  • Studijní materiály

Podstata animace

• Animaci je třeba chápat jako navození iluze pohybu. Grafický objekt se tedy pohybuje pouze zdánlivě.
• Tradiční animace je často založena na principu sekvence statických snímků, ve kterých je poloha objektu rozfázována. Tradiční animace ručně ilustrovaných pohádek používá konvenčně 15 snímků/sek.
• Počítačová animace je proces používaný pro digitální zpracování animovaných obrázků. K ulehčení tvorby animace nám počítač nabízí nástroje, které tvorbu statických snímků zefektivní.
• Počítačovou animaci bychom mohli rozdělit podle různých hledisek.
  • Animování 2D nebo v 3D modelu.
  • Animování rastrových snímků nebo animace vektorových objektů.
  • Podle charakteru, v jakém jsou data animace uložena – viz. typ snímku.
  • Zpracování pomocí renderování – počítačově generovaná animace.
  • Fotorealistické či nefotorealistické renderování.
  • Podle cílového využití – video, webová animace, v prezentačním editoru, simulace v reálném čase v herním průmyslu, vizualizace v lékařství apod.

Sekvenční typ animace

• Principem je postupné zobrazování statických snímků.
• Typ snímku – Animace může být tvořena kromě celých klíčových snímků (rámečků = frames) také tzv. půlsnímky při prokládání. Při komprimaci videa se používají také tzv. neklíčové snímky.
  • Klíčový snímek – pro jeho zobrazení není zapotřebí informací z okolních snímků. Samostatný klíčový snímek obsahuje úplná obrazová data jako statická fotografie.
  • Půlsnímek – obraz statického snímku je uložen tak, že liché a sudé řádky jsou odděleně uloženy v samostatných půlsnímcích.
  • Neklíčový snímek (rozdílové snímky) – nelze nezávisle a samostatně zobrazit. Některé videokodeky často obraz snímků mezi klíčovými snímky zakódují do tzv. rozdílových snímků. Např. standard MPEG k popisu rozdílových snímků používá pohybové vektory. Video využívající neklíčové snímky nelze považovat za typické sekvenční druhy animace.
• Typ skenování – popisuje metodu, jakým bude obraz kamerou zachycen a promítán na monitoru. To ovlivní, zda bude po snímání videa možno pozorovat detaily pohybujícího se objektu. Rozeznáváme 2 typy: prokládané video a progresivní video.
  • Prokládaní – pro lepší dosažení plynulosti pohybu v animaci při nižší datové velikosti se využívá dělení snímků na liché a sudé řádky. Obraz je zachycován pomocí půlsnímků. Ty jsou pak vykreslovány více průchody (scany). Tato videa se však moc nehodí pro aplikaci v bezpečnostních systémech. Prokládaná videa mají označení i (interlaced) – např. 576i.
  • Progresivní sken – Obraz je zachycován v podobě celých klíčových snímků a proto je mnohem vhodnější pro detailní postprodukci nebo užití u bezpečnostních systémů. Taková videa jsou označena zkratkou p – např. označení 576p.
• Rychlost přehrávání snímků – Při rychlosti zobrazování 12 snímků/sek. a méně již může být pohyb animace trhaný. Běžné video je přehráváno rychlostí 25-30 snímků/sek. V pásmu 75 až 120 snímků/sek. se nachází fyziologický limit člověka vnímání vyšší plynulosti pohybu. Vyšších rychlostí při přehrávání nemá smysl dosahovat. Naopak při snímání rychlého pohybu je někdy zapotřebí dosáhnout vyšších snímkovacích rychlostí – tzv. Slow-motion video. Opakem “slowmo” je Timeless video – zrychlení dlouho trvajícího pohybu, kde lze snímat obraz s mnohem větší časovou periodou.
• Kodek – algoritmus, který je použit pro zakódování či dekódování multimediálního datového proudu (videokodeky, audiokodeky a textové kodeky). Kódovací algoritmus často slouží k značné datové úspoře. Použití určitého kodeku také nic nevypovídá o použitém kontejneru (přípona souboru).
• Multimediální kontejnery – multimediální soubor může obsahovat více multimediálních datových proudů (video, zvuk, textové titulky). Multimediální kontejner definuje datovou strukturu souborového formátu.
• GIF – grafický formát, který od roku 1989 umožňuje animace. Kvůli 8-bitovému popisu barev sice umožňuje datovou úsporu, ale nehodí se příliš na fotorealistickou animaci. Nástupnický formát PNG naopak animace nepodporuje. Jako animovanou alternativou byl méně rozšířený formát APNG či MNG. GIF se nejčastěji využívá pro webové animace. Formát umožňuje prokládání, uložení společného pozadí pro jednotlivé rámce s průhledností, nastavení časové prodlevy či počet opakování animace. Formát GIF podporuje také tzv. interaktivní pauzu, kterou lze používat např. pro Slideshow. (O interaktivní pauze pojednává Root.cz)
• SWF (původně Shockwave Flash) – Formát vyvinutý pro animování vektorové grafiky může obsahovat další multimediální data jako zvuk. Formát podporuje tzv. ActionScript, kterým bylo možno animace doplnit o interaktivní ovládání. Do roku 2008 byl formát SWF využíván hlavně pro webovou animaci. Pomocí něj byly tvořeny i přehrávače FLV videa (Youtube), které však později byly nahrazeny prvky HTML5. Výjimkou nebyly ani celé webové prezentace vytvořené v tomto formátu. Nevýhodou byla potřeba instalace pluginu Flashplayer. V roce 2020 bude podpora ve webových prohlížečích ukončena.
• Silverlight – aplikační platforma firmy Microsoft. Sloužila pro vývoj multimediálních aplikací. Mohli bychom ji chápat jako vzájemně nekompatibilní alternativu k technologii Flash. I Silverlight je takřka mrtvá technologie a i ta vyžadovala instalaci svého SW doplňku.
• MJPG (Motion JPEG) – videoformát, který je tvořen sekvencí celých klíčových snímků uložených jako standardní JPG snímky. Je vhodný pro streamovací IP kamery. Bohužel však k přehrávání MJPG je zapotřebí odpovídající videokodek.
• ostatní videoformáty – Většina videoformátů vyžaduje ke svému přehrávání patřičné kodeky. V návaznosti na webové aplikace jsou však dnes dobře uplatnitelné formáty OGG (kodek Theora), MPEG-4 (kodek H.264) či WebM (kodek VP8), jejichž kodeky jsou často součástí webových prohlížečů díky multimediální podpoře s HTML5.

Počítačově-asistovaná animace

• Pro ulehčení práce animátora se využívají určité funkcionality speciálního softwaru. Pokud byste vytvářeli animace pouze v programu Gimp nebo klasickém rastrovém editoru, máte k dispozici pouze kreslící plátno a vrstvení kresby. Editor pak exportuje výsledný GIF jako sekvenci po sobě jdoucích vrstev. Taková práce je primitivní a hlavně zdlouhavá. Profesionální animační editory jsou založeny na vektorové grafice a disponují řadou funkcí, které vedou k vytvoření klíčových snímků (klíčování = keyframing).
• Organizace animace
  • Scéna (pracovní plocha) – často pozadí nebo kreslící plátno (Canvas).
  • Sprite (symbol) – objekt 2D grafiky, který se bude pohybovat. Některé editory mohou jako sprite použít rastr, avšak pro lepší práci je vhodnější vektorový objekt nebo skupinu objektů. Pokročilejší editory např. Pivot Animator využívá kostru sestavenou z hlavních uzlů. V 3D grafice se používá síťového modelu sestaveného z polygonů.
  • Instance – Použití spritu ve scéně se provádí samotným vytvoření instance, která je vázaná na klíčový snímek časové osy. Instance je tedy jakýsi zástupce symbolu v časové ose a obsahuje dále jeho určité atributy (průhlednost, transformace apod.). Takže v jednotlivých snímcích může každá instance např. měnit velikost symbolu. Animace může být tvořena mnoha instancemi. V editorech jsou často tyto instance označovány např. jako efekt či přímo animace. Běžně rozeznáváme instance podle využití
    1) úvodní (např. fade-in),
    2) zvýrazňující (např. move-to) a
    3) závěrečné (např. fade-out).
  • Interakce – Na objekt symbolu, instance či klipu lze detekovat události vyvolané uživatelem a ty pak dále používat pro podmíněnost chování animací. Ke spouštění dílčích instancí lze využívat triggery v kombinaci s časováním. Díky tomu lze vytvářet hry (typické pro technologii Flash nebo i HTML5-CSS3 s Javascriptem).
  • Časovaní – Při použití pokročilých nástrojů (např. Twinning, Morphing) lze definovat rychlost pohybu či přechodu – projev instance v časové ose. Používají se např. lineární, zrychlení, zpomalení, kombinace zrychlení-zpomalení atd.
• Keyframing – Úkolem klíčování je umístit patřičnou změnu objektu do jednotlivých snímků (rámečků) časové osy. Jaké máme k dispozici metody klíčování?
  • Ruční klíčování – Animátor provádí úpravy grafického objektu běžnou grafickou prací. K tomuto lze využít i grafický tablet.
  • Mo-cap (motion capture) – Zachycení pohybu objektu lze provést pomocí snímání pozice triangulačních bodů kostry objektu na těle herce. Optické systémy rozpoznají triangulační bod a v určitých časových intervalech jsou vzorkovány vektorové charakteristiky. Data pohybu reprezentovaná sekvencí souřadnicových rozdílů polohy bodů lze použít u uměle vymodelovaných objektů.
  • Tweening (inbetweening) – Je to metoda, díky níž lze ze dvou pozic objektu (počáteční a koncové) automatizovaně vygenerovat řadu rozfázovaných klíčových mezisnímků. Tweening využívá matematických metod interpolace. Pokročilým případem je i Morphing.
  • Morphing je speciální efekt u filmů a animací, které mění (nebo morfují) jeden obrázek nebo tvar na jiný prostřednictvím plynulého přechodu. Pomocí matematických algoritmů je prováděna transformace a po určitých krocích je obraz klíčován. Příkladem mohou být některé přechody snímků v editoru PowerPoint.
• Specializovaný SW
  • Pivot Stickfigure Animator
  • Macromedia Flash (později Adobe)
  • SWiSH Max
  • Corel R.A.V.E.
  • Adobe Charaker Animator
  • Adobe Animate
  • Adobe Affter Effects
  • Synfig Studio
  • Wick Editor
  • Blender – pro 3D
• Primitivní SW, ve kterém lze rovněž animovat
  • MS Office PowerPoint – přechody, instance animací, interakce
  • Gimp – sekvence vrstev

Počítačově generovaná animace

• CGI (Computer-Generated Imagery) – Podstata počítačově generované animace je, že animace není zachycena v klíčových snímcích, nýbrž je popsána matematickými algoritmy, které jsou zpracovány (renderovány) přímo grafickou kartou. Na rozdíl od sekvence, může být tento druh animací zpracováván v reálném čase. Animace tedy není nutně zachycena ve výstupu v již neměnných klíčových snímcích. Důležitou úlohu pak hraje interaktivita.
• Hlavní využití
  • Virtuální kinematografie (Toy Story, Ledové království …)
  • Herní průmysl
  • Virtuální realita – kombinace simulátoru s pohybovými snímači v reálném čase
  • Simulátory – výcvik v pilotů v letectví …
  • Designové vizualizace
  • Vizualizace v lékařství – počítačový tomograf, magnetická rezonance
• Modelování – CGI je často orientované na 3D modelování. Animace pomocí CGI lze ale uplatňovat i pro 2D.
• Modelováním ve 2D se běžně provádí vektorově – rozklad na jednotlivé křivky, které jsou tvořeny uzlovými body. To jsme nucení pomocí grafického editoru provést ručně. Zvláštní metodou tvorby 2D modelu je sken rastru a jeho trasování.
• Modelování ve 3D se provádí buď 3D skenerem a nebo tvorbou síťového modelu, který je tvořen triangulací jednotlivých polygonů. Na síťový model se dále 2D textury.
• Renderování (zpracování) – je proces, kdy grafická karta syntetizuje umělý obraz do fotorealistické či ne-fotorealistické podoby. Výslednému modelu říkáme render.
  • Virtuální scéna – obsahuje geometrický model objektu, bod pohledu, bod zdroje světla, textury, stínování, světelnost prostředí, …
  • Vlastnosti renderu – jsou generovány na základě fyzikálních poznatků, poznatků lidské fyziologie, matematiky. Každá vlastnost renderu je realizována důmyslnými algoritmy. Jsou jimi např. simulace nerovností povrchu, simulace mlhy, simulace stínu, simulace zrcadlení, simulace ohybu světla, simulace hloubky pole apod.
  • Renderovací techniky – Výše uvedené algoritmy mají k dispozici různé metody vykreslování výsledného obrazu. Absolutní fyzikální simulace průběhu každé světelné částice by kladla příliš vysoké nároky na výpočetní prostředky, a proto se využívá určitého zjednodušení fyzikálního modelu pomocí těchto technik: rasterizace, promítání, sledování paprsku, radiozita (metoda globálního osvětlení), vzorkování, filtrování aliasu a jiné optimalizace.

Webové animace

• Kromě laického využití animací v prezentačních editorech jsou dobře publikovatelné animace pomocí webových stránek. Všimněme si, že webové aplikace vývojově přešly od animace definovaných v souborech (GIF a SWF) k programovaným pomocí (HTML-CSS-JS). Čím více je poptávka po efektivních formách animace, tím více se programování zjednodušuje na úroveň menších skriptů využívající frameworky.
• Animace GIF – Velmi jednoduchá forma animace. Tento grafický formát byl pro web k dispozici od samého začátku webových stránek počátku 90. let 20. století. Animace je tvořena souborem, který lze jednoduše začlenit do webové stránky pomocí elementu <img>. Její výhodou je široká kompatibilita. Nevýhodou je vyšší přenosová režie v síti. Formát GIF dnes již poptávku po kvalitní animaci neuspokojuje.
• Flashová animace – Na přelomu roku 2000 uživatelé webu očekávali kvalitnější grafické zpracování animací. Od animace rastru (GIF) se tak postupně přecházelo na vektorové animace. Do webových aplikací se začala implementovat značná část interaktivity. Trendy designu webových prezentací obsahovaly i takové efekty jako jsou např. zvukové odezvy tlačítek v navigaci webu. Často byla webová stránka kompletně tvořena SWF souborem a při jeho stahování se dokonce zobrazoval preloader nebo hezké efektní intro. SWF formát však sám o sobě webová stránka není a do HTML souboru se začleňoval elementem <object> nebo pomocí elementu <embed>. Bohužel až do roku 2008 veškerý textový obsah obsažený v SWF souboru nemohl být indexován webovými vyhledávači, kvůli čemuž trpěla SEO. K čemu vám je hezká webová prezentace, když ji šlo těžko na Internetu najít? Flash také dělal zprvu problémy nastupujícím mobilním zařízením. Technologie však byla oblíbená mezi tvůrci 2D her.
• Javascript – Je objektově orientovaný programovací jazyk pro skriptování aplikací zpracovávaných na straně klienta (ve webovém prohlížeči). Často se kombinuje i se stylovými řadami. Typicky se pro animaci nějakého HTML elementu použije nějaká událostní procedura, při které se zavolá funkce měnící stylovou vlastnost. Událostní proceduru lze doplnit o časové funkce setInterval pro opakování či setTimeout pro časování. Dnešním trendem je si programování v JS značně ulehčit a lze takových animací docílit pomocí knihovny jQuery. Ukázka: https://javascript.info/js-animation
• CSS3 – Po roce 2008 přišla pracovní skupina WHATWG s novou verzí HTML5 a s vylepšením kaskádových stylových řad. Standardizací si prošla v roce 2012 a finální specifikace vyšla o 2 roky později. CSS3 tedy disponovala novými vlastnostmi, které měly nahradit nejčastější řešení z Flashe.
  1) vlastnost transition, kterou lze použít pro morphing jiných vlastností. Např. přechod pozadí objektu mezi různými barvami. Pomocí transition tedy nastavujeme plynulost změny. Ukázka: https://www.w3schools.com/css/css3_transitions.asp
  2) vlastnost animation s pomocí nastavení klíčování @keyframes lze vytvořit mnohem složitější animace. Ukázka: https://www.w3schools.com/css/css3_animations.asp
• CSS2 – I ve starší verzi bylo možno udělat jednoduchou animaci. Ale ta byla značně omezená a vázala se jen na některé pseudoelementy (hover). Např. nastavení změny barvy, obrázku na pozadí apod. Plynulost přechodu však zatím nastavit nešlo.