Wprowadzenie

Zastanówmy się najpierw, czym w ogóle jest animacja. Nie wchodząc w szczegóły, można powiedzieć, że jest to iluzja stworzona za pomocą serii szybko zmieniających się obrazów. Ze względu na właściwości naszego oka, ciąg pojedynczych kadrów wyświetlanych w odpowiednio szybkim tempie, wywołuje wrażenie płynnego ruchu. Na tej samej zasadzie funkcjonuje oczywiście model animacji w Microsoft Expression Blend. Program dostarcza nam zestaw gotowych narzędzi do tworzenia profesjonalnych klipów oraz animowanych elementów, które mogą posłużyć do budowy interfejsu aplikacji. Na podstawową strukturę animacji w Expression Blend składa się linia czasu, służąca do definiowania poszczególnych kadrów (klatek kluczowych – keyframes) oraz wyzwalacze (triggers), reagujące na zdarzenia, takie jak wciśnięcie klawisza, ruch myszy czy zmiana wielkości obrazu. Wszystkie animacje tworzone są w omawianym wcześniej oknie Objects and Timeline, w panelu interakcji (Interaction Panel).

Okno Objects and Timeline.

Organizacja procesu animowania jest zawsze taka sama, bez względu na wiele możliwości tworzenia ruchu dla kontrolek czy obiektów. Expression Blend przetwarza poszczególne właściwości elementów, rzutując ich zmiany na odpowiednie fragmenty linii czasu. Animacji może przy tym podlegać dowolny atrybut obiektu – także ten, który nie jest bezpośrednio widoczny na ekranie.

System animacji w Windows Presentation Foundation

Przyjrzyjmy się teraz nieco dokładniej modelowi animacji w Windows Presentation Foundation. System ten zarządza wszystkimi mechanizmami generującymi zmiany danych w czasie oraz rysującymi obiekty na ekranie. Dostarczając odpowiednie klasy, uwalnia nas od konieczności samodzielnego definiowania podstawowych elementów, co cały proces czyni znacznie bardziej wydajnym.

Aby móc sprawnie posługiwać się systemem animacji w Windows Presentation Foundation, należy zapoznać się z kilkoma najważniejszymi koncepcjami, które legły u podstaw jego konstrukcji. Przede wszystkim pamiętajmy, że obiekty animowane są poprzez zmianę wartości ich poszczególnych właściwości. Gdybyśmy na przykład chcieli stworzyć klip prezentujący skalowanie elementu, powinniśmy odpowiednio zmodyfikować wartości Width oraz Height w wybranym punkcie czasu. W wypadku zmiany przezroczystości, będziemy z kolei animować atrybut Opacity – i tak dalej. Aby możliwe było utworzenie animacji, dana właściwość musi jednak spełniać pewne standardowe wymagania. Po pierwsze, musi mieć charakter zależny. Po drugie, musi należeć do klasy, która dziedziczy z DependencyObject i implementuje interfejs Ianimatable. Po trzecie zaś, rodzaj właściwości musi być zgodny z typem animacji. Jeśli zmianie będzie ulegać na przykład właściwość typu double, konieczne okaże się użycie typu animacji DoubleAnimation.

Typy animacji

Ponieważ animacje generują wartości właściwości, istnieją różne typy animacji dla różnych rodzajów właściwości. Zostały one zebrane w jednej przestrzeni nazw System.Windows.Media.Animation. Zastosowano także dla nich czytelną konwencję nazewnictwa, aby można było je łatwiej odróżnić. Nomenklatura to została zaprezentowana w poniższej tabeli:

Przyjrzyjmy się wskazanym wyżej typom animacji na przykładach. Na początek stwórzmy prosty klip, w którym będziemy przemieszczać jeden obiekt – prostokąt – względem narysowanej na ekranie krzywej. Po uruchomieniu Expression Blend umieszczamy więc na siatce prostokąt oraz za pomocą pióra rysujemy krzywą:

Rysujemy krzywą w przestrzeni roboczej.

Następnie zaznaczamy oba elementy i zamieniamy je na krzywą ruchu (Motion Path), za pomocą opcji Convert To Motion Path, dostępnej w menu Object | Path. Przyjrzyjmy się, jak teraz wygląda panel interakcji. Jak widać, cała transformacja została automatycznie utworzona:

Widok okna Object and Timeline w panelu Interaction.

Zwróćmy uwagę na to, że program wygenerował także zdarzenie Window.Loaded (sekcja Triggers), które powoduje uruchomienie animacji (Timeline1 Begin). Cały klip ma w naszym wypadku trwać dwie sekundy i wykona się tylko raz. Oczywiście nie jest to jedyna dostępna możliwość. Klikając prawym przyciskiem myszy klatkę animacji, uzyskamy dostęp do opcji Edit Repeat Count, która pozwoli nam na ustawienie żądanej wielokrotności – w tym także powtarzania ciągłego animacji.

Spójrzmy teraz, jak nasza animacja prezentuje się w widoku kodu XAML:

System Windows Presentation Foundation oferuje projektantom kilka wbudowanych klas animacji, na przykład DoubleAnimation, ColorAnimation, czy PointAnimation. Każda klasa służy do animacji wartości odpowiedniego typu – Double, Color, Point i innych.

Wspominaliśmy wcześniej o trzech koniecznych warunkach, które musi spełnić właściwość, by możliwe było stworzenie klipu. Ostatni z nich dotyczył zgodności rodzaju właściwości z typem animacji. Oczywiście nie oznacza to, że zakres naszych działań jest ograniczony do typów domyślnych – w Expression Blend możemy także tworzyć własne klasy. Gdybyśmy na przykład chcieli wygenerować animację dla tekstu w obiekcie TextBlock, to okaże się, że standardowo takiej klasy nie ma. Dlatego też będziemy musieli stworzyć własną klasę StringAnimation.