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.

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.

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:

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.

Dziś o animacjach. Chyba jednej z ciekawszych i rozbudowanej nowości, która pojawiła się w WPF’ie. Dzięki animacjom, nawet zieloni w tym temacie developerzy mogą stworzyć poruszające się interface’y. Animacje tworzy się w dosyć intuicyjny sposób, ale po kolei.

Pierwsza animacja

Zacznijmy od pokazania sobie jak możemy napisać animację w kodzie C#. Niech nasz XAML przyjmie postać taką:

a w code-behind napiszmy sobie:

I tyle. Nasza animacja jest gotowa. Po uruchomieniu zobaczmy jak szerokość naszego przycisku się zmienia. Siła animacji, tkwi w tym, że animacja ta nie jest związana z przyciskiem. Jest od niego niezależna. Wystarczy zmienić ostatnią linijkę naszego kodu na:

i szerokość będzie się zmieniać dla naszego okna!!

Kontrola

Animacje w WPF dają nam duże pole do manewru. W poprzednim przykładzie użyliśmy właściwości To oraz From, które definiują wartości graniczne. Co jeszcze możemy ustawić?

• Duration – pozwala ustawić jak długo nasza animacja ma się wykonywać.

• BeginTime – pozwala ustawić opóźnienie lub przyśpieszenie (czasu ujemny) wykonywania animacji.

• SpeedRatio – szybkość wykonywania animacji. Wartość (0-1> spowalnia ją, >1 przyśpiesza.

• AutoReverse – ustawienie tej właściwości spowoduje, że po zakończeniu nasza animacja “odtworzy się” w odwrotną stronę.

• RepeatBehavior – właściwość ta określa ile razy nasza animacja będzie uruchomiona. Przy jej użyciu możemy sprawić, że nasza animacja wykona się odpowiednią liczbę razy; wykona się do przez jakiś zadany czas (nawet, gdy jest on krótszy niż całkowita długość animacji; wykonanie naszej animacji w nieskończoność – RepeatBehaviour.Forever

• AccelerationRation oraz DecelerationRation – określają jaki procent czasu animacji ma ona odpowiednio przyśpieszać lub zwalniać. Ustawienie właściwości AccelerationRatio na 0.2 spowoduje, że 1/5 czasu naszej animacji prędkość jej odtwarzania będzie się zwiększać a następnie będzie miała stałą wartość.

• FillBehavior – określa co stanie się z animowaną właściwością po zakończeniu animacji. Możemy wybrać pomiędzy: Stop – przywróci wartość sprzed animacji, lub HoldEnd – wartość będzie taka jak po zakończeniu animacji.

• IsAdditive – powoduje, dodanie wartość ‘po animacyjnej’ do właściwości From,To. Pomocne, jeśli będziemy kontynuować animację w późniejszym czasie i chcemy rozpocząć, od miejsca gdzie skończyliśmy poprzednio.

• IsCumulative – działa wraz z właściwością RepeatBehavior. W przypadku np. 4 powtórzeń animacji od 50 do 100, przy ustawionej tej właściwości na true, animacja będzie zmieniać się w zakresie 50-250.

W następnym odcinku pokażemy sobie jak możemy stworzyć animacje w XAMLu.