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ą:

<Button Content=”Przycisk” x:Name=”przycisk” />

a w code-behind napiszmy sobie:

DoubleAnimation anim = new DoubleAnimation();

anim.From = 50;

anim.To = 150;

 

przycisk.BeginAnimation(WidthProperty, anim);

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:

BeginAnimation(WidthProperty, anim);

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.