Übersicht über Keyframe-Animationen
Aktualisiert: November 2007
Dieses Thema enthält eine Einführung in Keyframe-Animationen. Mit Keyframe-Animationen können Sie bei Animationen mehr als zwei Zielwerte verwenden und die Interpolationsmethode einer Animation steuern.
Dieses Thema enthält folgende Abschnitte.
Vorbereitungsmaßnahmen
Verwenden von Keyframe-Animationen
Verwandte Themen
Vorbereitungsmaßnahmen
Für diese Übersicht sollten Sie mit Animationen und Zeitachsen in Windows Presentation Foundation (WPF) vertraut sein. Eine Einführung in Animationen finden Sie unter Übersicht über Animationen. Es ist auch hilfreich, mit From/To/By-Animationen vertraut zu sein. Weitere Informationen finden Sie unter Übersicht über From/To/By-Animationen.
Was ist eine Keyframe-Animation?
Wie eine From/To/By-Animation animiert eine Keyframe-Animation den Wert einer Zieleigenschaft. Sie erstellt während der Duration einen Übergang zwischen den Zielwerten. Während eine From/To/By-Animation einen Übergang zwischen zwei Werten erstellt, kann eine einzelne Keyframe-Animation jedoch Übergänge zwischen einer beliebigen Anzahl von Zielwerten erstellen. Im Gegensatz zu einer From/To/By-Animation besitzt eine Keyframe-Animation keine From-, To- oder By-Eigenschaft, mit der die Zielwerte festgelegt werden könnten. Die Zielwerte einer Keyframe-Animation werden mit Keyframe-Objekten (daher der Begriff "Keyframe-Animation") beschrieben. Um die Zielwerte einer Animation anzugeben, werden Keyframe-Objekte erstellt und der KeyFrames-Auflistung der Animation hinzugefügt. Wenn die Animation ausgeführt wird, erstellt sie Übergänge zwischen den angegebenen Frames.
Einige Keyframe-Methoden unterstützen nicht nur mehrere Zielwerte, sondern sogar mehrere Interpolationsmethoden. Die Interpolationsmethode einer Animation definiert, wie sie einen Übergang von einem Wert zum nächsten erstellt. Es gibt drei Interpolationstypen: diskret, linear und Spline.
Um Animationen mit einer Keyframe-Animation auszuführen, gehen Sie folgendermaßen vor.
Deklarieren Sie die Animation, und geben Sie die Duration an, genau so wie bei einer From/To/By-Animation.
Erstellen Sie für jeden Zielwert einen Keyframe des entsprechenden Typs, legen Sie seinen Wert und KeyTime fest, und fügen Sie ihn der KeyFrames-Auflistung der Animation hinzu.
Ordnen Sie der Animation eine Eigenschaft zu, genau so wie bei einer From/To/By-Animation. Weitere Informationen über das Anwenden einer Animation auf eine Eigenschaft mit einem Storyboard finden Sie unter Übersicht über Storyboards.
Im folgenden Beispiel wird DoubleAnimationUsingKeyFrames verwendet, um ein Rectangle-Element an vier verschiedenen Orten zu animieren.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Wie eine From/To/By-Animation kann eine Keyframe-Animation mithilfe von Storyboard in Markup und Code oder mithilfe der BeginAnimation-Methode in Code auf eine Eigenschaft angewendet werden. Sie können mit einer Keyframe-Animation auch eine AnimationClock erstellen und sie auf eine oder mehrere Eigenschaften anwenden. Weitere Informationen zu den verschiedenen Anwendungsmethoden für Animationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.
Keyframe-Animationstypen
Da Animationen Eigenschaftenwerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Um eine Eigenschaft zu animieren, die einen Double-Wert akzeptiert (wie zum Beispiel die Width-Eigenschaft eines Elements), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die einen Point-Wert entgegennimmt, verwenden Sie eine Animation, die Point-Werte erzeugt usw.
Die Keyframe-Animationsklassen gehören zum System.Windows.Media.Animation-Namespace und entsprechen der folgenden Benennungskonvention:
*<Typ>*AnimationUsingKeyFrames
Wobei <Typ> für den Wertetyp steht, den die Klasse animiert.
WPF stellt die folgenden Keyframe-Animationsklassen bereit.
Eigenschaftentyp |
Zugehörige From/To/By-Animationsklasse |
Unterstützte Interpolationsmethoden |
|---|---|---|
Diskret |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret |
||
Diskret |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
||
Diskret, Linear, Spline |
Zielwerte (Keyframes) und Schlüsselzeiten
Ebenso wie es verschiedene Typen von Keyframe-Animationen zum Animieren verschiedener Eigenschaftentypen gibt, gibt es auch verschiedene Typen von Keyframe-Objekten: einen für jeden animierten Werttyp und jede unterstützte Interpolationsmethode. Keyframe-Typen entsprechen der folgenden Benennungskonvention:
*<InterpolationMethod><Typ>*KeyFrame
Wobei <InterpolationMethod> für die Interpolationsmethode steht, die der Keyframe verwendet, und <Typ> für den Werttyp, den die Klasse animiert. Eine Keyframe-Animation, die alle drei Interpolationsmethoden unterstützt, besitzt drei Keyframe-Typen, die verwendet werden können. Sie können z. B. drei Keyframe-Typen mit DoubleAnimationUsingKeyFrames verwenden: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame und SplineDoubleKeyFrame. (Interpolationsmethoden werden in einem späteren Abschnitt ausführlich beschrieben.)
Die Hauptaufgabe eines Keyframes besteht darin, eine KeyTime und einen Value anzugeben. Jeder Keyframe-Typ stellt diese zwei Eigenschaften bereit.
Die Value-Eigenschaft gibt den Zielwert für diesen Keyframe an.
Die KeyTime-Eigenschaft gibt an, wann (innerhalb der Duration der Animation) der Value eines Keyframes erreicht wird.
Wenn eine Keyframe-Animation beginnt, durchläuft sie die zugehörigen Keyframes in der durch deren KeyTime-Eigenschaften definierten Reihenfolge.
Wenn zur Zeit 0 (null) kein Keyframe vorhanden ist, erstellt die Animation einen Übergang zwischen dem aktuellen Wert der Zieleigenschaft und dem Value des ersten Keyframes. Andernfalls wird der Ausgabewert der Animation zum Wert des ersten Keyframes.
Die Animation erstellt mit der vom zweiten Keyframe angegebenen Interpolationsmethode einen Übergang zwischen dem Value des ersten und zweiten Keyframes. Der Übergang beginnt an der KeyTime des ersten Keyframes und endet, wenn die KeyTime des zweiten Keyframes erreicht ist.
Die Animation wird fortgesetzt und erstellt Übergänge zwischen jedem nachfolgenden Keyframe und dem vorangehenden Keyframe.
Schließlich wechselt die Animation zum Wert des Keyframes mit der größten Schlüsselzeit, die maximal so groß ist wie die Duration der Animation.
Wenn die Duration der Animation Automatic ist oder deren Duration der Zeit des letzten Keyframes entspricht, endet die Animation. Im anderen Fall, wenn die Duration der Animation größer ist als die Schlüsselzeit des letzten Keyframes, behält die Animation den Keyframe-Wert bei, bis sie das Ende der Duration erreicht. Wie alle Animationen bestimmt eine Keyframe-Animation mit der FillBehavior-Eigenschaft, ob sie den Endwert am Ende des Aktivitätszeitraums beibehält. Weitere Informationen finden Sie unter Übersicht über Zeitsteuerungsverhalten.
Im folgenden Beispiel wird mit dem im vorherigen Beispiel definierten DoubleAnimationUsingKeyFrames-Objekt veranschaulicht, wie die Value-Eigenschaft und die KeyTime-Eigenschaft funktionieren.
Der erste Keyframe legt sofort den Ausgabewert der Animation auf 0 (null) fest.
Der zweite Keyframe führt die Animation von 0 (null) bis 350 aus. Er wird nach dem Ende des ersten Keyframes (zur Zeit = 0 (null) Sekunden) gestartet, 2 Sekunden lang abgespielt und endet zur Zeit = 0:0:2.
Der dritte Keyframe führt die Animation von 350 bis 50 aus. Er wird nach dem Ende des zweiten Keyframes (zur Zeit = 2 Sekunden) gestartet, 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:7.
Der vierte Keyframe führt die Animation von 50 bis 200 aus. Er wird nach dem Ende des dritten Keyframes (zur Zeit = 7 Sekunden) gestartet, 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:8.
Da die Duration-Eigenschaft der Animation auf 10 Sekunden festgelegt war, behält die Animation den Endwert zwei Sekunden lang bei, bevor sie zur Zeit = 0:0:10 endet.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Interpolationsmethoden
In den vorangehenden Abschnitten wurde erwähnt, dass einige Keyframe-Animationen mehrere Interpolationsmethoden unterstützen. Die Interpolation einer Animation beschreibt, wie eine Animation während ihrer Dauer einen Übergang zwischen Werten erstellt. Durch die Auswahl, welcher Keyframe-Typ für die Animation verwendet wird, kann die Interpolationsmethode für dieses Keyframe-Segment definiert werden. Es gibt drei verschiedene Typen von Interpolationsmethoden: linear und diskret und Spline.
Lineare Interpolation
Bei der linearen Interpolation wird die Animation mit konstanter Geschwindigkeit der Segmentdauer durchlaufen. Wenn z. B. ein Keyframe-Segment während einer Dauer von 5 Sekunden von 0 (null) auf 10 wechselt, gibt die Animation zu den angegebenen Zeiten die folgenden Werte aus:
Zeit |
Ausgabewert |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
Diskrete Interpolation
Bei der diskreten Interpolation springt die Animationsfunktion ohne Interpolation von einem Wert zum nächsten. Wenn ein Keyframe-Segment während einer Dauer von 5 Sekunden von 0 (null) auf 10 wechselt, gibt die Animation zu den angegebenen Zeiten die folgenden Werte aus:
Zeit |
Ausgabewert |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
Beachten Sie, dass die Animation ihren Ausgabewert erst ganz am Ende der Segmentdauer ändert.
Die Spline-Interpolation ist komplexer. Sie wird im nächsten Abschnitt beschrieben.
Spline-Interpolation
Mit der Spline-Interpolation lassen sich realistischere Effekte zur Zeitsteuerung erreichen. Da Animationen sehr oft dazu eingesetzt werden, Effekte aus der realen Welt zu imitieren, benötigen Entwickler möglicherweise eine Feinsteuerung bei der Beschleunigung und der Verzögerung von Objekten und eine exakte Bearbeitungsmöglichkeit für die Zeitsteuerung von Segmenten. Sie können Spline-Keyframes einsetzen, um Animationen mit der Spline-Interpolation ausführen. Bei anderen Keyframes geben Sie einen Value und eine KeyTime an. Bei einem Spline-Keyframe geben Sie auch einen KeySpline an. Im folgenden Beispiel wird ein einzelner Spline-Keyframe für eine DoubleAnimationUsingKeyFrames dargestellt. Beachten Sie die KeySpline-Eigenschaft. Erst dadurch unterscheidet sich ein Spline-Keyframe von den anderen Keyframe-Typen.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Eine kubische Bézierkurve wird durch einen Anfangspunkt, einen Endpunkt und zwei Kontrollpunkte definiert. Die KeySpline-Eigenschaft eines Spline-Keyframes definiert die zwei Kontrollpunkte einer Bézierkurve, die von (0,0) bis (1,1) reicht. Der erste Kontrollpunkt kontrolliert den Kurvenfaktor der ersten Hälfte der Bézierkurve, und der zweite Kontrollpunkt kontrolliert den Kurvenfaktor der zweiten Hälfte des Béziersegments. Die resultierende Kurve beschreibt die Änderungsrate für diesen Spline-Keyframe. Je steiler die Kurve, desto schneller ändert der Keyframe seine Werte. Wenn die Kurve flacher wird, ändert der Keyframe seine Werte langsamer.
Sie können mit KeySpline auch physische Bewegungen wie bei herabstürzendem Wasser oder springenden Bällen simulieren oder andere "Ease-In"- und "Ease-Out"-Effekte auf die Animation von Bewegungen anwenden. Um Effekte für die Benutzerinteraktion wie Hintergrundausblendungen oder zurückfedernde Steuerelementschaltflächen zu erzielen, können Sie mit der Spline-Interpolation die Änderungsgeschwindigkeit einer Animation auf besondere Weise beschleunigen oder verzögern.
Im folgenden Beispiel wird ein KeySpline von 0,1 1,0 angegeben, der die folgende Bézierkurve erstellt.
Ein Spline für Keyframes mit den Kontrollpunkten (0,0, 1,0) und (1,0, 0,0)
.png)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Dieser Keyframe führt die Animation am Anfang schnell aus, wird langsamer und dann wieder schneller, bevor er endet.
Im folgenden Beispiel wird ein KeySpline von 0,5,0,25 0,75,1,0 angegeben, der die folgende Bézierkurve erstellt.
Ein Spline für Keyframes mit den Kontrollpunkten (0,25, 0,5) und (0,75, 1,0)
.png)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Da sich die Krümmung der Bézierkurve nur wenig ändert, führt dieser Keyframe die Animation mit fast konstanter Geschwindigkeit aus und wird gegen Ende etwas langsamer.
Im folgenden Beispiel wird mit DoubleAnimationUsingKeyFrames die Position eines Rechtecks animiert. Da DoubleAnimationUsingKeyFramesSplineDoubleKeyFrame-Objekte verwendet, wird für den Übergang zwischen jedem Keyframe-Wert die Spline-Interpolation eingesetzt.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Es ist möglicherweise schwierig, die Spline-Interpolation zu verstehen. Es kann daher hilfreich sein, mit verschiedenen Einstellungen zu experimentieren. Mit Beispiel für die Animation von Splines für Keyframes können Sie Splinewerte für Keyframes ändern und die Auswirkungen auf eine Animation anzeigen.
Kombinieren von Interpolationsmethoden
Sie können Keyframes mit verschiedenen Interpolationstypen in einer einzelnen Keyframe-Animation verwenden. Wenn zwei Keyframe-Animationen mit verschiedenen Interpolationen aufeinanderfolgen, wird mit der Interpolationsmethode des zweiten Keyframes der Übergang vom ersten zum zweiten Wert erstellt.
Im folgenden Beispiel wird eine DoubleAnimationUsingKeyFrames erstellt, die lineare Interpolation, Spline-Interpolation und diskrete Interpolation verwendet.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Weitere Informationen zu Zeitdauer und Schlüsselzeiten
Wie andere Animationen, verfügen auch Keyframe-Animationen über eine Duration-Eigenschaft. Zusätzlich zur Angabe der Duration der Animation muss auch angegeben werden, welchen Zeitanteil daran jeder einzelne Keyframe erhalten soll. Dies wird erreicht, indem für jeden Keyframe der Animation eine KeyTime beschrieben wird. Die KeyTime jedes Keyframes gibt den Zeitpunkt an, zu dem der Keyframe endet.
Die KeyTime-Eigenschaft gibt nicht die Wiedergabedauer der Schlüsselzeit an. Die Wiedergabedauer eines Keyframes hängt von der Dauer der Animation, dem Zeitpunkt, an dem der Keyframe endet, und vom Zeitpunkt, an dem der vorherige Keyframe geendet hat, ab. Schlüsselzeiten können als Zeitwert, Prozentwert oder als die speziellen Werte Uniform bzw. Paced angegeben werden.
In der folgenden Liste werden die verschiedenen Möglichkeiten beschrieben, Schlüsselzeiten anzugeben.
TimeSpan-Werte
Sie können mit TimeSpan-Werten eine KeyTime angeben. Der Wert sollte mindestens 0 (null) betragen und maximal so groß sein wie die Dauer der Animation. Im folgenden Beispiel werden eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes gezeigt, deren Schlüsselzeiten als Zeitwerte angegeben sind.
Der erste Keyframe führt die Animation vom Basiswert bis 100 in den ersten 3 Sekunden aus und endet zur Zeit 0:0:03.
Der zweite Keyframe führt die Animation von 100 bis 200 aus. Er wird nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden) gestartet, 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:8.
Der dritte Keyframe führt die Animation von 200 bis 500 aus. Er wird nach dem Ende des zweiten Keyframes (zur Zeit = 8 Sekunden) gestartet, 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:9.
Der vierte Keyframe führt die Animation von 500 bis 600 aus. Er wird nach dem Ende des dritten Keyframes (zur Zeit = 9 Sekunden) gestartet, 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Prozentwerte
Ein Prozentwert gibt an, dass der Keyframe bei einem bestimmten Prozentsatz der Duration der Animation endet. In XAML wird der Prozentsatz als Zahl angeben, gefolgt vom %-Zeichen. Im Code verwenden Sie die FromPercent-Methode und übergeben ihr einen Double-Wert, der den Prozentsatz angibt. Der Wert muss mindestens 0 (null) und darf maximal 100 Prozent betragen. Im folgenden Beispiel werden eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes gezeigt, deren Schlüsselzeiten als Prozentsätze angegeben sind.
Der erste Keyframe führt die Animation vom Basiswert bis 100 in den ersten 3 Sekunden aus und endet zur Zeit 0:0:3.
Der zweite Keyframe führt die Animation von 100 bis 200 aus. Er wird nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden) gestartet, 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:8 (0,8 x 10 = 8).
Der dritte Keyframe führt die Animation von 200 bis 500 aus. Er wird nach dem Ende des zweiten Keyframes (zur Zeit = 8 Sekunden) gestartet, 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:9 (0,9 x 10 = 9).
Der vierte Keyframe führt die Animation von 500 bis 600 aus. Er wird nach dem Ende des dritten Keyframes (zur Zeit = 9 Sekunden) gestartet, 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:10 (1 x 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Spezieller Wert "Uniform"
Verwenden Sie die Uniform-Zeitsteuerung, wenn Sie möchten, dass jeder Keyframe die gleiche Zeitdauer erhält.
Eine Uniform-Schlüsselzeit teilt die verfügbare Zeit gleichmäßig durch die Anzahl der Keyframes, um die Endzeit jedes Keyframes zu bestimmen. Im folgenden Beispiel werden eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes gezeigt, deren Schlüsselzeiten als Uniform angegeben sind.
Der erste Keyframe führt die Animation vom Basiswert bis 100 in den ersten 2,5 Sekunden aus und endet zur Zeit 0:0:2,5.
Der zweite Keyframe führt die Animation von 100 bis 200 aus. Er wird nach dem Ende des ersten Keyframes (zur Zeit = 2,5 Sekunden) gestartet, ungefähr 2,5 Sekunden lang abgespielt und endet zur Zeit = 0:0:5.
Der dritte Keyframe führt die Animation von 200 bis 500 aus. Er wird nach dem Ende des zweiten Keyframes (zur Zeit = 5 Sekunden) gestartet, 2,5 Sekunden lang abgespielt und endet zur Zeit = 0:0:7,5.
Der vierte Keyframe führt die Animation von 500 bis 600 aus. Er wird nach dem Ende des zweiten Keyframes (zur Zeit = 7,5 Sekunden) gestartet, 2,5 Sekunden lang abgespielt und endet zur Zeit = 0:0:1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Spezieller Wert "Paced"
Verwenden Sie die Paced-Zeitsteuerung, wenn Sie die Animation mit konstanter Geschwindigkeit ausführen möchten.
Eine Paced-Schlüsselzeit weist die verfügbare Zeit entsprechend der Länge der einzelnen Keyframes zu, um die Dauer jedes Frames zu bestimmen. Auf diese Weise kann sichergestellt werden, dass die Geschwindigkeit der Animation konstant bleibt. Im folgenden Beispiel werden eine Animation mit einer Dauer von 10 Sekunden und drei Keyframes gezeigt, deren Schlüsselzeiten als Paced angegeben sind.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Beachten Sie, dass die aufgelöste Schlüsselzeit auf 100 Prozent festgelegt wird, wenn die Schlüsselzeit des letzten Keyframes Paced oder Uniform ist. Wenn der erste Keyframe in einer Multiframe-Animation einen Paced-Wert besitzt, wird die aufgelöste Schlüsselzeit auf 0 (null) festgelegt. (Wenn die Keyframe-Auflistung nur einen einzelnen Keyframe enthält und es sich dabei um einen Keyframe mit einem Paced-Wert handelt, wird die aufgelöste Schlüsselzeit auf 100 Prozent festgelegt.)
Verschiedene Keyframes innerhalb einer einzelnen Keyframe-Animation können verschiedene Schlüsselzeittypen verwenden.
Kombinieren von Schlüsselzeiten, Keyframes in falscher Reihenfolge
Sie können Keyframes mit verschiedenen KeyTime-Werttypen in derselben Animation verwenden. Und obwohl empfohlen wird, Keyframes in der Reihenfolge hinzuzufügen, in der sie abgespielt werden sollen, ist das nicht notwendig. Das Animations- und Zeitsteuerungssystem kann Keyframes in falscher Reihenfolge auflösen. Keyframes mit ungültigen Schlüsselzeiten werden ignoriert.
In der folgenden Liste wird die Vorgehensweise beschrieben, mit der Schlüsselzeiten für Keyframes einer Keyframe-Animation aufgelöst werden.
Bestimmen Sie die gesamte Interpolationszeit der Animation, die Gesamtzeit, die die Keyframe-Animation für eine vollständige Vorwärtsiteration benötigt.
Wenn die Duration der Animation nicht Automatic oder Forever ist, ist die gesamte Interpolationszeit der Wert der Duration-Eigenschaft der Animation.
Andernfalls ist die gesamte Interpolationszeit der größte TimeSpan-KeyTime-Wert, der unter den Keyframes, sofern vorhanden, angegeben ist.
Andernfalls beträgt die gesamte Interpolationszeit 1 Sekunde.
Verwenden Sie den Wert für die gesamte Interpolationszeit, um Percent-KeyTime-Werte aufzulösen.
Lösen Sie den letzten Keyframe auf, wenn er nicht bereits in den vorherigen Schritten aufgelöst wurde. Wenn die KeyTime des letzten Keyframes Uniform oder Paced ist, entspricht die aufgelöste Zeit der gesamten Interpolationszeit.
Wenn die KeyTime des ersten Keyframes Paced ist und diese Animation über mehr als einen Keyframe verfügt, lösen Sie den KeyTime-Wert auf null auf. Wenn nur ein Keyframe vorhanden ist und dessen KeyTime-Wert Paced ist, wird er auf die gesamte Interpolationszeit aufgelöst, wie im vorherigen Schritt beschrieben.
Lösen Sie verbleibenden Uniform-KeyTime-Werte auf: Sie erhalten jeweils einen gleichen Anteil der verfügbaren Zeit. Während dieses Vorgangs werden nicht aufgelöste Paced-KeyTime-Werte vorübergehend als Uniform-KeyTime-Werte behandelt und erhalten eine vorübergehend aufgelöste Zeit.
Lösen Sie die KeyTime-Werte von Keyframes mit nicht angegebenen Schlüsselzeiten auf, indem Sie die in unmittelbarer Nähe dazu deklarierten Keyframes mit aufgelösten KeyTime-Werten verwenden.
Lösen Sie verbleibende Paced-KeyTime-Werte auf. Paced KeyTime verwenden die KeyTime-Werte der benachbarten Keyframes, um ihre aufgelöste Zeit zu bestimmen. Das Ziel ist es, sicherzustellen, dass die Geschwindigkeit der Animation um die aufgelöste Zeit dieses Keyframes herum konstant ist.
Sortieren Sie die Keyframes in der Reihenfolge der aufgelösten Zeit (Primärschlüssel) und in der Reihenfolge der Deklaration (Sekundärschlüssel), d. h., verwenden Sie eine stabile Sortierung, die auf den aufgelösten Keyframe KeyTime-Werten basiert.
Siehe auch
Aufgaben
Beispiel für die Animation von Splines für Keyframes
Beispiel für eine Keyframe-Animation
Konzepte
Übersicht über Zeitsteuerungsverhalten