QuickStarts
QUICKSTARTS

animácie

Silverlight prináša spôsob ako definovať animácie. Táto príručka predstavuje vlastnosti Silverlight animácií a spôsob ako vytvoriť Vašu prvú Silverlight animáciu.

Tento dokument obsahuje nasledujúce sekcie.

Rekapitulácia: animovanie objektu

krok 1: nájdenie niečoho na animovanie
krok 2: vytvorenie EventTrigger-u
krok 3: vytvorenie Storyboard-u a animácie

ďalšie typy animácií
vlastnosti časových osí
špecifikovanie hodnôt animačných prechodov
čo ďalej?

Rekapitulácia: animovanie objektu

krok 1: nájdenie niečoho na animovanie

Najprv potrebujete niečo na animovanie. V nasledujúcej ukážke použijete Elipsu. Nasledujúca ukážka vytvorí Elipsu a na začiatku ju vyplní na čierno.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
</Canvas>

[skryť] [restart]

Poznámka - elipsa má meno:

x:Name="ellipse"

Elipsa musí mať meno, aby mohla byť animovaná. (Veľmi špecifické, elipsa musí mať meno aby mohla byť adresovaná animáciou, ktorá je definovaná niekde inde v XAML.) Teraz máte objekt na animovanie, nasledujúci krok je vytvoriť EventTrigger, ktorý bude štartovať animáciu.

krok 2: vytvorenie EventTrigger-u

EventTrigger prevádza akciu, ak ho niečo spustí. Ako jeho názov naznačuje, "niečo" je udalosť, špecifikovaná pomocou RoutedEvent vlastnosti. Pretože chcete, aby EventTrigger spúšťal animáciu, použite BeginStoryboard ako jeho akciu.

Taktiež sa musíte rozhodnúť, ktorá udalosť bude spúšťať animáciu. V Silverlight 1.0 táto voľba je jednoduchá, pretože EventTrigger objekty podporujú iba 1 udalosť, Loaded udalosť. Nastavte RoutedEvent vlastnosť na Canvas.Loaded. Toto spustí animáciu, keď sa hlavný Canvas (plátno) načíta. Nasledujúca ukážka zobrazuje ako na to.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Canvas.Triggers> <EventTrigger
    RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard>           
          <!-- Insert Storyboard here.
          -->
 </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers>   
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[skryť] [restart]

Teraz ste pripravení k vytvoreniu Storyboard a animácie.

krok 3: vytvorenie Storyboard-u a animácie

Storyboard môže popisovať a ovládať jednu alebo viac animácií. Pre túto ukážku použijeme jednoduchú animácu. V Silverlight animujete objekty nastavením animácií vo vlastnostiach objektu. Použite DoubleAnimation (dvojitú animáciu) k animovaniu Canvas.Left vlastnosti Elipsy. Používate DoubleAnimation, pretože vlastnosť, ktorá bola animovaná, Canvas.Left, je typu Double (číslo s dvojitou presnosťou pohyblivej rádovej čiarky).

Aby sa animácia uskutočnila, musíte jej určiť cieľové meno (Storyboard.TargetName="ellipse"), cieľovú vlasnosť (Storyboard.TargetProperty="(Canvas.Left)"), hodnotu, po ktorú má animovať (To="300"), a Trvanie (Duration="0:0:1"). Vlastnosť Trvanie špecifikuje dĺžku času, ktorý uplynie pri animácii počas prechodu zo začiatočnej pozície po konečnú. Hodnota 0:0:1 špecifikuje Trvanie jednu sekundu.

(Možno budete musieť kliknúť na "restart" tejto animácie v Quickstarte, pretože pravdepodobne už prebehla pokiaľ ste si prezerali predchádzajúce ukážky na tejto stránke. Podľa jej nastaveného Duration (Trvania) a RepeatBehavior (nastavenie opakovania), táto animácia sa nebude opakovať, pokým nereštartujete kód jeho načítaním znova.)

[skryť XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
 <Storyboard> <DoubleAnimation
    Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)"
    To="300"
    Duration="0:0:1"
    /> </Storyboard>         </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[skryť] [restart]

Použili ste DoubleAnimation pretože vlasnosť, ktorú sme animovali, Canvas.Left, je typu Double (Double je číslo s dvojitou presnosťou pohyblivej rádovej čiarky).

Gratulujeme! Práve ste vytvorili vašu prvú Silverlight-ovú animáciu. Čítajte ďalej, ak sa chcete dozvedieť viac o animovacom systéme Silverlight.

ďalšie typy animácií

Silverlight podporuje tiež animácie farby (ColorAnimation) a bodov (PointAnimation). Ak animujete farby, pamätajte na rozdiel medzi farbou a SolidColorBrush; prvé je vlastnosť druhého. Ak špecifikujete názov farby, alebo hexadecimálnu hodnotu k nastaveniu Pohybu (Stroke) a Výplne (Fill), vlastností pre útvar, Silverlight konvertuje tento reťazec v SolidColorBrush. K animovaniu útvarov Pohyb (Stroke) alebo Výplň (Fill), musíte animovať vlastnosť Farbu (Color), SolidColorBrush použijete na nastavenie tejto vlastnosti. Vo všeobecnosti, ak chcete animovať vlastnosť, ktorú vytvoríte štetcom, je vhodné použiť obšírnejšiu syntax pri deklarovaní tohoto štetca, radšej ako názov farby alebo hexadecimálnu hodnotu, môžete priradiť meno.

Nasledujúca ukážka animuje farbu dvoch elíps. Výplň prvej elipsy je explicitne nastavená použitím SolidColorBrush. Ukážka vezme meno SolidColorBrush a animuje jeho vlastnosť Farba (Color). Druhá animácia je trochu viac komplexná, pretože Výplň (Fill) druhej elipsy je nastavená použitím mena farby. Keď animácia beží, tak systém vytvorí SolidColorBrush odpovedajúcej farby a použije ho k vykresleniu elipsy. Pretože tu nie je žiadna <SolidColorBrush> značka na pomenovanie, systémovo vygenerovaný SolidColorBrush môže byť animovaný iba použitím vlastnosti v kóde.

[skryť XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />
            <ColorAnimation 
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse 
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
 <Ellipse.Fill> <SolidColorBrush
    x:Name="e1_brush"
    Color="black"/> </Ellipse.Fill>   </Ellipse>
  
  <Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

[skryť] [restart]

vlastnosti časových osí

Obidva Storyboard a DoubleAnimation sú typy objektu Časová os (Timeline). Časová os má množstvo užitočných vlastností:

Storyboard.TargetName: Meno objektu, ktorý animujete. Ak nešpecifikujete Storyboard.TargetName, časová os použije Storyboard.TargetName svojej rodičovskej časovej osi. Ak nešpecifikujete Storyboard.TargetName žiadnej z jej rodičovských časových osí, časová os vezme vlastný EventTrigger, ktorý ju naštartuje.
Storyboard.TargetProperty: Vlastnosť, ktorú animujete. Ak nešpecifikujete Storyboard.TargetProperty, časová os použije Storyboard.TargetProperty svojej rodičovskej časovej osi. Syntax tejto vlastnosti sa mení, zavisí na type vlastnosti, ktorú animuje.
- K priradeniu pripojenej vlastnosti, použite nasledujúcu syntax: "(ownerType.propertyName)". Napríklad, "(Canvas.Top)" priradí vlastnosť Canvas.Top.
- K priradeniu vlastnosti akéhokoľvek iného typu, použite nasledujúcu syntax: "propertyName". Napríklad, "Opacity" priradí vlastnosť Priehľadnosť (Opacity).
BeginTime: Čas, kedy sa animácia spustí. Buďte opatrní so syntaxou, pretože predvolená jednotka sú "dni" (jednoduchým nastavením tejto vlastnosti na "2" má za následok nastavenie BeginTime na 2 dni!). Použite nasledujúcu syntax ku špecifikácii hodín, minút a sekúnd: hodiny:minúty:sekundy. Napríklad, "0:0:2" špecifikuje BeginTime na 2 sekundy (nula hodín, nula minút, 2 sekundy). Ak nešpecifikujete BeginTime, predvolene je vlastnosť nastavená na 0 sekúnd.
Duration: Dĺžka času, za ktorý sa animácia prehrá jedenkrát. Pre animáciu je táto dĺžka čas, ktorý uplynie od jej štartovacej pozície po koncovú. Vlastnosť Trvanie (Duration) používa približne rovnaký zápis syntaxe pre čas, ako vlastnosť BeginTime. Znova buďte opatrní, aby ste nešpecifikovali dni, ak budete chcieť špecifikovať sekundy. Trvanie (Duration) môže byť taktieť špecifikované pomocou špeciálnych hodnôt "Forever" (donekonečna) alebo "Automatic" (automaticky). Predvolená hodnota je "Automatic". Pre informácie o špeciálnych hodnotách si prezrite referenciu objektu Duration v SDK Silverlight-u.
FillBehavior: Ako bude animácia vyzerať, keď animovanie skončí. Táto vlastnosť má jednu alebo druhú hodnoty, Stop alebo HoldEnd. "Stop" vráti hodnotu vlastnosti do stavu, v akom bola predtým, ako animácia začala; "HoldEnd" hovorí, že hodnota animovanej vlastnosti ostane v stave, v akom bola na konci animácie. Predvolená hodnota je "HoldEnd".
RepeatBehavior: Vlastnosť, ktorá hovorí, koľko krát sa má animácia opakovať. Táto vlastnosť môže mať tri typy hodnôt: počet iterácií, časovú hodnotu, alebo špeciálnu hodnotu Forever (donekonečna).
- "Forever" spôsobí opakovanie animácie ńekonečne veľa krát.
- Konečná časová hodnota spôsobí, že animácia sa bude prehrávať počas daného časového intervalu. Napríklad, nastavenie RepeatBehavior na "0:0:5" pre animáciu s Duration (trvaním) 2.5 sekundy, zopakuje animáciu dvakrát.
- Hodnota počtu iterácií spôsobí, že animácia sa bude opakovať daný počet krát. Jasne určíte počet iterácií nasledujúcou syntaxou: iterationCount x. Napríklad hodnota "4x" bude opakovať animáciu štyri krát. Predvolená hodnota je "1x", ktorá prehrá animáciu jedenkrát.

Nasledujúca ukážka demonštruje použitie vlastností časovej osi.

[skryť XAML]

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Canvas.Triggers> <EventTrigger
            RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard>           <Storyboard 
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:1">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
 </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse
    x:Name="e1"
    Fill="Black"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="30"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="30">e1</TextBlock> 
                <Ellipse x:Name="e2" 
                        Fill="Red"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="50"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="50"
    Foreground="Red">e2</TextBlock> 
                <Ellipse x:Name="e3" 
                        Fill="Purple"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="70"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="70"
    Foreground="Purple">e3</TextBlock> 
                <Ellipse x:Name="e4" 
                        Fill="Blue"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="90"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="90"
    Foreground="Blue">e4</TextBlock> 
                <Ellipse x:Name="e5" 
                        Fill="Green"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="110"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="110"
    Foreground="Green">e5</TextBlock> 
                <Ellipse x:Name="e6" 
                        Fill="Black"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="130"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="130"
    Foreground="Black">e6</TextBlock> 
                <Ellipse x:Name="e7" 
                        Fill="Orange"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="150"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="150"
    Foreground="Orange">e7</TextBlock> 
                <Ellipse x:Name="e8" 
                        Fill="Red"
    Height="20"
    Width="20"
    Canvas.Left="30"
    Canvas.Top="170"/> <TextBlock
    Canvas.Left="0"
    Canvas.Top="170"
    Foreground="Red">e8</TextBlock> 
                </Canvas>

[skryť] [restart]

špecifikovanie hodnôt animačných prechodov

DoubleAnimation (dvojitá animácia), ColorAnimation (animácia farby), a PointAnimation (animácia bodu) majú vlastnosti From (od) a To (do), ktoré špecifikujú začiatočné a konečné hodnoty animovaných vlastností. Ak From (od) nie je špecifikovaná, tak aktuálna hodnota vlastnosti na animovaie je nastavená ako štartovacia hodnota animácie. Namiesto nastavenia konečnej hodnoty použitím vlastnosti To (do), môžete použiť vlastnosť By, k nastaveniu dĺžky.

čo ďalej?

Ďalšia časť skriptovanie popisuje ako vytvoriť Váš obsah interaktívny.



	AspNet.sk Vyvojari.sk Silverlight QuickStarts Príručka ASP.NET QuickStarts Príručka