David Bureš

:blog

Animace načítání

V návodu o maskách jsem uvedl jako příklad následující animaci:

Dnes si povíme, jak jsem ji vytvořil.

Vytváření kružnic

Fusion bohužel nemá nástroj pro vytváření kružnic, musíme na to jít jinak. K vytvoření kruhu použijeme 3D kouli, kterou následně vyrenderujeme do 2D prostoru. Začneme vytvořením uzlu Shape 3D.

Ten nám ale vyplivnul plochu, musíme z ní udělat kruh. To je jednoduché: vybereme Sphere v levém panelu.

Přes posuvníky můžeme měnit její vlastnosti, na které se podíváme později. Teď sice máme kouli, ale když ji zkusíme propojit s jiným nástrojem, nic se nestane. Důvod je prostý: koule je ve 3D prostoru, a většina nástrojů pracuje ve 2D. Tento převod provedeme propojením koule s uzlem Renderer 3D, zelený vstup SceneInput.

Oba uzly teď přetažením myši vybereme a přes Ctrl+C zkopírujeme. Použitím nástroje Merge je spojíme dohromady. U vrchní kružnice (té připojené ke vstupu Foreground v nástroji Merge) změníme barvu na červenou. Levým kliknutím myši označíme počáteční uzel (v mém případě se jmenuje Shape3D1), půjdeme do záložky Materials a klikneme na tlačítko Pick…. Do pole vpravo dole vložíme HTML kód vybrané barvy (například #ee514f).

Vytvoření pozadí

Až doteď neměla naše animace pozadí. V porovnání s kružnicemi je pozadí hračka. Vytvoříme uzel Background a změníme u něj barvu na bílou.

Pozadí zatím s kruhy nebudeme spojovat.

Animování výseče

Naše koule mají skvělou vlastnost: Použitím nástroje End Angle můžeme určovat velikost kruhové výšeče. Pro zopakování, výseč je na obrázku dole červená plocha.

Když si teď budeme hrát se End Angle, moc se toho v náhledu nezmění. Naše koule jsou totiž špatně orientované; potřebujeme je otočit o 90° na ose X. Nástroje ke změně pozice a natočení koule najdeme ve třetí záložce s obrázkem tří os. Dál stačí pouze změnit hodnotu X Rotation na 90. To samé uděláme s druhou koulí. Naše koule jsou konečně ve správné poloze.

Dále doporučuji zmenšit obvod bílé koule použitím jezdce Radius na 0,6. Červenou kouli zatím necháme na pokoji.

Animace

Animace je kapitola sama o sobě, proto ji zde nebudu vysvětlovat. Vytvořil jsem si dva klíčové snímky, první na snímku 0 a druhý na snímku 120. Na prvním klíči jsem nastavil hodnotu End Angle na 0, na druhém klíči pak na 360. Další dva klíče jsem přidal pro Start Angle na časech 120 a 240. Na prvním hodnotu Start Angle na 0, na posledním na 360. Mezi klíči jsem vytvořil vlastní ease-in přechod. Naše animace vypadá takto:

Výrazy

Výrazy jsou další složité téma, zatím nám bude stačit vědět jedno: pomocí výrazu vezmeme nějakou hodnotu a použijeme ji jinde. My budeme chtít dělat dvě věci. Zaprvé zmenšit vnitřní kruh podle velikosti vnějšího. Zadruhé zpozdit animaci u vnitřního. U červené koule do políčka Radius napíšeme = (rovná se) a zmáčkneme Enter. Vedle políčka se objeví žlutý pruh. Ten nám říká, že do pole můžeme psát výrazy.

Do dolního pole napíšeme výraz Shape3D1_1.SurfaceSphereInputs.Radius – 0.1. Tenhle výraz říká: vezmi hodnotu Radius z nodu Shape3D1_1 a sniž ji o 0.1. Když se teď podíváme na obě koule přes sebe, uvidíme, že červená je menší, než bílá. Navíc můžeme libovolně měnit poloměr bílé koule, a červená se jí přizpůsobí.

Další na řadě je animace červené koule. Do pole End Angle napíšeme = a zmáčkneme „Enter“. Poté do něj napíšeme výraz Shape3D1_1:GetValue(„SurfaceSphereInputs.EndSweep“, time-30). Ten říká: vem hodnotu End Angle kterou nod Shape3D_1 měl před 30 snímky. Další a poslední výraz napíšeme pro Start Angle. Tento výraz zní: Shape3D1_1:GetValue(„SurfaceSphereInputs.StartSweep“, time-30) a dělá to samé, jako předchozí, jenom pro Start Angle.

Masky

Blížíme se ke konci, teď je na řadě maskování písma. Způsob vytváření masek jsem vysvětlil v předchozím příspěvku. V tomhle případě jsem použil metodu Matte Control. Každý Renderer jsem spojil s jedním Bitmapovým převaděčem.

Vytvoříme si nod Text+, který zkopírujeme. U jednoho z textu je třeba změnit barvu na stejnou barvu, jakou má vnitřní kruh. Barvy textu můžeme změnit vybráním záložky Shading a kliknutím na Pick… pod Color.

Teď spojíme masky tak, aby červená koule maskovala bílý text, a bílá koule maskovala červený text. Oba texty spojíme přes Merge.

Zakončení

Už nám zbývá jenom sloučit volné Merge nody a pozadí. Pokud chcete, můžete za koule přidat stín. Produkt vypadá takto: