Gewusst wie: Animieren eines Objekts mithilfe von Keyframes
In diesem Beispiel wird gezeigt, wie ein Objekt mithilfe von Keyframes animiert wird. Es handelt sich in diesem Fall um die Background-Eigenschaft eines Page-Steuerelements.
Beispiel
Im folgenden Beispiel wird die ObjectAnimationUsingKeyFrames-Klasse verwendet, um Farbwechsel für die Background-Eigenschaft eines Page-Steuerelements zu animieren. Die Beispielanimation ändert in regelmäßigen Abständen den Hintergrundpinsel. Diese Animation verwendet die DiscreteObjectKeyFrame-Klasse, um drei verschiedene Keyframes zu erstellen. Die Animation verwendet Keyframes wie folgt:
Am Ende der ersten Sekunde wird eine Instanz der LinearGradientBrush-Klasse animiert. In diesem Abschnitt des Beispiels wird ein linearer Farbverlauf auf die Hintergrundfarbe angewendet, sodass die Farbe von gelb über orange zu rot wechselt.
Am Ende der letzten Sekunde wird eine Instanz der RadialGradientBrush-Klasse animiert. In diesem Abschnitt des Beispiels wird ein strahlenförmiger Farbverlauf auf die Hintergrundfarbe angewendet, sodass die Farbe von weiß über blau zu schwarz wechselt.
Am Ende der dritten Sekunde wird eine Instanz der DrawingBrush-Klasse animiert. In diesem Abschnitt des Beispiels wird ein Schachbrettmuster für den Hintergrund verwendet.
Die Animation startet erneut und wird endlos wiederholt.
.gif "Hinweis") Hinweis |
|---|
DiscreteObjectKeyFrame ist der einzige Keyframetyp, der mit der ObjectAnimationUsingKeyFrames-Klasse verwendet werden kann.Keyframes wie DiscreteObjectKeyFrame führen zu abrupten Werteänderungen, d. h. die Farbwechsel in diesem Beispiel erfolgen ruckartig. |
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
swap different brush objects at regular intervals, making the background of the Page
change. -->
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Duration="0:0:4" RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for
use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
a specified timeline. Other types of interpolation are too problematic to apply
to objects. -->
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a LinearGradientBrush after the first second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes
to a RadialGradientBrush after the second second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:2">
<DiscreteObjectKeyFrame.Value>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<RadialGradientBrush.GradientStops>
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="MediumBlue" Offset="0.5" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly
changes to a DrawingBrush (creates a checkerboard pattern) after the
third second of the animation. -->
<DiscreteObjectKeyFrame KeyTime="0:0:3">
<DiscreteObjectKeyFrame.Value>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Black"
Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
</Page>
Das vollständige Beispiel finden Sie unter Beispiel für eine Keyframe-Animation.
Siehe auch
Referenz
Konzepte
Übersicht über Keyframe-Animationen