W poprzednim odcinku pokazaliśmy sobie jak możemy stworzyć animacje w WPFie za pomocą C#. Dziś zobaczymy jak można to zrobić przy użyciu deklaratywnego języka XAML.

EventTrigger i Storyboard

Przy okazji omawiania triggerów, wspomniałem o EventTriggerach i ich zastosowaniu do animacji. Zobaczmy mały przykład jak zdefiniujemy dany trigger oraz Stroyboard.

<Button Content=”Przycisk” x:Name=”przycisk” Width=”200″>

    <Button.Triggers>

        <EventTrigger RoutedEvent=”Button.Click”>

            <EventTrigger.Actions>

                <BeginStoryboard>

                    <Storyboard>

                        <DoubleAnimation To=”50″ Storyboard.TargetProperty=”Width” />

                    Storyboard>

                BeginStoryboard>

            EventTrigger.Actions>

        EventTrigger>

    Button.Triggers>

Button>

Omówmy poszczególne elementy krok po kroku:

Zaczynamy od zdefiniowania elementu EventTrigger i ustawienia jego właściwości RoutedEvent. Jego wartość ustawimy na Button.Click, zatem interesować nas będzie zdarzenia naciśnięcia przycisku. Następnie zdefiniujemy akcję, która się wykona, gdy nasze zdarzenie zajdzie. Robimy to w tagach EventTriggers.Actions. Zaczynamy od tagu BeginStoryboard a następnie definiujemy Storyboard. Storyboard zawiera animacje, zdefiniowane za pomocą klas XXXAnimation, które będą wykonywać się po zajściu zdarzenia.

Można by się zastanawiać, po co wprowadzać dodatkowo tag BeginStoryboard. Ma to swoje uzasadnienie. Animacją można rozpoczynać także odegranie dźwięku/filmu. Jeśli będziemy chcieli zatrzymać posłużymy się tagiem StopAnimation (przykład był przy omawianiu Multimediów). Stąd taka redundancja w tagach definiujących animację.

Do samej już animacji użyjemy klasy DoubleAnimation definiując jaką właściwość będziemy animować (Width) oraz końcową jej wartość(50).

Oczywiście tak samo jak w C# mamy dostępne właściwości za pomocą możemy kontrolować naszą animację. Dla przykładu ustawmy sobie AutoReverse oraz BeginTime.

<DoubleAnimation To=”50″ Storyboard.TargetProperty=”Width”

                AutoReverse=”True” BeginTime=”0:0:1″/>

Rodzaje animacji

Dotychczas w przykładach posługiwaliśmy się klasą DoubleAnimation jednak jest sporo innych klas na potrzeby animacji prócz tej. Kilka przykładów:

  • In32Animation

  • ColorAnimation

  • PointAnimation

Dodatkowo są także dostępne animacje, które używają “klatek”.

  • In32AnimationUsingKeyFrames

  • ColorAnimationUsingKeyFrames

  • PointAnimationUsingKeyFrames

  • StringAnimationUsingKeyFrames

Pokażmy jak możemy użyć tej ostatniej:

<StackPanel>

    <TextBlock Text=”” x:Name=”crawl” FontSize=”22″ HorizontalAlignment=”Center”/>

    <Button Content=”Przycisk” x:Name=”przycisk” Width=”200″>

        <Button.Triggers>

            <EventTrigger RoutedEvent=”Button.Click”>

                <EventTrigger.Actions>

                    <BeginStoryboard>

                        <Storyboard>

                            <StringAnimationUsingKeyFrames Storyboard.TargetProperty=”Text” Storyboard.TargetName=”crawl”>

                                <DiscreteStringKeyFrame Value=”A long time ago” KeyTime=”0:0:0″ />

                                <DiscreteStringKeyFrame Value=”in a galaxy far, far away…” KeyTime=”0:0:3″ />

                                <DiscreteStringKeyFrame Value=”StarWars” KeyTime=”0:0:7″ />

                                <DiscreteStringKeyFrame Value=”” KeyTime=”0:0:11″ />

                            StringAnimationUsingKeyFrames>

                            <DoubleAnimation Storyboard.TargetProperty=”FontSize” To=”60″

                                            Storyboard.TargetName=”crawl” BeginTime=”0:0:7″ Duration=”0:0:2″ />

                        Storyboard>

                    BeginStoryboard>

                EventTrigger.Actions>

            EventTrigger>

        Button.Triggers>

    Button>

StackPanel>

Poszczególne klatki animacji definiujemy jako DiscreteStringKeyFrame podając jej wartość i czas kiedy ma się dana klatka pojawić. Po uruchomieniu, tekst w kontrolce będzie zmieniał się z godnie z definicją a dodatkowo przy ostatniej klatce zwiększy się rozmiar czcionki, użytej do wyświetlenia napisu do rozmiaru 60.

Na dziś tyle, choć na pewno temat nie jest wyczerpany. W następnym odcinku będzie jeszcze trochę o animacjach przy użyciu klatek. Jednak już teraz warto pobawić się animacjami, gdyż jest to coś czego wcześniej developerzy WinForms nie mieli w swoim warsztacie. Warto spędzić trochę czasu na zapoznanie się z tym.