Silverlight 3.0 : Animácia

Po zvládnutí základných grafických prvkov nastal čas presunúť sa na vyššiu métu a „rozpohybovať“ scénu. Animácia významným spôsobom oživí intranetovú aplikáciu. Pohybujúce sa veci na seba upriamujú pozornosť a mnohé postupy, princípy a podobne sa dajú najlepšie vysvetliť na názorných animovaných ukážkach.

Nakoľko kontajnerový prvok Grid, ktorý je na stránku umiestnený pri vytváraní Silverlight 3 projektu sa hodí skôr na udržiavanie relatívnej polohy prvkov voči sebe, v tejto skupine aplikácii bude nahradený kontajnerovým prvkom Canvas, alebo StackPanel, čiže zjednodušene povedané, animácia sa bude odohrávať na „premietacom“ plátne.

Double Animation

Vytvorte objekt, ktorý chcete animovať, v našom prípade vyfarbený kruh, teda geometrický objekt Ellipse s rovnakými osami:

<Canvas x:Name="LayoutRoot" Background="White">
	<Ellipse x:Name="Kruh" Width="100" Height="100" Fill="Blue" />
</Canvas>

Najskôr bude predstavený objekt DoubleAnimation, ktorý umožňuje robiť animáciu tak, že sa mení hodnota parametrov typu double, teda desatinných čísel s dvojnásobnou presnosťou. Pre objekt Ellipse môžete skúsiť meniť priesvitnosť, teda parameter Opacity.

Znova zdôrazňujeme, že pomocou Double Animation je možné meniť len hodnoty parametrov typu Double, napríklad rozmery obdĺžnika, uhol pootočenia pri transformácii a podobne. Nie je možné meniť hodnoty parametrov celočíselného typu.

Pri animácii je potrebné definovať počiatočnú a cieľovú hodnotu meneného parametra a čas, za ktorý sa zmena vykoná. Môžete nastaviť opakovanie deja, prípadne nastaviť, aby opakovanie prebiehalo striedavo reverzne, v tomto prípade sa plocha najskôr zosvetlí a potom nastane reverzný dej, kedy plocha stmavne:

<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Kruh"
From="1.0" To="0.0" Duration="0:0:1" 
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

Animovaný dej bude zapuzdrovať objekt Storyboard, ktorý umožní aj riadiť časový priebeh animácie. Kompletný kód pre animáciu zmeny priesvitnosti bude:

<Canvas x:Name="LayoutRoot" Background="White">
	<Canvas.Resources>
		<Storyboard x:Name="sbPohyb">
			<DoubleAnimation
			Storyboard.TargetName="Obdlznik"
			Storyboard.TargetProperty="Opacity"
			From="1.0" To="0.0" Duration="0:0:3"
			AutoReverse="True" RepeatBehavior="Forever" />
		</Storyboard>
	</Canvas.Resources>
	<Rectangle x:Name="Obdlznik" Width="150" Height="100" Fill="Blue" />
</Canvas>

Spustenie animácie

Ak by ste spustili aplikáciu v tomto okamihu, kruh by sa síce vykreslil, ale nebude sa nič meniť, nakoľko animácia zatiaľ nebola nijako aktivovaná. Môžete pridať kód pre spustenie animácie, hneď po spustení do konštruktora Main Control:

public partial class MainControl : UserControl
{
	public MainControl()
	{
		InitializeComponent();
		sbPohyb.Begin();
	}
}

alebo ako reakciu na nejakú udalosť, napríklad na kliknutie myšou na grafický objekt:

<Ellipse x:Name="Kruh" Width="100" Height="100" Fill="Blue" MouseLeftButtonDown="Mouse_Clicked"/>

Obslužný kód udalosti bude:

private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    sbPohyb.Begin();
}

Color Animation

Veľmi často sa vyskytuje požiadavka na zmenu farby. Pre tento účel nie je možné využiť Double Animation, nakoľko hodnoty parametrov charakterizujúce farby sú celé čísla. Preto je pre zmenu farby k dispozícii špecializovaný objekt pre animáciu Color Animation:

<StackPanel x:Name="LayoutRoot" >
	<StackPanel.Resources>
		<Storyboard x:Name="sbAnimacia">
			<ColorAnimation Storyboard.TargetName="caFarba"
			Storyboard.TargetProperty="Color" 
			From="Blue" To="Yellow" Duration="0:0:5" />
		</Storyboard>
	</StackPanel.Resources>

	<StackPanel.Background>
		<SolidColorBrush x:Name="caFarba" Color="Blue" />
	</StackPanel.Background>
</StackPanel>

Nezabudnite pridať kód pre spustenie animácie:

public MainControl()
{
	InitializeComponent();
	sbAnimacia.Begin();
}

Point Animation

Takáto animácia asi pre efektné stránky nepostačí. Síce sa tam niečo menilo, v tomto prípade priesvitnosť, no nebol tam žiadny pohyb. Preto nastal čas predstaviť ďalší objekt PointAnimation, ktorý umožní meniť súradnice bodu. Pre elipsu budeme meniť polohu stredu a tým pohybovať aj celou elipsou.

Aby bolo možné využívať zmenu parametrov objektu typu Point, elipsu bude potrebné vykresliť nie ako jednoduchý obrazec, ale ako EllipseGeometry:

<Canvas x:Name="LayoutRoot" Background="White">
	<Canvas.Resources>
		<Storyboard x:Name="sbPohyb">
			<PointAnimation Storyboard.TargetName="Kruh"
			Storyboard.TargetProperty="Center" 
			From="50,50" To="400,200" Duration="0:0:5"
			AutoReverse="True" RepeatBehavior="Forever" />
		</Storyboard>
	</Canvas.Resources>
	<Path Fill="Blue">
		<Path.Data>
			<EllipseGeometry x:Name="Kruh"Center="50,50" RadiusX="30" RadiusY="30" />
		</Path.Data>
	</Path>
</Canvas>

Príklad pre Point Animation

Riadenie priebehu animácie

Zatiaľ sa animácia len spustí, ale nijako priebežne neriadi. Pre riadenie animácie sú v širokom spektre aplikácií obvyklé tlačidlá, alebo inak graficky stvárnené ovládacie prvky s významom základných riadiacich funkcií animácie: „ŠTART“, „STOP“ a „PAUZA“.

Do XAML kódu, je potrebné pridať jednotlivé tlačidlá a referencie na obsluhu udalosti stlačenia ľavého tlačidla myši:

<StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
	<Button Click="Animation_Begin" 
	Width="65" Height="30" Margin="2" Content="Begin" />
	
	<Button Click="Animation_Pause"
	Width="65" Height="30" Margin="2" Content="Pause" />

	<Button Click="Animation_Resume"
	Width="65" Height="30" Margin="2" Content="Resume" />

	<Button Click="Animation_Stop"
	Width="65" Height="30" Margin="2" Content="Stop" />
</StackPanel>

Pre jednotlivé tlačidlá sa aktivujú obslužné procedúry:

private void Animation_Begin(object sender, RoutedEventArgs e)
{
  sbPohyb.Begin();
}

private void Animation_Pause(object sender, RoutedEventArgs e)
{
   sbPohyb.Pause();    
}

private void Animation_Resume(object sender, RoutedEventArgs e)
{
  sbPohyb.Resume();
}

private void Animation_Stop(object sender, RoutedEventArgs e)
{
   sbPohyb.Stop();
}

Po spustení aplikácie môžeme ovládanie animácie vyskúšať.

Riadenie animácie pomocou tlačidiel

Vytvorenie animácie v grafickom návrhovom prostredí

V predchádzajúcom príklade bola animácia vytvorená priamo v XAML kóde. Pre zložitejšie animácie je výhodné využiť vizuálne návrhové možnosti prostredia Expression Blend.

V časti pracovnej plochy v záložke označenej Object and Timeline vytvorte nový objekt typu Storyboard.

„Nahrávanie“ postupu animácie funguje jednoducho a intuitívne. Zobrazí sa časová os a Canvas sa prepne do režimu nahrávania. Všimnite si, že v tomto režime je canvas ohraničený červeným rámikom a v ľavom hornom rohu je červený krúžok ako symbol režimu nahrávania. Úseky na časovej osi sú označené časovou stupnicou. Presuňte kurzor (zvislú žltú čiaru ) do ďalšieho časového úseku a pomocou vzťažných bodov zmeňte scénu.

Nahrávanie animácie na časovej osi. Všimnite si menu pre vytvorenie nového objektu

Tieto zmeny sa automaticky zaznamenajú v XAML kóde (náš ilustračný výpis je skrátený):

<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)
[3].(TranslateTransform.X)">
	<EasingDoubleKeyFrame KeyTime="00:00:01.8000000" Value="39"/>
	<EasingDoubleKeyFrame KeyTime="00:00:02.7000000" Value="33"/>
	<EasingDoubleKeyFrame KeyTime="00:00:03.6000000" Value="94"/>
	<EasingDoubleKeyFrame KeyTime="00:00:04.6000000" Value="100"/>
</DoubleAnimationUsingKeyFrames>

Aby sa animácia cyklicky opakovala, môžeme zmeniť vlastnosť „Repeat behavior“ . Variácií a možností na tému animácia je v prostredí Silverlight tak veľa, že máme pre vás len jedno odporúčanie – vyskúšať si to na vlastnom projekte.

Animation Easing

Pre niektoré scény je dôležité ich reálne rozpohybovanie. Aby pohyb objektov verne odrážal reálne prostredie a v ňom platiace fyzikálne zákony, môžete využiť funkciu Easing, ktorá riadi animáciu pomocou matematických rovníc popisujúcich fyzikálne zákony. Funkcií pre Easing je veľké množstvo (), na praktickom príklade ukážeme funkciu BounceEase, napodobňujúcu skákanie pružného objektu pri odraze od podložky, čiže zjednodušene povedané, ak pustíte pingpongovú loptičku na betón a ona začne skákať:

<Canvas x:Name="LayoutRoot" Background="White">
	<Canvas.Resources>
		<Storyboard x:Name="pohyb">
			<DoubleAnimation From="0" To="200" Duration="0:0:5"
			Storyboard.TargetName="kruh"
			Storyboard.TargetProperty="(Canvas.Top)">
				<DoubleAnimation.EasingFunction> <BounceEase EasingMode="EaseOut" Bounces="10" Bounciness="1"></BounceEase>
				</DoubleAnimation.EasingFunction>
			</DoubleAnimation>
		</Storyboard>
	</Canvas.Resources>
	<Ellipse Name="kruh" Width="50" Height="50" Fill="Blue" 
	Canvas.Top="0" Canvas.Left="0" ></Ellipse>
</Canvas>

Nezabudnite pridať kód pre spustenie animácie, buď hneď po spustení, alebo ako reakciu na nejakú udalosť, napríklad na kliknutie myšou na grafický objekt:

public partial class MainControl : UserControl
{
	public MainControl()
	{
		InitializeComponent();
		pohyb.Begin();
	}
}

Po spustení aplikácie sa zobrazí skákajúca guľôčka, pričom podobne ako v reálnom svete môžete meniť napríklad vlastnosti (pružnosť) guľôčky a podobne a sledovať ako sa zmení pohyb animovaného objektu.

Späť na obsah