Začínáme s animacemi v programu Expression Blend

Rychlý přehled vytváření animací založených na časové ose

Systém animací platformy Silverlight není založen na snímcích, ale na čase. Díky tomu se vy jako animátor můžete soustředit na časování a nemusíte se starat o to, kolika snímků za sekundu aplikace může případně dosáhnout. Tento systém také zahrnuje objekt Storyboard, pomocí kterého lze udržovat a flexibilně měnit hodnoty vlastností.

Program Expression Blend poskytuje všechny potřebné nástroje pro tento výkonný, ale přitom jednoduchý rámec.
V této lekci použijeme animaci založenou na časové ose k tomu, aby přes obrazovku se zrychlením přeletěla kosmická loď.

01 Úvodní scéna

Stáhněte soubory projektu BasicAnimation (Základní animace) a otevřete projekt v programu Expression Blend.

02 Přepněte na pracovní prostředí Animation (Animace).

Počínaje hlavní nabídkou zvolte položky Window -> Workspaces -> Animation (Okno -> Pracovní prostředí -> Animace). Jedná se o jedno z výchozích prostředí, které jsou součástí programu Expression Blend 3. Jak naznačuje jeho název, slouží k vytváření animací. Můžete si vytvářet a ukládat vlastní pracovní prostředí pomocí položky nabídky Windows (Okna).

03 Přidejte objekt Storyboard

V programu Blend je většina animací definována pomocí objektů Storyboard (Scénář). Pro přidání objektu Storyboard vyhledejte panel Objects and Timeline (Objekty a časová osa) a klikněte na ikonu se symbolem +. Zobrazí se dialogové okno Create Storyboard Resource (Vytvoření prostředku Storyboard). Klikněte na tlačítko OK pro přijetí výchozího názvu Storyboard1. Tím je vytvořen a vybrán nový objekt Storyboard, což způsobí zobrazení časové osy a indikátoru nahrávání ve formě červeného obrysu kolem pracovní plochy Artboard.

04 Uveďte loď do pohybu

Přetáhněte ukazatel pozice na časové ose na hodnotu 3 sekundy. Vyberte objekt Ship (Loď) a přesuňte ji na novou pozici. Když kliknete na tlačítko Play (Přehrát) nad časovou osou, můžete sledovat, jak kosmická loď pomalu přeletí přes obrazovku. Tlačítko Play spolu s dalšími ovládacími prvky poskytují náhled animace v době návrhu, což může být hodně užitečné.

05 Zvolna loď zrychlete

Přetáhněte indikátor klíčového snímku ve tvaru bílého oválu ze snímku 3 na snímek 1. Když kliknete na tlačítko Play, můžete si všimnout, že loď je nyní mnohem rychlejší, ale pohyb je lineární a nepřirozený. Na panelu Properties (Vlastnosti) vyhledejte sekci Easing (Zvolnění) a z 33 integrovaných funkcí zvolnění zvolte funkci Exponential In (Exponenciální směrem dovnitř). U vlastnosti Exponent (Mocnitel) proveďte změnu z hodnoty 2 na hodnotu 6. Když teď kliknete na tlačítko Play, uvidíte, jak loď při pohybu přes obrazovku zrychluje.

06 Scénář bez konce

Vyberte objekt Storyboard1 tím, že kliknete na jeho název přímo v rozevíracím seznamu. Po vybrání objektu Storyboard (Scénář) se panel Properties (Vlastnosti) změní a zobrazí se na něm sekce Common Properties (Společné vlastnosti). Použití vlastnosti AutoReverse (Automatické zpětné přehrávání) způsobí, že po dosažení konce scénáře se bude objekt Storyboard (Scénář) zpětně přehrávat směrem k začátku. Vlastnost RepeatingBehavior (Opakující se chování) určuje, kolikrát se bude po spuštění objekt Storyboard přehrávat.

07 Zažehněte motory!

Pomocí nástroje pro přímý výběr (A) vyberte koncový bod dráhy Flame (Plamen) , která z lodi vychází. Přesvědčte se, že je vybrán objekt Storyboard1 a že ukazatel pozice je na hodnotě 1 sekunda, a přetáhněte bod k druhému horizontálnímu okraji měsíce. Vyberte nově vytvořený klíčový snímek v řadě objektu Flame a použijte funkci zvolnění Elastic In (Elastické směrem dovnitř). Po kliknutí na tlačítko Play můžete sledovat zážeh motorů.

08 Spuštění a zastavení animace

Zavřete objekt Storyboard (Scénář) a přepněte zpět na pracovního prostředí Design (Návrh). Na panelu Assets (Materiály) vyberte položku Behaviors (Chování) a přetáhněte kopii akce ControlStoryboardAction (Akce řízení scénáře) na mřížku Ship (Loď) . Na panelu Properties budou nyní k dispozici sekce Trigger (Aktivace) a Common Properties (Společné vlastnosti). V rozevíracím seznamu objektů Storyboard (Scénář) zvolte objekt Storyboard1. Přetáhněte novou akci ControlStoryboardAction (Akce řízení scénáře) na mřížku Moon (Měsíc) a vyberte opět objekt Storyboard1, ale tentokrát zvolte možnost Stop (Zastavit). Stisknutím klávesy F5 můžete svou animaci spustit a otestovat, přičemž kliknutím na kosmickou loď nebo měsíc zahájíte přehrávání, respektive zastavíte let kosmické lodi.

Pokud se chcete naučit ještě víc o animacích v programu Expression Blend, můžete si přečíst článek Animace objektů na komunitním webu pro produkty řady Expression.