Prejdi na obsah

WPF - Animácie

18. január 2010 - 18:06 poslal Marek Mikulec

Tento raz si povieme o animáciách vo WPF. Ukážeme si ako animovať rôzne prvky, alebo dokonca farebné prechody.
Prvá jednoduchá animácia bude ukázaná na tlačidle(button), ktoré automaticky zmení svoju šírku(weight), ak sa nad ním objaví kurzor.

  1. <Window x:Class="WpfApplication1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="Window1" Height="339" Width="355">
  5.  
  6.     <Grid>
  7.         <Button Height="23" Name="button1" Width="75" Content="Tlacidlo">
  8.             <Button.Triggers>
  9.                 <EventTrigger RoutedEvent="Button.MouseEnter">
  10.                     <EventTrigger.Actions>
  11.                         <BeginStoryboard>
  12.                             <Storyboard>
  13.                                 <DoubleAnimation 
  14.                                     Storyboard.TargetName="button1" 
  15.                                     From="75" To="100" 
  16.                                     Duration="0:0:1" 
  17.                                     Storyboard.TargetProperty="Width"/>
  18.                             </Storyboard>
  19.                         </BeginStoryboard>
  20.                     </EventTrigger.Actions>
  21.                 </EventTrigger>
  22.             </Button.Triggers>
  23.         </Button>
  24.  
  25.     </Grid>
  26. </Window>

Ako je z príkladu vidieť, je použitý triggers, vďaka ktorému tlačidlo zistí, že sa nad ním nachádza kurzor(MouseEnter). Najviac zaujímavou časťou kódu je DoubleAnimation. Tu je pomocou Storyboard.TargetName nastavený ciel našej animácie, ktorým je tlačidlo. From a To predstavuje hodnoty od do, ktoré sa budú pri animácii nadobúdať(od 75 do 100). Duration predstavuje čas, za ktorý sa má animácia vykonať a Storyboard.TargetProperty určuje, čo má meniť hodnoty. Ďalšími atribútmi môže byť AutoReverse(animácia sa vykoná aj smerom naspäť, tj. v našom príklade od 100 do 75 a RepeatBehavior(nastavuje, koľko krát sa má animácia vykonať).
Pokiaľ by sme chceli zväčšovanie istým spôsobom načasovať, tak aby sa od istej hodnoty zväčšovalo rýchlejšie alebo pomalšie, je nutné použiť DoubleAnimationUsingKeyFrames. V takom prípade by sme DoubleAnimation nahradili týmto kódom:

  1. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="button1" Storyboard.TargetProperty="Width" Duration="0:0:10">
  2.                                     <LinearDoubleKeyFrame Value="75" KeyTime="0:0:0" />
  3.                                     <LinearDoubleKeyFrame Value="80" KeyTime="0:0:1" />
  4.                                     <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
  5.                                 </DoubleAnimationUsingKeyFrames>

Ďalej by sme mohli nahradiť LinearDoubleKeyFrame napríklad za DiscreteDoubleKeyFrame(nedochádza k postupnému prechodu), alebo za SplineDoubleKeyFrame(hodnoty sú generované podľa krivky; v našom príklade je to úplne zbytočné, keďže vo výslednom efekte by sme nevideli žiadnu animáciu podľa krivky).

Ďalším príkladom môže byť zmena farby pomocou animácií.

  1. <Window x:Class="WpfApplication1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="Window1" Height="339" Width="355">
  5.  
  6.     <Grid>
  7.         <Rectangle Name="MyRectangle" Width="100" Height="100">
  8.             <Rectangle.Fill>
  9.                 <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
  10.             </Rectangle.Fill>
  11.             <Rectangle.Triggers>
  12.                 <EventTrigger RoutedEvent="Rectangle.MouseEnter">
  13.                     <BeginStoryboard>
  14.                         <Storyboard>
  15.                             <ColorAnimation Storyboard.TargetName="MySolidColorBrush"
  16.                                             Storyboard.TargetProperty="Color"
  17.                                             From="Blue" To="Red" Duration="0:0:1" />
  18.                         </Storyboard>
  19.                     </BeginStoryboard>
  20.                 </EventTrigger>
  21.             </Rectangle.Triggers>
  22.         </Rectangle>
  23.  
  24.     </Grid>
  25. </Window>

Ide o mierne pozmenený príklad z msdn.microsoft.com. Hneď ako sa dostane kurzor nad štvorec(MyRectangle) zmení svoju farbu z modrej(From="Blue") na červenú(To="Red"). Zmena bude spravená farebným prechodom, čiže nezmení sa hneď jedným skokom z modrej na červenú. Myslím si že viac kód netreba vysvetľovať, keďže použitie je veľmi podobné ako v prvom príklade, ibaže namiesto DoubleAnimation je použitý ColorAnimation.
Teraz si ukážeme ako môžeme pomocou animácií tlačidlom pohybovať. Tlačidlo sa nám bude hýbať krížom cez okno a hneď ako dorazí na koniec hodnôt, pôjde smerom napäť a následne znovu. Bude to teda vyzerať akoby sa tlačidlo odrážalo od nejakých neviditeľných bodov.

  1. <Window x:Class="WpfApplication1.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="Window1" Height="339" Width="355">
  5.  
  6.     <Grid>
  7.         <Canvas>
  8.         <Button Height="23" Name="button1" Width="75" Content="Tlacidlo" Canvas.Left="0" Canvas.Top="0">
  9.             <Button.Triggers>
  10.                 <EventTrigger RoutedEvent="Button.MouseEnter">
  11.                     <EventTrigger.Actions>
  12.                         <BeginStoryboard>
  13.                             <Storyboard>
  14.                                 <DoubleAnimation 
  15.                                     Storyboard.TargetName="button1" 
  16.                                     AutoReverse="True"
  17.                                     RepeatBehavior="Forever"
  18.                                     From="0" To="200" 
  19.                                     Duration="0:0:3" 
  20.                                     Storyboard.TargetProperty="(Canvas.Left)"/>
  21.                                 <DoubleAnimation 
  22.                                     Storyboard.TargetName="button1" 
  23.                                     AutoReverse="True"
  24.                                     RepeatBehavior="Forever"
  25.                                     From="0" To="200" 
  26.                                     Duration="0:0:3" 
  27.                                     Storyboard.TargetProperty="(Canvas.Top)"/>
  28.  
  29.                             </Storyboard>
  30.                         </BeginStoryboard>
  31.                     </EventTrigger.Actions>
  32.                 </EventTrigger>
  33.             </Button.Triggers>
  34.         </Button>
  35.         </Canvas>
  36.     </Grid>
  37. </Window>

Prvou zásadnou zmenou je, že tlačidlo sa nenachádza v Grid, ale v Canvas, pretože je pre nás tento prvok lepšie použiteľný. V príklade je vidieť, že sú použité naraz dve animácie, ktoré dávajú spolu výsledný efekt pohybu. Konkrétne ide o hodnoty Canvas.Left a Canvas.Top, ktoré sa postupne menia. Je dobré si takisto všimnúť, že animácie sú akoby spustené naraz, teda nevykoná sa najprv jedna a potom druhá, ale idú spolu. Ďalšími zmenami je AutoReverse a RepeatBehavior. Bez týchto dvoch hodnôt by sa prvok hýbal iba raz a navyše by nešiel naspäť.
Animácie vo WPF je možné takisto ako spustiť aj zastaviť a neskôr spustiť znovu vtedy, keď sa to hodí. Prvé spustenie už bolo ukázané vo všetkých príkladoch. Ide o BeginStoryboard. Pokiaľ by ste chceli tlačidlo zastaviť a neskôr znovu spustiť napr. kliknutím naň, museli by ste do aplikácie vložiť ďalší trigger a následne použiť buď PauseStoryboard alebo ResumeStoryboard či StopStoryboard.
Jednou z možností ako vytvoriť naozaj dobré animácie a to bez písania je kódu je použiť Microsoft Blend. Jednoduchý návod ako nato môžete nájsť napríklad na adrese:
http://programujte.com/?akce=clanek&cl=2008072702-microsoft-expression-blend-tvorba-animaci

Povedz o článku aj ostatným - www.pridej.cz

Prihlásenie

Nové komentáre