Budowa aplikacji w technologii .NET wykład 11 – Animacje

(1)

Budowa aplikacji w technologii .NET

wykład 11 – Animacje

Wykonanie animacji w Windows Forms, MFS, Swingu, etc. opierało się na timerach i własnej funkcji rysującej:

1. Stworzenie timera, który co określoną liczbę milisekund odpala zdarzenie.

2. W reakcji na zdarzenie timera, należy dokonać wymaganych przez animację obliczeń, zmian parametrów, etc. (np. jeśli animujemy obracające się logo – zwiększamy kąt obrotu o stały stopień).

3. Następnie unieważniamy zawartość okna. Zmusi to system do wywołania naszej procedury rysującej.

4. W tej procedurze rysujemy kolejną klatkę animacji.

(2)

Wiążą się z tym problemy:

• Procedura rysująca odpowiada za wyświetlanie pikseli, nie kontrolek – zatem zawartość animacji musi być rysowana ręcznie (w WPF animacji podlegają dowolne własności elementów).

• Dodanie kolejnej animacji komplikuje kod (w WPF można składać bardziej złożone animacji z kilku prostszych).

• Stały framerate (ustawiony w timerze). Jego modyfikacja pociąga za sobą zmianę procedury obliczającej kolejną klatkę.

• Bardziej złożone sposoby animacji (np. przemieszczanie po ścieżce) wymagają bardziej złożonego kodu (w WPF animacje definiuje się w XAMLu).

W WPF model jest prostszy, gdyż okna samo dba o aktualizację swej zawartości, gdy zmienią się własności elementów. Ponadto nie wymaga ręcznej zmiany własności w reakcji na zdarzenia timera. Zamiast tego animacje definiuje się w sposób deklaratywny.

Animacja własności

Animacja w WPF nie wymaga zajmowania się serią klatek. Zamiast tego określamy jaka własność elementu w jaki sposób ma się zmieniać w czasie.

Ograniczenie: animacje dotyczą tylko dependency properties (a co za tym idzie, nie da się uzyskać w ten sposób efektów, których nie osiągniemy modyfikując własności, np. nie można animacją dodawać elementów do okna). Mogą one służyć uatrakcyjnieniu standardowej aplikacji, ale nie nadają się np. do gier.

(3)

Podstawy

Każda animacja operuje na pojedynczej własności.

Animowanie własności wymaga użycia klasy animacji właściwej dla typu tej własności.

Klasy animacji:

• zmieniających pewną wartość na drodze liniowej interpolacji (z wartości From do wartości To lub zwiększając wartość aktualną o By):

◦ ByteAnimation

◦ ColorAnimation

◦ DecimalAnimation

◦ DoubleAnimation

◦ Int16Animation

◦ Int32Animation

◦ Int64Animation

◦ PointAnimation

◦ Point3DAnimation

◦ QuarternionAnimation

◦ RectAnimation

◦ Rotation3DAnimation

◦ SingleAnimation

◦ SizeAnimation

◦ ThicknessAnimation

◦ VectorAnimation

◦ Vector3DAnimation

(4)

• zmieniających pewną wartość w określonych punktach czasu:

◦ BooleanAnimationUsingKeyFrames

◦ ByteAnimationUsingKeyFrames

◦ CharAnimationUsingKeyFrames

◦ ColorAnimationUsingKeyFrames

◦ DecimalAnimationUsingKeyFrames

◦ DoubleAnimationUsingKeyFrames

◦ Int16AnimationUsingKeyFrames

◦ MatrixAnimationUsingKeyFrames

◦ ObjectAnimationUsingKeyFrames

◦ PointAnimationUsingKeyFrames

◦ Point3DAnimationUsingKeyFrames

◦ QuarternionAnimationUsingKeyFrames

◦ RectAnimationUsingKeyFrames

◦ Rotation3DAnimationUsingKeyFrames

◦ SingleAnimationUsingKeyFrames

◦ SizeAnimationUsingKeyFrames

◦ StringAnimationUsingKeyFrames

◦ ThicknessAnimationUsingKeyFrames

◦ VectorAnimationUsingKeyFrames

◦ Vector3DAnimationUsingKeyFrames

(5)

• animacje wykorzystujące ścieżkę (PathGeometry):

◦ DoubleAnimationUsingPath

◦ MatrixAnimationUsingPath

◦ PointAnimationUsingPath

Możliwe jest też tworzenie własnych klas animacji.

Nie ma klas do animowania własności typu wyliczeniowego (np. HorizontalAlignment).

Zazwyczaj nie animuje się też typów referencyjnych (np. Brush – zamiast tego używa się np. ColorAnimation, DoubleAnimation do animacji własności pędzla).

Animacje w kodzie

Wymaga stworzenia obiektu animacji, ustawienia własności i odpalenia jej przy pomocy metody BeginAnimation() (zadeklarowanej w interfejsie IAnimatable).

<Grid>

<Button Name="cmdPowiększ" HorizontalAlignment="Center"

VerticalAlignment="Center" Padding="3"

Click="PowiększClick" >Powiększ</Button>

</Grid>

(6)

private void PowiększClick(object sender, RoutedEventArgs e) {

DoubleAnimation anim = new DoubleAnimation();

anim.From = cmdPowiększ.ActualWidth;

anim.To = this.Width - 30;

anim.Duration = TimeSpan.FromSeconds(3);

cmdPowiększ.BeginAnimation(Button.WidthProperty, anim);

}

(7)

From – początkowa wartość własności (gdybyśmy ustawili tu stałą wartość, wówczas własność zostałaby zresetowana do niej na początku animacji):

anim.From = 160;

Jeśli jej nie określimy, animacja zaczyna się od wartości aktualnej (ale musiała być ona wcześniej jawnie ustawiona: w kodzie, w XAMLu lub przez settera, ale nie przez kontener).

private void Window_Loaded(object sender, RoutedEventArgs e) {

cmdPowiększ.Width = cmdPowiększ.ActualWidth;

}

To – wartość końcowa. Podobnie jak From, można ją opuścić. Oznaczać to będzie powrót do początkowej wartości (czyli aktualnej wartości, nie licząc animacji).

anim.Duration = TimeSpan.FromSeconds(3);

(8)

Aby to zadziałało, aktualna wartość szerokości już musiała zostać zmodyfikowana przez jakąś animację. Możemy to wykorzystać, aby stworzyć animację powrotu (wykorzystując zdarzenie Completed, oznaczające zakończenie animacji):

private void PowiększClick(object sender, RoutedEventArgs e) {

anim.To = this.Width - 30;

anim.Completed += anim_Completed;

}

void anim_Completed(object sender, EventArgs e) {

}

(9)

Inne rozwiązanie (automatyczny powrót do pierwotnej własności – odwrócenie animacji):

anim.AutoReverse = true;

Inne rozwiązanie (powrót do pierwotnej własności bez animacji):

anim.FillBehavior = FillBehavior.Stop;

Animacja po zakończeniu nadal istnieje i ma wpływ na aktualną wartość własności. Aby zlikwidować wpływ animacji, należy usunąć jej obiekt:

cmdPowiększ.BeginAnimation(Button.WidthProperty, null);

By – można użyć, zamiast podawania To. Zmienia własność o podaną wartość.

anim.By = 100;

odpowiada to:

anim.To = cmdPowiększ.Width + 100;

(10)

Podobny efekt można osiągnąć ustawiając flagę IsAdditive:

anim.From = 0;

anim.To = 100;

anim.IsAdditive = true;

Duration – określamy czas trwania a nie szybkość animacji – zatem powiększanie przycisku zawsze będzie trwało 3 sekundy, niezależnie od rozmiaru okna.

Uwaga: na własności nie można wykonywać kilku animacja na raz (odpalenie kolejnej, przerywa poprzednią). Może spowodować to wrażenie, że animacja zwolniła – gdyż dla nowej animacji znów ustawiono czas trwania 3 sekundy.

Można odpalić (niezależnie) animacje różnych własności elementu:

cmdPowiększ.BeginAnimation(Button.WidthProperty, ...);

cmdPowiększ.BeginAnimation(Button.HeightProperty, ...);

(11)

Inne własności animacji:

BeginTime – wymusza opóźnienie rozpoczęcia animacji (TimeSpan).

SpeedRatio – szybkość animacji, domyślnie 1.

AccelerationRatio, DecelerationRatio – do animacji nieliniowej, która przyśpiesza na początku, a zwalnia na końcu. Wartości od 0 do 1 określają jaką część czasu trwania ma zająć przyśpieszanie lub zwalnianie.

anim.AccelerationRatio = 0.3;

anim.DecelerationRatio = 0.3;

(12)

RepeatBehavior – pozwala powtarzać animację określoną liczbę razy, przez określony czas lub bez końca (RepeatBehavior.Forever).

anim.Duration = TimeSpan.FromSeconds(0.5);

anim.AutoReverse = true;

anim.RepeatBehavior = new RepeatBehavior(3);

lub:

anim.RepeatBehavior =

new RepeatBehavior(TimeSpan.FromSeconds(2.5));

Można ustawić flagę IsCumulative, wówczas kolejne powtórzenie animacji rozpocznie się od ostatniego stanu poprzedniej (a nie stanu początkowego – działa to jak domyślne ustawienie IsAdditive dla kolejnych powtórzeń).

(13)

Animacje w XAMLu

Animacja w XAMLu definiowana jest w obiekcie storyboard. Reprezentuje on przebieg animacji, pozwala na grupowanie kilku animacji, kontrolowanie animacji. Ponadto pełni podobną rolę, co wywołanie metody BeginAnimation().

</Storyboard>

Inny wariant (TargetName i TargetProperty to własności dołączone):

<DoubleAnimation Storyboard.TargetName="cmdPowiększ"

Storyboard.TargetProperty="Width"

From="160" To="300" Duration="0:0:5" />

</Storyboard>

(14)

Do uruchomienia animacji konieczny jest EventTrigger. Jego zadaniem jest odpalenie animacji. (EventTrigger nie musi znajdować sie w Stylu.)

<Button Padding="3" HorizontalAlignment="Center"

VerticalAlignment="Center" Width="160">

<Button.Triggers>

<EventTrigger RoutedEvent="Button.Click">

<EventTrigger.Actions>

<DoubleAnimation To="300"

Duration="0:0:5"

Storyboard.TargetProperty="Width" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Button.Triggers>

Powiększ

</Button>

Nie musimy określać TargetName – wówczas automatycznie użyty zostanie element, w którym zagnieżdżono storyboard.

(15)

W XAMLu nie ma obsługi wyrażeń, dlatego wartość docelowa została ustawiona na stałą.

Wartość tę można odczytać z innej własności przy pomocy bindingu:

... To="{Binding ElementName=window,Path=Width}" ...

Jeśli chcemy bardziej złożonych obliczeń, powinniśmy napisać własnego

IValueConvertera lub stworzyć własność zależnościową do której będziemy mogli dowiązać i która zajmie się obliczeniami.

Poza EventTriggerem możemy również używać PropertyTriggerów:

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

</Style.Triggers></Style>

(16)

...

Powiększ

</Button>

Trigger.EnterActions to akcje wykonywane, w chwili gdy własność przyjmuje wskazaną wartość. Trigger.ExitActions są wykonywane, gdy następuje utrata tej wartości (wracamy do false).

Wszystkie animacje umieszczone w storyboard są automatycznie synchronizowane:

<DoubleAnimation Storyboard.TargetProperty="Width"

By="100" Duration="0:0:0.5" />

<DoubleAnimation Storyboard.TargetProperty="Height"

By="50" Duration="0:0:0.5" />

</Storyboard>

Możemy korzystać ze SpeedRatio, aby przyśpieszyć niektóre animacje, BeginTime, aby opóźnić rozpoczęcie innych, etc.

(17)

Przykład – wykorzystanie do animacji przejścia (między dwoma obrazkami). Obrazki umieszczamy w Gridzie – jeden na drugim:

<Grid>

</Grid>

W momencie ładowania okienka uruchamiamy animację zmieniającą przeźroczystość górnego obrazka:

<Window.Triggers>

<EventTrigger.Actions>

<DoubleAnimation Duration="0:0:5"

Storyboard.TargetProperty="Opacity"

To="0" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Window.Triggers>

(18)

(19)

Ciekawszym rozwiązaniem jest wykorzystanie i animowanie maski przeźroczystości.

<Image.OpacityMask>

<GradientStop Offset="0" Color="Transparent"

x:Name="transparentStop" />

<GradientStop Offset="0" Color="Black"

x:Name="visibleStop" />

</LinearGradientBrush>

</Image.OpacityMask>

</Image>

...

<DoubleAnimation Storyboard.TargetName="visibleStop"

Storyboard.TargetProperty="Offset"

From="0" To="1.2" Duration="0:0:6" />

<DoubleAnimation Storyboard.TargetName="transparentStop"

Storyboard.TargetProperty="Offset" BeginTime="0:0:1"

From="0" To="1" Duration="0:0:5" />

</Storyboard>

(20)

(21)

WPF daje możliwość kontrolowania animacji przy pomocy następujących klas akcji:

• PauseStoryboard

• ResumeStoryboard

• StopStoryboard (zatrzymanie nie jest równoważne zakończeniu, bo nie zachowuje końcowej wartości własności, a wraca do początkowej)

• SeekStoryboard (skok do wskazanej pozycji)

• SetStoryboardSpeedRatio

• SkipStoryboardToFill (skok do końca)

• RemoveStoryboard (zatrzymuje i usuwa) Dodajmy przyciski do kontroli animacji:

<StackPanel Orientation="Horizontal"

HorizontalAlignment="Center" DockPanel.Dock="Bottom">

<Button Name="cmdStart" >Start</Button>

<Button Name="cmdPause">Pause</Button>

<Button Name="cmdResume">Resume</Button>

</StackPanel>

</DockPanel>

(22)

Następnie event trigger do uruchomienia animacji:

<Window.Triggers>

<EventTrigger SourceName="cmdStart"

RoutedEvent="Button.Click">

...

</Storyboard>

</BeginStoryboard>

</EventTrigger>

...

</Window.Triggers>

(23)

W podobny sposób event triggery do pozostałych akcji (podajemy tylko jakiego BeginStoryboard mają dotyczyć). Uwaga: jest to nazwa BeginStoryboard a nie Storyboard.

<Window.Triggers>

...

<EventTrigger SourceName="cmdPause"

<PauseStoryboard

BeginStoryboardName="fadeStoryboardBegin"/>

</EventTrigger>

<EventTrigger SourceName="cmdResume"

<ResumeStoryboard

</EventTrigger>

<EventTrigger SourceName="cmdStop"

<StopStoryboard

</EventTrigger>

</Window.Triggers>

(24)

(Możemy to też kontrolować zwyczajnie wywołując metody Stop(), Pause(), Resume(), etc.

z obiektu Storyboard. Ale użycie powyższych akcji pozwala nam łatwo uruchamiać i zatrzymywać animację w triggerach, np. po najechaniu myszą na element.)

(25)

Przebieg animacji możemy monitorować przy użyciu poniższych zdarzeń:

• Completed – animacja została zakończona

• CurrentGlobalSpeedInvalidated – zmianie uległa szybkość animacji (oznacza to również pauzę, wznowienie, zmianę pozycji)

• CurrentStateInvalidated – uruchomienie lub zakończenie

• CurrentTimeInvalidated – tyknięcie zegara animacji (również uruchomienie lub zakończenie)

• RemoveRequested – usuwanie animacji

Może wykorzystać CurrentTimeInvalidated, by dodać wskaźnik zaawansowania animacji.

...

<ProgressBar Name="progres" DockPanel.Dock="Bottom"

Height="10" Minimum="0" Maximum="1" />

...

</DockPanel>

(26)

Dodajemy obsługę zdarzenia:

<Window.Triggers>

<Storyboard CurrentTimeInvalidated=

"Storyboard_CurrentTimeInvalidated">

...

</Storyboard>

</BeginStoryboard>

</Window.Triggers>

Nadawcą zdarzenia jest Clock, z którego możemy odczytać postęp animacji:

private void Storyboard_CurrentTimeInvalidated(object sender, EventArgs e) {

Clock clock = (Clock)sender;

if(clock.CurrentProgress != null)

progres.Value = (double)clock.CurrentProgress;

}

(27)

(28)

Domyślnie animacje działają w 60 klatkach na sekundę. Jeśli animacja jest zbyt

wymagająca (intensywnie wykorzystuje przeźroczystość, materiał wideo, duże bitmapy) możemy chcieć ją zmniejszyć, by poprawić wydajność:

...

</Storyboard>

(29)

Posługiwanie się animacjami Co animować?

• Jeśli chcemy, by elementy pojawiały się i znikały: Opacity.

• Jeśli chcemy przemieszczać elementy: Canvas.Left, Canvas.Top (jeśli kontenerem jest Canvas), ewentualnie Margin lub/i Padding (przy pomocy

ThicknessAnimation), ewentualnie MinWidth i MinHeight kolumny lub wiersza w Gridzie.

• RenderTransform – aby przemieszczać (TranslateTransform), obracać

(RotateTransform), skalować (ScaleTransform) elementy. Działają szybciej niż animacja własności określających rozmiar czy pozycję.

• ColorAnimation – aby modyfikować własności pędzla.

(30)

Animacja transformacji

Każdy element ma dwa rodzaje transformacji: RenderTransform (stosowana przed

wyświetleniem obiektu) i LayoutTransform (stosowana przed ułożeniem elementów przez kontener). (Animacja nie może stworzyć transformacji, a jedynie animować własności istniejącej.)

Przykład: obracający się przycisk.

<Button.RenderTransform>

<RotateTransform/>

</Button.RenderTransform>

OK

</Button>

(31)

EventTrigger do uruchomienia animacji:

<DoubleAnimation Storyboard.TargetProperty=

"RenderTransform.Angle" To="360" Duration=

"0:0:1" RepeatBehavior="Forever"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

(32)

I do zakończenia (powrotu do stanu początkowego):

"RenderTransform.Angle" Duration="0:0:0.2"/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

(33)

Parametry przycisku możemy ustawić w stylu:

<Setter Property="RenderTransformOrigin"

Value="0.5,0.5"/>

<Setter.Value>

</Setter.Value>

</Setter>

<Style.Triggers>

<EventTrigger ...

</Style.Triggers>

</Style>

(34)

Teraz każdy z przycisków będzie używał tej animacji:

<Button>jeden</Button>

<Button>cztery</Button>

</StackPanel>

(35)

Jeśli wymienimy RenderTransform na LayoutTransform:

(36)

Aby animować bardziej złożone rodzaje transformacji najlepiej umieścić je w TransformGroup:

<Border.RenderTransform>

</TransformGroup>

</Border.RenderTransform>

Następnie:

"RenderTransform.Children[0].ScaleX" .../>

"RenderTransform.Children[0].ScaleY" .../>

"RenderTransform.Children[1].Angle" .../>

(37)

Zamiast animowania transformacji elementu, można rozważyć animację prostokąta wypełnionego VisualBrushem:

<Rectangle.Fill>

</Rectangle.Fill>

<Rectangle.RenderTransform>

...

</Rectangle.RenderTransform>

</Rectangle>

(38)

Animowanie pędzli

Kolor pędzla animujemy przy pomocy klasy ColorAnimation. Wymaga stworzenia pędzla:

<Ellipse.Fill>

<RadialGradientBrush>

<GradientStop Color="Yellow" Offset="0"/>

<GradientStop Color="LawnGreen" Offset="1"/>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

(39)

Teraz możemy ustawić jego właściwości:

<ColorAnimation Storyboard.TargetName="elipsa"

To="DeepSkyBlue" Storyboard.TargetProperty=

"Fill.GradientStops[1].Color" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever"/>

</Storyboard>

</BeginStoryboard>

(40)

PointAnimation pozwala przemieszczać punkt (działa to jak DoubleAnimation składowej X i Y). Dzięki temu możemy np. modyfikować kształt figury zbudowanej z punktów. W poniższym przykładzie animujemy centralny punkt gradientu radialnego.

<PointAnimation Storyboard.TargetName="elipsa"

Storyboard.TargetProperty="Fill.GradientOrigin"

From="0.7,0.3" To="0.3,0.7" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

(41)

Animacja z wykorzystaniem klatek kluczowych

Pozwala zdefiniować większą liczbę etapów animacji. Każda „klatka” ma określoną wartość docelową oraz czas. Można w ten sposób definiować bardziej złożony przebieg animacji (zmian wartości). Przykład:

<Grid>

<Ellipse Width="20" Height="20" Stroke="Black"

Fill="Yellow" Name="elipsa" />

</Grid>

(42)

Animacja rozmiaru:

<Window.Triggers>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName=

"elipsa" Storyboard.TargetProperty="Width"

RepeatBehavior="Forever">

<LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>

</DoubleAnimationUsingKeyFrames>

...

(43)

...

"elipsa" Storyboard.TargetProperty="Height"

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

Klatki określają węzły animacji – punkty, do jakich ma się udać animacja, wartości jakie mamy przyjąć. Dzielą one animację na wykonywane po kolei segmenty.

(44)

Poza interpolacją liniową między klatkami kluczowymi, możemy wybrać wartości dyskretne (nie dokonuje interpolacji – wartość jest przyjmowana w określonej chwili czasu):

<ColorAnimationUsingKeyFrames Storyboard.TargetName="elipsa"

Storyboard.TargetProperty="Fill.Color"

</ColorAnimationUsingKeyFrames>

Wartość KeyTime (koniec segmentu animacji) może być również określana procentowo.

Możemy używać różnych interpolacji w obrębie jednej animacji.

(45)

Dostępny jest jeszcze jeden rodzaj klatek kluczowych: oparte na krzywej Beziera. Używają interpolacji do zmiany wartości, ale zgodnie z krzywą Beziera. Dwa punkty krzywej są stałe (0,0 i 1,1), pozostałe dwa definiowane są przy pomocy KeySpline.

</Canvas>

(46)

"elipsa1" Storyboard.TargetProperty="(Canvas.Left)"

"elipsa2" Storyboard.TargetProperty="(Canvas.Left)"

<SplineDoubleKeyFrame Value="300" KeyTime="0:0:4"

KeySpline="0.5,0 0.5,1"/>

<SplineDoubleKeyFrame Value="0" KeyTime="0:0:8"

KeySpline="0.2,0.5 0.5,0.2"/>

</Storyboard>

(47)

Animation easing

Efekt nieliniowy na początku lub końcu zmiany wartości. Pozwala na bardziej naturalne animacje. Własność może np. łagodniej zbliżać się do wartości docelowej lub oscylować przez jakiś czas wokół niej.

<DoubleAnimation Storyboard.TargetName="cmdGrow"

Storyboard.TargetProperty="Width" To="400"

Duration="0:0:1.5">

<DoubleAnimation.EasingFunction>

<ElasticEase EasingMode="EaseOut" Oscillations="10"/>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

EasingMode (EaseOut, EaseIn, EaseInOut) określa, czy efekt ma być stosowany na początku czy końcu animacji.

(48)

Dostępne funkcje:

• BackEase – pozwala na „przestrzelenie się” (własność początkowo osiąga wartość przekraczającą docelową), by potem powoli dorównać

• ElasticEase – efekt sprężystości (przestrzelenie i słabnąca oscylacja)

• BounceEase – podobnie jak wyżej, ale bez przestrzelenia

• CircleEase, CubicEase, QuadraticEase, QuarticEase, QuinticEase, SineEase, PowerEase,

• ExponentialEase – steruje początkowym przyśpieszeniem i końcowym zwolnieniem przy użyciu różnych funkcji

Możemy to też stosować do klatek kluczowych – wymaga odpowiedniego typu klatki:

<EasingPointKeyFrame ...>

<EasingPointKeyFrame.EasingFunction>

<CircleEase></CircleEase>

</EasingPointKeyFrame.EasingFunction>

</EasingPointKeyFrame>

</PointAnimationUsingKeyFrames>

(49)

Animacje oparte na ścieżkach

Używają geometrii, by określić ustawianą przez animację wartość. Przeważnie stosowane do określania położenia (ale mogą działać dla dowolnych własności – jej wartość

odczytywana jest ze zdefiniowanej ścieżki).

Zaczynamy od zdefiniowania geometrii:

<Window.Resources>

<PathGeometry x:Key="gwiazda"

Figures="M 95,20 L 160,150 L 20,70 L 180,60 L 50,160 Z"/>

...

</Window.Resources>

Następnie możemy jej użyć do animacji położenie elipsy:

<DoubleAnimationUsingPath Storyboard.TargetName="elipsa3"

Storyboard.TargetProperty="(Canvas.Left)"

PathGeometry="{StaticResource gwiazda}"

Duration="0:0:5" RepeatBehavior="Forever" Source="X" />

<DoubleAnimationUsingPath Storyboard.TargetName="elipsa3"

Storyboard.TargetProperty="(Canvas.Top)"

PathGeometry="{StaticResource gwiazda}"

Duration="0:0:5" RepeatBehavior="Forever" Source="Y"/>

</Storyboard>

(50)

Efekty

WPF dysponuje zestawem efektów wizualnych, które możemy nadać dowolnemu elementowi. Są dwie grupy efektów: BitmapEffects (mniej wydajne) oraz Effects.

Przykład:

<Label.BitmapEffect>

<OuterGlowBitmapEffect GlowColor="Yellow"

GlowSize="20" Opacity="0.5"/>

</Label.BitmapEffect>

Hello world!

</Label>

<Button.Effect>

<BlurEffect Radius="5"/>

</Button.Effect>

OK

</Button>

(51)

BitmapEffects:

• BlurBitmapEffect – rozmycie (własności Radius, KernelType)

• BevelBitmapEffect – efekt wypukłej krawędzi (własności BevelWidth, EdgeProfile, LightAngle, Relief, Smoothness)

• EmbossBitmapEffect – efekt wyżłobienia (własności LightAngle, Relief)

• OuterGlowBitmapEffect – efekt halo (GlowColor, GlowSize, Noise, Opacity)

• DropShadowBitmapEffect – efekt cienia (Color, Direction, Noise, Opacity, ShadowDepth, Softness)

• BitmapEffectGroup – pozwala łączyć kilka efektów Effects:

• BlurEffect – rozmycie (własności Radius, KernelType, RenderingBias)

• DropShadowEffect – efekt cienia (własności BlurRadius, Color, Direction, Opacity, ShadowDepth, RenderingBias)

• ShaderEffect – pozwala zastosować efekt pixel shadera (należy wskazać gotowy, skompilowany plik)

Oczywiście efekty (ich własności) też możemy animować.

(52)

Frame-Based Animation

WPF pozwala również tworzyć własną, dowolną animację przez ręczne generowanie zawartości kolejnych ramek.

Należy obsłużyć statyczne zdarzenie CompositionTarget.Rendering. Będzie ono podnoszone cyklicznie (aby pobrać zawartość ramki do wyrenderowania).

CompositionTarget.Rendering += RenderFrame;

Naszym zadaniem jest dostarczenie zawartości: poprzez manipulację elementami okna, dodawanie nowych, etc.

private void RenderFrame(object sender, EventArgs e) {

...

Ellipse ellipse = new Ellipse();

ellipse.Width = ...;

ellipse.Height = ...;

ellipse.Fill = ...;

canvas.Children.Add(ellipse);

...

}