Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
In diesem Thema werden Keyframe-Animationen vorgestellt. Keyframeanimationen ermöglichen es Ihnen, mithilfe von mehr als zwei Zielwerten zu animieren und die Interpolationsmethode einer Animation zu steuern.
Voraussetzungen
Um diese Übersicht zu verstehen, sollten Sie mit WPF-Animationen und Zeitachsen (Windows Presentation Foundation) vertraut sein. Eine Einführung in Animationen finden Sie in der Animationsübersicht. Außerdem ist es hilfreich, mit den From/To/By-Animationen vertraut zu sein. Weitere Informationen finden Sie in der Übersicht über From/To/By-Animationen.
Was ist eine Key-Frame Animation?
Wie eine From/To/By-Animation animiert eine Keyframeanimation den Wert einer Zieleigenschaft. Es erstellt einen Übergang zwischen seinen Zielwerten über seinen Duration. Während jedoch eine From/To/By-Animation einen Übergang zwischen zwei Werten erstellt, kann eine einzelne Keyframeanimation Übergänge zwischen einer beliebigen Anzahl von Zielwerten erstellen. Im Gegensatz zu einer From/To/By-Animation weist eine Keyframeanimation keine From-, To- oder By-Eigenschaften auf, mit denen die Zielwerte festgelegt werden sollen. Die Zielwerte einer Keyframeanimation werden mithilfe von Keyframeobjekten (daher der Begriff "Keyframeanimation") beschrieben. Um die Zielwerte der Animation anzugeben, erstellen Sie Keyframeobjekte und fügen Sie sie der Animationsauflistung KeyFrames hinzu. Wenn die Animation ausgeführt wird, wechselt sie zwischen den von Ihnen angegebenen Frames.
Zusätzlich zur Unterstützung mehrerer Zielwerte unterstützen einige Keyframemethoden sogar mehrere Interpolationsmethoden. Die Interpolationsmethode einer Animation definiert, wie sie von einem Wert zum nächsten wechselt. Es gibt drei Arten von Interpolationen: diskrete, lineare und splinierte.
Um mit einer Keyframeanimation zu animieren, führen Sie die folgenden Schritte aus.
Deklarieren Sie die Animation und spezifizieren Sie deren Duration, ähnlich wie bei einer Von/Bis Animation.
Erstellen Sie für jeden Zielwert einen Keyframe des entsprechenden Typs, legen Sie dessen Wert KeyTime fest und fügen Sie ihn der Sammlung der KeyFrames Animation hinzu.
Ordnen Sie die Animation einer Eigenschaft zu, genau wie eine From/To/By-Animation. Weitere Informationen zum Anwenden einer Animation auf eine Eigenschaft mithilfe eines Storyboards finden Sie unter Storyboards Overview.
Im folgenden Beispiel wird ein DoubleAnimationUsingKeyFrames verwendet, um ein Rectangle Element zu vier verschiedenen Positionen 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 From/To/By-Animation kann eine Keyframe-Animation mithilfe eines Storyboard sowohl im Markup als auch im Code oder durch die BeginAnimation Methode im Code auf eine Eigenschaft angewendet werden. Sie können auch eine Keyframe-Animation verwenden, um ein AnimationClock zu erstellen und es auf eine oder mehrere Eigenschaften anzuwenden. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie unter "Property Animation Techniques Overview".
Key-Frame Animationstypen
Da Animationen Eigenschaftswerte generieren, gibt es unterschiedliche Animationstypen für unterschiedliche Eigenschaftstypen. Zum Animieren einer Eigenschaft, die einen Double Wert benötigt (wie die Width-Eigenschaft eines Elements), verwenden Sie eine Animation, die Double-Werte erzeugt. Zum Animieren einer Eigenschaft, die ein Point nimmt, verwenden Sie eine Animation, die Point-Werte erzeugt, und so weiter.
Die Keyframeanimationsklassen gehören zum System.Windows.Media.Animation Namespace und entsprechen der folgenden Benennungskonvention:
<Art>AnimationUsingKeyFrames
Wo <Typ> der Typ des Werts ist, den die Klasse animiert.
WPF stellt die folgenden Keyframeanimationsklassen bereit.
Zielwerte (Schlüsselbilder) und Schlüsselzeiten
Ebenso wie es verschiedene Arten von Keyframeanimationen zum Animieren verschiedener Eigenschaftstypen gibt, gibt es auch unterschiedliche Typen von Keyframeobjekten: eine für jeden Typ von animierten Werten und Interpolationsmethode unterstützt. Keyframetypen entsprechen einer folgenden Benennungskonvention:
<InterpolationMethod-Typ><>KeyFrame
Dabei <ist InterpolationMethod> die Interpolationsmethode, die der Keyframe verwendet, und <Type> ist der Typ des Werts, den die Klasse animiert. Eine Keyframeanimation, die alle drei Interpolationsmethoden unterstützt, enthält drei Keyframetypen, die Sie verwenden können. Sie können z. B. drei Keyframetypen mit DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame und SplineDoubleKeyFrame verwenden. (Interpolationsmethoden werden in einem späteren Abschnitt ausführlich beschrieben.)
Der Hauptzweck eines Keyframes besteht darin, ein KeyTime und ein Value zu spezifizieren. Jeder Keyframetyp stellt diese beiden Eigenschaften bereit.
Die Value Eigenschaft gibt den Zielwert für diesen Keyframe an.
Die KeyTime Eigenschaft gibt an, wann (innerhalb der Animation Duration) ein Keyframe Value erreicht wird.
Wenn eine Keyframeanimation beginnt, werden ihre Keyframes in der Reihenfolge durchlaufen, die durch ihre KeyTime Eigenschaften definiert wird.
Wenn zur Zeit 0 kein Keyframe vorhanden ist, erstellt die Animation einen Übergang zwischen dem aktuellen Wert der Zieleigenschaft und dem Value ersten Keyframe. Andernfalls wird der Ausgabewert der Animation zum Wert des ersten Keyframes.
Die Animation erzeugt einen Übergang zwischen den Value des ersten und zweiten Schlüsselframes mittels der vom zweiten Schlüsselframe angegebenen Interpolationsmethode. Der Übergang beginnt am ersten Keyframe KeyTime und endet, wenn der zweite Keyframe KeyTime erreicht ist.
Die Animation wird fortgesetzt, wodurch Übergänge zwischen den einzelnen nachfolgenden Keyframes und dem vorangehenden Keyframe erstellt werden.
Schließlich wechselt die Animation zu dem Wert des Keyframes mit der größten Schlüsselzeit, die gleich oder kleiner als die Animation Duration ist.
Wenn das Duration der Animation Automatic ist oder ihr Duration dem Zeitpunkt des letzten Keyframes entspricht, endet die Animation. Andernfalls hält die Animation den Keyframewert, wenn Duration größer als die Schlüsselzeit des letzten Keyframes ist, bis sie das Ende von Duration erreicht. Wie bei allen Animationen verwendet eine Keyframeanimation ihre FillBehavior-Eigenschaft, um zu bestimmen, ob sie ihren endgültigen Wert beibehält, wenn sie das Ende des aktiven Zeitraums erreicht. Weitere Informationen finden Sie unter " Timing Behaviors Overview".
Im folgenden Beispiel wird das im vorherigen Beispiel definierte DoubleAnimationUsingKeyFrames Objekt verwendet, um zu veranschaulichen, wie die Value und KeyTime Eigenschaften funktionieren.
Der erste Keyframe legt den Ausgabewert der Animation sofort auf 0 fest.
Der zweite Keyframe animiert sich von 0 bis 350. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 0 Sekunden) und wird für 2 Sekunden wiedergegeben und endet mit dem Zeitpunkt = 0:0:2.
Der dritte Keyframe animiert sich von 350 zu 50. Es beginnt, wenn der zweite Keyframe endet (bei Zeit = 2 Sekunden), und spielt für 5 Sekunden, wobei es bei Zeit = 0:00:07 endet.
Der vierte Keyframe wird animiert, wobei er sich von 50 auf 200 bewegt. Es beginnt, wenn der dritte Keyframe endet (zur Zeit = 7 Sekunden) und für 1 Sekunde abgespielt wird, endet mit dem Zeitpunkt = 0:0:8.
Da die Duration-Eigenschaft der Animation auf 10 Sekunden festgelegt wurde, behält die Animation ihren endgültigen Wert zwei Sekunden lang, bevor sie um Zeitmarke 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 Keyframeanimationen mehrere Interpolationsmethoden unterstützen. Die Interpolation einer Animation beschreibt, wie eine Animation über die Dauer zwischen Werten wechselt. Indem Sie den keyframetyp auswählen, den Sie mit Ihrer Animation verwenden, können Sie die Interpolationsmethode für dieses Keyframesegment definieren. Es gibt drei verschiedene Arten von Interpolationsmethoden: linear, diskret und splined.
Lineare Interpolation
Bei linearer Interpolation wird die Animation mit einer gleichmäßigen Rate entsprechend der Segmentdauer fortgesetzt. Wenn beispielsweise ein Keyframesegment zwischen 0 und 10 über eine Dauer von 5 Sekunden wechselt, gibt die Animation die folgenden Werte zu den angegebenen Zeiten aus:
| Uhrzeit | Ausgabewert |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4,25 | 8,5 |
| 4.5 | 9 |
| 5 | 10 |
Diskrete Interpolation
Bei diskreter Interpolation springt die Animationsfunktion ohne Interpolation von einem Wert zum nächsten. Wenn ein Keyframesegment zwischen 0 und 10 über eine Dauer von 5 Sekunden wechselt, gibt die Animation die folgenden Werte zu den angegebenen Zeiten aus:
| Uhrzeit | 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 bis zur letzten Sekunde der Segmentdauer nicht ändert.
Splined-Interpolation ist komplexer. Sie wird im nächsten Abschnitt beschrieben.
Splined Interpolation
Spline-Interpolation kann verwendet werden, um realistischere Timing-Effekte zu erzielen. Da Animationen so häufig verwendet werden, um Effekte zu imitieren, die in der realen Welt auftreten, benötigen Entwickler möglicherweise eine feine Kontrolle über die Beschleunigung und Verlangsamung von Objekten und die enge Manipulation von Timing-Segmenten. Mithilfe von Spline-Keyframes können Sie mit Spline-Interpolation animieren. Bei anderen Schlüsselbildern geben Sie ein Value und ein KeyTime an. Mit einem Spline-Key-Frame geben Sie auch eine KeySpline an. Das folgende Beispiel zeigt einen einzelnen Spline-Keyframe für ein DoubleAnimationUsingKeyFrames. Beachten Sie die KeySpline Eigenschaft. Das macht einen Spline-Keyframe anders als die anderen Typen von Keyframes.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Eine kubische Bézierkurve wird durch einen Startpunkt, einen Endpunkt und zwei Kontrollpunkte definiert. Die KeySpline Eigenschaft eines Spline-Keyframes definiert den beiden Kontrollpunkt einer Bézierkurve, die sich von (0,0) bis (1,1) erstreckt. Der erste Kontrollpunkt steuert den Kurvenfaktor der ersten Hälfte der Bézierkurve, und der zweite Kontrollpunkt steuert den Kurvenfaktor der zweiten Hälfte des Béziersegments. Die resultierende Kurve beschreibt die Änderungsrate für diesen Spline-Keyframe. Je steiler die Kurve ist, desto schneller ändert der Keyframe seine Werte. Wenn die Kurve flacher wird, ändert der Keyframe seine Werte langsamer.
Sie können KeySpline verwenden, um physische Flugbahnen wie fallendes Wasser oder springende Bälle zu simulieren oder um andere "Einblenden"- und "Ausblenden"-Effekte auf Bewegungsanimationen anzuwenden. Bei Benutzerinteraktionseffekten wie Hintergrundeinblendungen oder dem Rückprall von Steuerelementschaltflächen können Sie die Spline-Interpolation anwenden, um die Änderungsrate einer Animation gezielt zu beschleunigen oder zu verlangsamen.
Im folgenden Beispiel wird ein KeySpline Wert von 0,1 1,0 angegeben, der die folgende Bézierkurve erstellt.
Eine Schlüsselspline 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" />
Dieser Keyframe animiert sich schnell, verlangsamt sich dann und beschleunigt erneut, bevor er endet.
Im folgenden Beispiel wird eine KeySpline von 0,5,0,25 0,75,1,0 angegeben, wodurch die folgende Bézierkurve erstellt wird.
Eine Schlüsselspline mit 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 Bézierkurve sehr wenig ändert, wird dieser Keyframe mit einer fast konstanten Rate animiert, wobei er sich gegen Ende etwas verlangsamt.
Im folgenden Beispiel wird ein DoubleAnimationUsingKeyFrames verwendet, um die Position des Rechtecks zu animieren. Da DoubleAnimationUsingKeyFrames Objekte SplineDoubleKeyFrame verwendet, erfolgt der Übergang zwischen jedem Keyframe-Wert mit Splined-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>
Splined-Interpolation kann schwer zu verstehen sein; Das Experimentieren mit verschiedenen Einstellungen kann hilfreich sein. Im Key Spline-Animationsbeispiel können Sie wichtige Splinewerte ändern und das Ergebnis einer Animation anzeigen.
Kombinieren von Interpolationsmethoden
Sie können Keyframes mit verschiedenen Interpolationstypen in einer einzelnen Keyframeanimation verwenden. Wenn zwei Keyframeanimationen mit unterschiedlichen Interpolationen aufeinander folgen, wird die Interpolationsmethode des zweiten Keyframes verwendet, um den Übergang vom ersten Wert zum zweiten zu erstellen.
Im folgenden Beispiel wird ein DoubleAnimationUsingKeyFrames Objekt erstellt, das lineare, splineierte 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 Dauer und Schlüsselzeiten
Wie andere Animationen verfügen auch Keyframeanimationen über eine Duration-Eigenschaft. Zusätzlich zur Angabe der Animation Durationmüssen Sie angeben, welcher Teil dieser Dauer jedem Keyframe zugewiesen wird. Dazu beschreiben Sie ein KeyTime für jeden Schlüsselbild der Animation. Jeder Keyframe KeyTime gibt an, wann dieser Keyframe endet.
Die KeyTime Eigenschaft gibt nicht an, wie lange die Schlüsselzeit dauert. Die Wiedergabedauer eines Keyframes wird bestimmt durch den Zeitpunkt, an dem der Keyframe endet, den Zeitpunkt, zu dem der vorherige Keyframe beendet wurde, sowie die Gesamtdauer der Animation. Schlüsselzeiten können als Zeitwert, Prozentwert oder als sonderspezifische Werte UniformPacedangegeben werden.
In der folgenden Liste werden die verschiedenen Methoden zum Angeben von Schlüsselzeiten beschrieben.
TimeSpan-Werte
Sie können TimeSpan Werte verwenden, um eine KeyTime festzulegen. Der Wert sollte größer 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 werden.
Der erste Keyframe wird von dem Basiswert auf 100 über die ersten 3 Sekunden animiert, wobei die Zeit = 0:0:03 endet.
Der zweite Keyframe animiert sich von 100 bis 200. Es beginnt nachdem das erste Keyframe endet (bei 3 Sekunden) und wird für 5 Sekunden abgespielt, wobei es bei Zeit = 0:0:8 endet.
Der dritte Keyframe wird zwischen 200 und 500 animiert. Es beginnt, wenn der zweite Keyframe endet (bei Zeit = 8 Sekunden) und spielt für 1 Sekunde, endet bei Zeit = 0:0:9.
Der vierte Keyframe animiert sich von 500 bis 600. Es beginnt, wenn der dritte Keyframe endet (bei 9 Sekunden), läuft für 1 Sekunde und endet bei 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 mit einem gewissen Prozentsatz der Animation Durationendet. In XAML geben Sie den Prozentsatz als Zahl gefolgt vom % Symbol an. Im Code verwenden Sie die FromPercent Methode und übergeben ihr einen Double als Prozentsatz. Der Wert muss größer 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 wird vom Basiswert auf 100 über die ersten 3 Sekunden animiert, wobei er bei Zeit = 0:0:3 endet.
Der zweite Keyframe animiert sich von 100 bis 200. Es beginnt nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden) und wird für 5 Sekunden wiedergegeben, endend zum Zeitpunkt = 0:0:8 (0,8 * 10 = 8).
Der dritte Keyframe wird zwischen 200 und 500 animiert. Es beginnt, wenn der zweite Keyframe endet (zur Zeit = 8 Sekunden) und für 1 Sekunde abgespielt wird, endend zum Zeitpunkt = 0:0:9 (0,9 * 10 = 9).
Der vierte Keyframe animiert sich von 500 bis 600. Es beginnt, wenn der dritte Keyframe endet (zur Zeit = 9 Sekunden) und für 1 Sekunde abgespielt wird, endet mit der 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>
Sonderwert, einheitlich
Verwenden Sie Uniform Timing, wenn jeder Keyframe dieselbe Zeit in Anspruch nehmen soll.
Eine Uniform Schlüsselzeit dividiert 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 wird vom Basiswert auf 100 über die ersten 2,5 Sekunden animiert und endet mit dem Zeitpunkt = 0:0:2,5.
Der zweite Keyframe animiert sich von 100 bis 200. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 2,5 Sekunden) und wird ungefähr 2,5 Sekunden lang wiedergegeben und endet mit der Zeit = 0:0:5.
Der dritte Keyframe wird zwischen 200 und 500 animiert. Es beginnt, wenn der zweite Keyframe endet (zu Zeitpunkt = 5 Sekunden) und wird für 2,5 Sekunden abgespielt, und endet zu Zeitpunkt = 0:0:7,5.
Der vierte Keyframe animiert sich von 500 bis 600. Es beginnt, wenn der zweite Keyframe endet (zur Zeit = 7,5 Sekunden) und für 2,5 Sekunden abgespielt wird, wobei die Zeit = 0:0:1 endet.
<!-- 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>
Sonderwert, Paced
Verwenden Sie Paced Zeitsteuerung, wenn Sie mit konstanter 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. Dies sorgt dafür, dass die Geschwindigkeit oder das Tempo der Animation konstant bleibt. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und drei Keyframes, deren Schlüsselzeiten als Pacedangegeben 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>
Beachtest Sie, dass, wenn die Schlüsselzeit des letzten Keyframes "Paced" oder "Uniform" ist, seine aufgelöste Schlüsselzeit auf 100 Prozent festgelegt wird. Wenn der erste Keyframe in einer Multiframeanimation beschleunigt wird, wird die aufgelöste Schlüsselzeit auf 0 festgelegt. (Wenn die Keyframeauflistung nur einen einzelnen Keyframe enthält und es sich um einen tempoierten Keyframe handelt, wird die aufgelöste Schlüsselzeit auf 100 Prozent festgelegt.)
Verschiedene Keyframes innerhalb einer einzelnen Keyframeanimation können unterschiedliche Tastenzeittypen verwenden.
Kombinieren von Schlüsselzeiten, Out-Of-Order-Schlüsselframes
Sie können Keyframes mit unterschiedlichen KeyTime Werttypen in derselben Animation verwenden. Auch wenn empfohlen wird, die Keyframes in der Reihenfolge hinzuzufügen, in der sie wiedergegeben werden sollen, ist dies nicht unbedingt erforderlich. Das Animations- und Timing-System kann Keyframes außerhalb der Reihenfolge auflösen. Keyframes mit ungültigen Schlüsselzeiten werden ignoriert.
In der folgenden Liste wird der Prozess beschrieben, mit dem die Schlüsselzeiten für die Keyframes einer Keyframe-Animation bestimmt werden.
Bestimmen Sie die Gesamtinterpolationszeit der Animation, die Gesamtzeit, die die Keyframeanimation benötigt, um eine Vorwärts iteration abzuschließen.
Ist die Animation Duration nicht Automatic oder Forever, ist die Gesamtinterpolationszeit der Wert der Eigenschaft Duration der Animation.
Andernfalls ist die Gesamtinterpolationszeit der größte TimeSpanKeyTime Wert, der zwischen seinen Keyframes angegeben ist, sofern vorhanden.
Andernfalls beträgt die Gesamtinterpolationszeit 1 Sekunde.
Verwenden Sie den Gesamtinterpolationszeitwert, um Werte aufzulösen PercentKeyTime .
Beheben Sie den letzten Keyframe, wenn er in den vorherigen Schritten noch nicht aufgelöst wurde. Wenn der Wert des letzten Keyframes KeyTime oder Uniform ist, wird seine aufgelöste Zeit der Gesamtinterpolationszeit entsprechen.
Wenn der KeyTime Wert des ersten Keyframes Paced ist und die Animation mehr als einen Keyframe hat, lösen Sie den KeyTime Wert in Null auf. Wenn nur ein Keyframe vorhanden ist und der KeyTime Wert Paced ist, wird er auf die Gesamtinterpolationszeit aufgelöst, wie im vorherigen Schritt beschrieben.
Auflösung der verbleibenden UniformKeyTime Werte: Jeder erhält einen gleichen Anteil an 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 Keyframes mit nicht angegebenen Schlüsselzeiten auf, indem Sie die Keyframes verwenden, die als nächstes deklariert wurden, die aufgelöste KeyTime Werte aufweisen.
Auflösen der verbleibenden PacedKeyTime Werte. Paced KeyTime verwenden Sie die KeyTime Werte der benachbarten Keyframes, um die berechnete Zeit zu ermitteln. Ziel ist es, sicherzustellen, dass die Geschwindigkeit der Animation um die aufgelöste Zeit dieses Keyframes konstant ist.
Sortieren Sie Keyframes in der Reihenfolge der aufgelösten Zeit (Primärschlüssel) und der Reihenfolge der Deklaration (Sekundärschlüssel), d. h. verwenden Sie eine stabile Sortierung basierend auf den aufgelösten Keyframewerten KeyTime .
Siehe auch
Zusammenarbeit auf GitHub
Die Quelle für diesen Inhalt finden Sie auf GitHub, wo Sie auch Issues und Pull Requests erstellen und überprüfen können. Weitere Informationen finden Sie in unserem Leitfaden für Mitwirkende.
.NET Desktop feedback