keyframe: kýfrejmTakéKeyframing, Klíčování animace, Keyframe animace, Animace pomocí klíčůPokročilý
Definice
Animace klíčových snímků je technika, při které animátor zadá hodnoty vlastnosti (polohu, rotaci, barvu, průhlednost) jen v několika vybraných časech a software dopočítá všechny mezilehlé snímky interpolací. Klíčový snímek tedy nese stav v daném okamžiku, křivka mezi klíči určuje rychlost změny a výsledkem je plynulý pohyb bez ručního kreslení každého snímku.
Kategorie: 3D designAktualizováno
Nezaměňujte: V kontextu videokodeků znamená „klíčový snímek“ něco jiného: I-snímek, od kterého lze začít dekódovat, nikoli ručně zadanou hodnotu animační vlastnosti.
<h2>Odkud pochází pojem klíčový snímek</h2><p>Termín má kořeny v kreslené animaci, kde zkušený animátor nakreslil jen pózy vymezující pohyb a asistenti dokreslovali mezifáze. Digitální nástroje tuhle dělbu práce převzaly doslova: člověk určí klíče, počítač provede <em>inbetweening</em>, tedy dopočet mezisnímků. Rozdíl je v tom, že softwarová interpolace pracuje s číselnými hodnotami parametrů, ne s obrázky.</p><h2>Co se interpoluje a jak</h2><p>Klíčový snímek váže trojici: sledovanou vlastnost, čas a hodnotu. Mezi dvěma sousedními klíči se hodnota mění podle zvoleného typu interpolace.</p><h3>Typy interpolace</h3><ul><li><strong>Konstantní (step)</strong>: hodnota drží a v klíči skokem přeskočí. Používá se u přepínání viditelnosti nebo u záměrně trhané animace.</li><li><strong>Lineární</strong>: rovnoměrná změna. Působí mechanicky, protože reálné objekty se nerozjíždějí ani nezastavují okamžitě.</li><li><strong>Bézierova / spline</strong>: každý klíč má tečné úchyty, kterými se řídí zrychlení. Odtud pojmy ease-in a ease-out.</li></ul><h3>Rotace jsou zvláštní případ</h3><p>Interpolace rotací po jednotlivých Eulerových úhlech vede ke gimbal locku a k podivným obloukům pohybu. Proto se v 3D balících i herních enginech rotace uvnitř často ukládají jako kvaterniony a mezi klíči se používá sférická interpolace (slerp).</p><h2>Kde se s klíčováním potkáte</h2><p>Klíčové snímky nejsou výsadou 3D softwaru. Na webu je zavádí pravidlo <code>@keyframes</code> v CSS, kde se procenta chovají jako časová osa a <code>animation-timing-function</code> jako interpolační křivka. Web Animations API umožňuje totéž z JavaScriptu. V 3D nástrojích typu Blender se klíčují kanály objektu i kosti postavy, takže klíčování přímo navazuje na <a href="/slovnik/rigging">rigging</a>. V herních enginech se z klíčovaných křivek stávají animační klipy, které se za běhu prolínají.</p><h2>Vztah k snímkové frekvenci</h2><p>Klíče leží na časové ose, ale výsledek se vzorkuje podle cílové <a href="/slovnik/snimkova-frekvence">snímkové frekvence</a>. Tatáž animace se dá vyrenderovat na 24, 30 i 60 snímků za sekundu, aniž by se klíče měnily. To je hlavní praktická výhoda oproti animaci kreslené snímek po snímku. Pozor ale na klíče umístěné mimo celé snímky: při nízkém vzorkování se ostrý náraz nebo krátký záblesk může úplně ztratit.</p><h2>Kdy klíčování přestává stačit</h2><p>Ruční klíče popisují záměr, ne fyziku. Látka, vlasy, kouř, kolize nebo dav postav se klíčují nepřiměřeně draze, proto je nahrazuje simulace, motion capture nebo procedurální řízení. Časté je i míchání: základní pohyb je klíčovaný a nad ním běží simulovaná sekundární akce. Druhá hranice je interaktivita. V hrách a v uživatelských rozhraních musí animace reagovat na přerušení, takže se místo pevné časové osy používají pružinové modely, které umí plynule navázat na aktuální rychlost.</p><h2>Praktická pravidla</h2><ul><li>Méně klíčů znamená čistší křivku. Překlíčovaná animace se špatně upravuje.</li><li>Blokování póz nejdřív ve step režimu odhalí načasování dřív, než se řeší plynulost.</li><li>Graf editor je důležitější než časová osa: většina problémů s pohybem je vidět až na křivce.</li></ul>
Příklady z praxe
Pulzující tlačítko v CSS
Upozorňující tlačítko má mezi klíči 0 %, 50 % a 100 % definované měřítko. Prohlížeč dopočítá mezistavy a časovací funkce ease-in-out zajistí, že se pohyb na okrajích zpomalí. Změna trvání animace nevyžaduje zásah do klíčů.
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } .cta { animation: pulse 1.6s ease-in-out infinite; }Skok postavy v 3D
Animátor nejdřív naklíčuje tři pózy: příprava v podřepu, vrchol letu a dopad. Teprve potom v graf editoru upraví tečny tak, aby výstup ze země byl prudký a vrchol letu se přirozeně zdržel. Kanál rotace pánve přepne na kvaternionovou interpolaci, aby se při otočce neobjevil nechtěný přemet.
Časté omyly
- MýtusČím víc klíčových snímků, tím plynulejší animace.
- Ve skutečnostiPlynulost určuje tvar interpolační křivky a snímková frekvence renderu, ne počet klíčů. Hustě naklíčovaná křivka se naopak často vlní a jde jen obtížně opravit.
- MýtusKlíčový snímek je prostě jeden snímek videa.
- Ve skutečnostiV animaci je klíčový snímek zadaná hodnota vlastnosti v čase, ne hotový obrázek. Stejný pojem ve videokodecích označuje I-snímek, tedy soběstačně dekódovatelný snímek, což je jiná věc.
- MýtusLineární interpolace je neutrální, takže je nejbezpečnější volba.
- Ve skutečnostiLineární průběh znamená okamžitý start i zastavení, což lidské oko vnímá jako mechanické. Neutrálním výchozím bodem pro pohyb objektů je spíš mírné zrychlení a zpomalení.
Časté dotazy
- Kolik klíčových snímků potřebuje jednoduchý pohyb?
- Jednoduchý pohyb, například posun panelu nebo otočení ikony, si obvykle vystačí se dvěma klíči: počátečním a koncovým stavem. Vše mezi tím dopočítá interpolace. Třetí klíč přidávejte teprve tehdy, když potřebujete změnit směr, zdržet pohyb ve vrcholu nebo vytvořit dojezd. U složitějších postavních animací se pracuje s hlavními pózami, ne s pravidelnou mřížkou klíčů. Praktické vodítko: pokud jde klíč odebrat, aniž by se pohyb viditelně změnil, patří pryč.
- Jak souvisí ease-in-out s klíčovými snímky?
- Ease-in-out popisuje tvar interpolační křivky mezi dvěma klíčovými snímky. Klíč sám určuje jen hodnotu v daném čase, zatímco časovací funkce nebo tečné úchyty v graf editoru rozhodují o tom, jak rychle se hodnota mezi klíči mění. Ease-in znamená pomalý rozjezd, ease-out pomalé doznění, ease-in-out obojí. Právě tady vzniká rozdíl mezi animací, která působí přirozeně, a animací, která vypadá strojově, i když má obě stejné klíče.
- Proč se v 3D doporučuje pro rotace kvaternionová interpolace?
- Kvaternionová interpolace řeší problémy, které vznikají při interpolaci tří Eulerových úhlů zvlášť. Jednotlivé osy se mění nezávisle, takže výsledná dráha rotace může jít oklikou nebo se objeví gimbal lock, kdy se dvě osy překryjí a jeden stupeň volnosti zmizí. Sférická interpolace kvaternionů vede po nejkratší dráze na kouli rotací a chová se předvídatelně. Nevýhodou je horší čitelnost hodnot v editoru, proto řada nástrojů nabízí oba režimy podle kanálu.
- Kdy použít pružinovou animaci místo klíčových snímků?
- Pružinová animace se hodí všude, kde musí pohyb reagovat na vstup uživatele v průběhu. Klíčové snímky mají pevnou délku a pevný cíl, takže při přerušení uprostřed buď skočí, nebo se musí složitě přepočítávat. Pružinový model naproti tomu pracuje s aktuální polohou a rychlostí, takže dokáže plynule změnit cíl uprostřed pohybu. Typicky jde o táhnutí prstem, drag and drop nebo přepínání stavů rozhraní. Pro lineární sekvenci ve videu nebo filmové animaci zůstávají klíče vhodnější.
Zdroje
- CSS Animations Level 1(otevře se v novém okně)
- Using CSS animations(otevře se v novém okně)
- Web Animations(otevře se v novém okně)
- Blender Manual: Animation & Rigging(otevře se v novém okně)
- Key frame(otevře se v novém okně)
Související pojmy
