Übersicht über Keyframe-Animationen
Dieses Thema bietet eine Einführung in Keyframe-Animationen. Mit Keyframe-Animationen können Sie bei Animationen mehr als zwei Zielwerte animieren und die Interpolationsmethode einer Animation steuern.
Voraussetzungen
Für diese Übersicht sollten Sie mit Animationen und Zeitachsen in Windows Presentation Foundation (WPF) vertraut sein. Eine Einführung zu Animationen finden Sie unter Übersicht über Animationen. Kenntnisse in From/To/By-Animationen sind ebenfalls hilfreich. 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. Er erstellt einen Übergang zwischen seinen Zielwerten über seine Duration. 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/by-Eigenschaften, mit denen die Zielwerte festgelegt werden könnten. Die Zielwerte einer Keyframe-Animation werden mithilfe von Keyframe-Objekten beschrieben (daher der Begriff „Keyframe-Animation“). Um die Zielwerte der Animation festzulegen, erstellen Sie Schlüsselbildobjekte und fügen sie der KeyFrames-Sammlung der Animation hinzu. Wenn die Animation ausgeführt wird, erstellt sie Übergänge zwischen den Frames, die Sie angegeben haben.
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 Arten von Interpolationen: diskret, linear und Spline.
Um Animationen mit einer Keyframe-Animation auszuführen, gehen Sie folgendermaßen vor.
Deklarieren Sie die Animation und geben Sie ihre Duration an, genau wie bei einer from/to/by-Animation.
Erstellen Sie für jeden Zielwert ein Schlüsselbild des entsprechenden Typs, legen Sie dessen Wert und KeyTime fest und fügen Sie es der KeyFrames-Sammlung der Animation hinzu.
Ordnen Sie der Animation eine Eigenschaft zu, genau so wie bei einer From/To/By-Animation. Weitere Informationen zum Anwenden einer Animation auf eine Eigenschaft mit einem Storyboard finden Sie unter Übersicht über Storyboards.
Das folgende Beispiel verwendet ein DoubleAnimationUsingKeyFrames, um ein Rectangle-Element an vier verschiedenen Stellen zu animieren.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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 Von/Bis-Animation kann eine Keyframe-Animation auf eine Eigenschaft angewendet werden, indem Sie ein Storyboard in Markup und Code oder die BeginAnimation-Methode im Code verwenden. Sie können mit einer Keyframe-Animation auch eine AnimationClock erstellen und sie auf eine oder mehrere Eigenschaften anwenden. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.
Keyframe-Animationstypen
Da Animationen Eigenschaftswerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen. Um eine Eigenschaft zu animieren, die ein Double annimmt (wie z. B. die Width-Eigenschaft eines Elements), verwenden Sie eine Animation, die Double-Werte erzeugt. Um eine Eigenschaft zu animieren, die einen Point-Wert annimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter.
Die Keyframe-Animationsklassen gehören zum System.Windows.Media.Animation-Namespace und befolgen folgende Benennungskonvention:
<Typ>AnimationUsingKeyFrames
Wobei <Typ> der Wertetyp ist, den die Klasse animiert.
WPF bietet folgende Keyframe-Animationsklassen.
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 Sie verwenden können. Sie können beispielsweise drei Schlüsselrahmentypen mit einer DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, und SplineDoubleKeyFrame. (Interpolationsmethoden werden in einem späteren Abschnitt ausführlich beschrieben.)
Der Hauptzweck eines Schlüsselbildes besteht darin, ein KeyTime und ein 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 Animation Duration) ein Schlüsselrahmen Value 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 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 einen Übergang zwischen dem Value des ersten und zweiten Keyframe mithilfe der vom zweiten Keyframe angegebenen Interpolationsmethode. Der Übergang beginnt mit dem ersten KeyTime des Keyframes und endet, wenn das zweite Schlüsselbild-KeyTime 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, der gleich wie oder kleiner als die Duration der Animation ist.
Wenn die Animation die Uhrzeit des letzten Schlüsselrahmens entspricht, endet die Animation DurationAutomaticDuration. Andernfalls gilt: Wenn die Duration der Animation größer ist als die Schlüsselzeit des letzten Keyframes, behält die Animation den Keyframe-Wert bei, bis das Ende der Duration erreicht. Wie alle Animationen bestimmt eine Keyframe-Animation mit der FillBehavior-Eigenschaft, ob Sie den Endwert am Ende Aktivitätstzeitraums beibehält. Weitere Informationen finden Sie unter Übersicht über Zeitsteuerungsverhalten.
Im folgenden Beispiel wird das DoubleAnimationUsingKeyFrames im vorherigen Beispiel definierte Objekt verwendet, um zu veranschaulichen, wie die ValueKeyTime Eigenschaften funktionieren.
Der erste Keyframe legt sofort den Ausgabewert der Animation auf 0 fest.
Der zweite Keyframe führt eine Animation von 0 bis 350 aus. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 0 Sekunden), wird 2 Sekunden lang abgespielt und endet zur Zeit = 0:0:2.
Der dritte Keyframe führt eine Animation von 350 bis 50 aus. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 2 Sekunden), wird 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:7.
Der vierte Keyframe führt eine Animation von 50 bis 200 aus. Sie beginnt nach dem Ende des dritten Keyframes (zur Zeit = 7 Sekunden), wird 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:8.
Da die Duration-Eigenschaft der Animation auf 10 Sekunden festgelegt wurde, behält die Animation den Endwert zwei Sekunden lang bei, bevor sie zur Zeit = 0:0:10 endet.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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 vorherigen 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, diskret und Spline.
Lineare Interpolation
Bei der linearen Interpolation verläuft die Animation mit konstanter Geschwindigkeit der Segmentdauer. Wenn z.B. ein Keyframe-Segment während einer Dauer von 5 Sekunden von 0 auf 10 wechselt, gibt die Animation zu den angegebenen Zeiten die folgenden Werte aus:
| Time | 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 auf 10 wechselt, gibt die Animation zu den angegebenen Zeiten die folgenden Werte aus:
| Time | 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
Die Spline-Interpolation kann verwendet werden, um realistischere Effekte zur Zeitsteuerung zu erreichen. Da Animationen sehr oft verwendet werden, um Effekte aus der realen Welt zu imitieren, benötigen Entwickler möglicherweise eine Feinsteuerung bei der Beschleunigung und Verlangsamung der Objekte und eine exakte Bearbeitungsmöglichkeit für die Zeitsteuerung von Segmenten. Sie können Spline-Keyframes verwenden, um Animationen mit der Spline-Interpolation auszuführen. Mit anderen Keyframes geben Sie eine Value und eine KeyTime. Bei einem Spline-Schlüsselrahmen geben Sie auch einen KeySpline. Das folgende Beispiel zeigt einen einzelnen Spline-Schlüsselbild für eine DoubleAnimationUsingKeyFrames. 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 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 steuert den Kurvenfaktor der ersten Hälfte der Bezierkurve, und der zweite Kontrollpunkt steuert den Kurvenfaktor der zweiten Hälfte des Beziersegments. 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 herabstürzendes Wasser oder springende Bällen simulieren, oder andere „Ease-In“- und „Ease-Out“-Effekte auf die Animationen 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 KeySpline mit Kontrollpunkten (0,0, 1,0) und (1,0, 0,0)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Diese 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)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Da sich die Krümmung der Zierkurve sehr wenig ändert, animiert dieser Schlüsselrahmen mit einer fast konstanten Rate; es verlangsamt sich etwas in Richtung seines Endes.
Das folgende Beispiel verwendet DoubleAnimationUsingKeyFrames, um die Position eines Rechtecks zu animieren. Da das DoubleAnimationUsingKeyFramesSplineDoubleKeyFrame-Objekte verwendet werden, erfolgt der Übergang zwischen den einzelnen Schlüsselbildwerten durch Spline-Interpolation.
<!-- 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>
Die Spline-Interpolation kann schwer verständlich sein. Es kann daher hilfreich sein, mit verschiedenen Einstellungen zu experimentieren. Mit dem Beispiel für die Animation von Splines für Keyframe können Sie die 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.
In dem folgenden Beispiel wird eine DoubleAnimationUsingKeyFrames erstellt, die lineare, gesplittete 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. Sie tun dies, indem Sie für jedes Schlüsselbild der Animation ein KeyTime beschreiben. Jedes Schlüsselbild KeyTime gibt an, wann dieses Schlüsselbild endet.
Die Eigenschaft KeyTime gibt nicht an, wie lange die Tastenzeit spielt. Die Wiedergabedauer eines Keyframes hängt von der Animationsdauer, dem Zeitpunkt, an dem der Keyframe endet, und vom Zeitpunkt, an dem der vorherige Keyframe geendet hat, ab. Schlüsselzeiten können als Zeitwert, als Prozentsatz oder als spezielle Werte Uniform oder Paced angegeben werden.
In der folgenden Liste werden die verschiedenen Methoden zur Angabe von Schlüsselzeiten beschrieben.
TimeSpan-Werte
Sie können TimeSpan-Werte verwenden, um eine KeyTime anzugeben. Der Wert muss größer als oder gleich 0 und kleiner als oder gleich der Dauer der Animation sein. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, 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 eine Animation von 100 bis 200 aus. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden), wird 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:8.
Der dritte Keyframe führt eine Animation von 200 bis 500 aus. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 8 Sekunden), wird 1 Sekunden lang abgespielt und endet zur Zeit = 0:0:9.
Der vierte Keyframe führt eine Animation von 500 bis 600 aus. Sie beginnt nach dem Ende des dritten Keyframes (zur Zeit = 9 Sekunden), wird 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 angegeben, gefolgt vom %-Symbol. Im Code verwenden Sie die FromPercent-Methode und übergeben ihr einen Double, der den Prozentsatz angibt. Der Wert muss größer als oder gleich 0 und kleiner als oder gleich 100 Prozent sein. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, 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 eine Animation von 100 bis 200 aus. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden), wird 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:8 (0.8 * 10 = 8).
Der dritte Keyframe führt eine Animation von 200 bis 500 aus. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 8 Sekunden), wird 1 Sekunden lang abgespielt und endet zur Zeit = 0:0:9 (0.9 * 10 = 9).
Der vierte Keyframe führt eine Animation von 500 bis 600 aus. Sie beginnt nach dem Ende des dritten Keyframes (zur Zeit = 9 Sekunden), wird 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:10 (1 * 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 das Uniform-Timing, wenn Sie möchten, dass jedes Schlüsselbild die gleiche Zeitspanne benötigt.
Eine Uniform-Schlüsselzeit teilt die verfügbare Zeit gleichmäßig durch die Anzahl der Keyframes, um die Endzeit jedes Keyframes zu bestimmen. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, 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 eine Animation von 100 bis 200 aus. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 2,5 Sekunden), wird ungefähr 2,5 Sekunden lang abgespielt und endet zur Zeit = 0:0:5.
Der dritte Keyframe führt eine Animation von 200 bis 500 aus. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 5 Sekunden), wird 2,5 Sekunden lang abgespielt und endet zur Zeit = 0:0:7.5.
Der vierte Keyframe führt eine Animation von 500 bis 600 aus. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 7,5 Sekunden), wird 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 das Paced-Timing, wenn Sie mit einer konstanten Geschwindigkeit animieren 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. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und drei Keyframes, 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 Key Time des letzten Key Frames auf 100 Prozent gesetzt wird, wenn die Key Time Paced oder Uniform beträgt. Wenn der erste Keyframe in einer Multiframe-Animation einen Paced-Wert besitzt, wird die aufgelöste Schlüsselzeit auf 0 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 Schlüsselbilder 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.
Die folgende Liste beschreibt das Verfahren, mit dem 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 Animation Duration nicht Automatic oder Forever nicht, ist die Gesamtinterpolationszeit der Wert der Eigenschaft der Animation Duration.
Andernfalls ist die gesamte Interpolationszeit der größte TimeSpanKeyTime Wert, der unter den Schlüsselbildern angegeben wurde, falls es welche gibt.
Andernfalls beträgt die gesamte Interpolationszeit Zeit 1 Sekunde.
Verwenden Sie den Gesamtwert der Interpolationszeit, um PercentKeyTime 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 Schlüsselbildes Uniform oder Paced ist, ist seine aufgelöste Zeit gleich der gesamten Interpolationszeit.
Wenn sich der KeyTime erste Keyframe Paced befindet und diese Animation mehr als auf Keyframes hat, lösen Sie den KeyTime Wert auf Null auf. Wenn nur ein Keyframe vorhanden ist und der KeyTime Wert ist Paced, wird sie in die Gesamtinterpolationszeit aufgelöst, wie im vorherigen Schritt beschrieben.
Lösen Sie die verbleibenden UniformKeyTime Werte auf: Sie erhalten jeweils einen gleichen Anteil der verfügbaren Zeit. Während dieses Prozesses werden nicht aufgelöste PacedKeyTime Werte vorübergehend als UniformKeyTime Werte behandelt und erhalten eine temporäre aufgelöste Zeit.
Lösen Sie die KeyTime Werte von Schlüsselbildern mit nicht spezifizierten Schlüsselzeiten auf, indem Sie die nächstgelegenen Schlüsselbilder verwenden, die aufgelöste KeyTime Werte haben.
Auflösen der verbleibenden PacedKeyTime Werte. PacedKeyTime Verwenden Sie die KeyTime Werte der benachbarten Keyframes, um die 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 basierend auf den aufgelösten KeyTime-Werten der Keyframes.
Siehe auch
.NET Desktop feedback
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für