Gewusst wie: Animieren von Größenänderungen mithilfe von Keyframes
In diesem Beispiel wird das Animieren von Größenänderungen mithilfe von Keyframes veranschaulicht.
Beispiel
Im folgenden Beispiel wird die SizeAnimationUsingKeyFrames-Klasse verwendet, um die Size-Eigenschaft eines ArcSegment zu animieren. In dieser Animation werden drei Keyframes folgendermaßen verwendet:
In der ersten halben Sekunde der Animation wird eine Instanz der LinearSizeKeyFrame-Klasse verwendet, um die Größe des Bogens graduell zu erhöhen. Durch lineare Keyframes wie LinearSizeKeyFrame wird ein glatter, linearer Übergang zwischen Werten ermöglicht.
Am Ende der nächsten halben Sekunde wird eine Instanz der DiscreteSizeKeyFrame-Klasse verwendet, um die Größe des Bogens abrupt zu erhöhen. Diskrete Keyframes wie DiscreteSizeKeyFrame ermöglichen abrupte Sprünge zwischen Werten, d.h. Änderungen der Animation treten plötzlich und deutlich sichtbar auf.
Im Verlauf der letzten zwei Sekunden wird eine Instanz der SplineSizeKeyFrame-Klasse verwendet, um die Größe des Bogens zu erhöhen. Spline-Keyframes wie SplineSizeKeyFrame erzeugen einen variablen Übergang zwischen Werten, die von der KeySpline-Eigenschaft bestimmt werden. In diesem Beispiel wächst die Größe des Bogens zunächst nur langsam und steigt dann exponentiell zum Ende des Zeitabschnitts.
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas HorizontalAlignment="Left" Margin="0" >
<!-- Create an arc on the screen that animates its size when it loads. -->
<Path Stroke="Black" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,200">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="myArcSegment" Size="90,80"
SweepDirection="Clockwise" Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="myBeginStoryBoard">
<Storyboard>
<!-- Animating the Size property uses 3 KeyFrames. -->
<SizeAnimationUsingKeyFrames
Storyboard.TargetName="myArcSegment"
Storyboard.TargetProperty="Size" >
<SizeAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearSizeKeyFrame, the size of the arc increases
gradually over the first half second of the animation. -->
<LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />
<!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
after the first second of the animation. -->
<DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />
<!-- Using a SplineSizeKeyFrame, the Size increases slowly at first
and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
<SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />
</SizeAnimationUsingKeyFrames.KeyFrames>
</SizeAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.
Siehe auch
Referenz
Konzepte
Übersicht über Keyframe-Animationen