Übersicht über Keyframe-AnimationenKey-Frame Animations Overview

Dieses Thema bietet eine Einführung in Keyframe-Animationen.This topic introduces you to key-frame animations. Mit Keyframe-Animationen können Sie bei Animationen mehr als zwei Zielwerte animieren und die Interpolationsmethode einer Animation steuern.Key-frame animations enable you to animate using more than two target values, and control an animation's interpolation method.

VorraussetzungenPrerequisites

Für diese Übersicht sollten Sie mit Animationen und Zeitachsen in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) vertraut sein.To understand this overview, you should be familiar with Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) animations and timelines. Eine Einführung zu Animationen finden Sie unter Übersicht über Animationen.For an introduction to animations, see the Animation Overview. Kenntnisse in From/To/By-Animationen sind ebenfalls hilfreich.It also helps to be familiar with From/To/By animations. Weitere Informationen finden Sie unter „Übersicht über From/To/by-Animationen“.For more information, see the From/To/By Animations Overview.

Was ist eine Keyframe-Animation?What is a Key-Frame Animation?

Wie eine From/To/By-Animation animiert eine Keyframe-Animation den Wert einer Zieleigenschaft.Like a From/To/By animation, a key-frame animation animates the value of a target property. Sie erstellt einen Übergang zwischen den Zielwerten, über die Duration.It creates a transition among its target values over its 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.However, while a From/To/By animation creates a transition between two values, a single key-frame animation can create transitions among any number of target values. 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.Unlike a From/To/By animation, a key frame animation has no From, To, or By properties with which to set its target values. Die Zielwerte einer Keyframe-Animation werden mithilfe von Keyframe-Objekten beschrieben (daher der Begriff „Keyframe-Animation“).A key-frame animation's target values are described using key frames objects (hence the term, "key-frame animation"). Um die Zielwerte einer Animation anzugeben, können Sie auch Keyframe-Objekte erstellen und fügen sie der Animation hinzu KeyFrames Auflistung.To specify the animation's target values, you create key frame objects and add them to the animation's KeyFrames collection. Wenn die Animation ausgeführt wird, erstellt sie Übergänge zwischen den Frames, die Sie angegeben haben.When the animation runs, it transitions between the frames you specified.

Einige Keyframe-Methoden unterstützen nicht nur mehrere Zielwerte, sondern sogar mehrere Interpolationsmethoden.In addition to supporting multiple target values, some key-frame methods even support multiple interpolation methods. Die Interpolationsmethode einer Animation definiert, wie sie einen Übergang von einem Wert zum nächsten erstellt.An animation's interpolation method defines how it transitions from one value to the next. Es gibt drei Arten von Interpolationen: diskret, linear und Spline.There are three types of interpolations: discrete, linear, and splined.

Um Animationen mit einer Keyframe-Animation auszuführen, gehen Sie folgendermaßen vor.To animate with a key-frame animation, you complete the following steps.

  • Deklarieren Sie die Animation und geben Sie die Duration, genauso wie bei der ein von/to/by-Animation aus.Declare the animation and specify its Duration, just like you would for a from/to/by animation.

  • Für jeden Zielwert einen Keyframe des entsprechenden Typs zu erstellen, legen Sie seinen Wert und KeyTime, und das Hinzufügen zur der Animation KeyFrames Auflistung.For each target value, create a key frame of the appropriate type, set its value and KeyTime, and add it to the animation's KeyFrames collection.

  • Ordnen Sie der Animation eine Eigenschaft zu, genau so wie bei einer From/To/By-Animation.Associate the animation with a property, just like you would with a From/To/By animation. Weitere Informationen zum Anwenden einer Animation auf eine Eigenschaft mit einem Storyboard finden Sie unter Übersicht über Storyboards.For more information about applying an animation to a property using a storyboard, see Storyboards Overview.

Im folgenden Beispiel wird eine DoubleAnimationUsingKeyFrames zum Animieren einer Rectangle Element für vier verschiedene Speicherorte erzeugen.The following example uses a DoubleAnimationUsingKeyFrames to animate a Rectangle element to four different locations.

<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 auf eine Eigenschaft angewendet werden, mithilfe von eine Storyboard im Markup und Code oder mithilfe der BeginAnimation Methode im Code.Like a From/To/By animation, a key-frame animation can be applied to a property by using a Storyboard in markup and code or by using the BeginAnimation method in code. Sie können auch eine Keyframe Animation verwenden, zum Erstellen einer AnimationClock und auf eine oder mehrere Eigenschaften anwenden.You may also use a key-frame animation to create an AnimationClock and apply it to one or more properties. Weitere Informationen zu den verschiedenen Methoden zum Anwenden von Animationen finden Sie unter Übersicht über die Verfahren zur Animation von Eigenschaften.For more information about the different methods for applying animations, see the Property Animation Techniques Overview.

Keyframe-AnimationstypenKey-Frame Animation Types

Da Animationen Eigenschaftswerte generieren, gibt es für die einzelnen Eigenschaftentypen unterschiedliche Animationstypen.Because animations generate property values, there are different animation types for different property types. Zum Animieren einer Eigenschaft, die akzeptiert eine Double (z. B. eines Elements Width Eigenschaft), verwenden Sie eine Animation, die erzeugt Double Werte.To animate a property that takes a Double (such as an element's Width property), you use an animation that produces Double values. Zum Animieren einer Eigenschaft, die akzeptiert eine Point, verwenden Sie eine Animation, die erzeugt Point Werte und So weiter.To animate a property that takes a Point, you use an animation that produces Point values, and so on.

Die Keyframe-Animation-Klassen gehören zu den System.Windows.Media.Animation Namespace und die folgende Benennungskonvention befolgen:The key-frame animation classes belong to the System.Windows.Media.Animation namespace and adhere to the following naming convention:

<Typ> AnimationUsingKeyFrames<Type> AnimationUsingKeyFrames

Wobei <Typ> der Wertetyp ist, den die Klasse animiert.Where <Type> is the type of value that the class animates.

WPFWPF bietet folgende Keyframe-Animationsklassen.provides the following key-frame animation classes.

EigenschaftentypProperty type Entsprechende From/To/By-AnimationsklassenCorresponding from/to/by animation class Unterstützte InterpolationsmethodenInterpolation methods supported
Boolean BooleanAnimationUsingKeyFrames DiskretDiscrete
Byte ByteAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Color ColorAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Decimal DecimalAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Double DoubleAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Int16 Int16AnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Int32 Int32AnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Int64 Int64AnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Matrix MatrixAnimationUsingKeyFrames DiskretDiscrete
Object ObjectAnimationUsingKeyFrames DiskretDiscrete
Point PointAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Quaternion QuaternionAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Rect RectAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Rotation3D Rotation3DAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Single SingleAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
String StringAnimationUsingKeyFrames DiskretDiscrete
Size SizeAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Thickness ThicknessAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Vector3D Vector3DAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined
Vector VectorAnimationUsingKeyFrames Diskret, linear, SplineDiscrete, Linear, Splined

Zielwerte (Keyframes) und SchlüsselzeitenTarget Values (key frames) and Key Times

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.Just as there are different types of key-frame animations for animating different property types, there are also different types of key frame objects: one for each type of value animated and interpolation method supported. Keyframe-Typen entsprechen der folgenden Benennungskonvention:Key frame types adhere to the following naming convention:

<InterpolationMethod><Typ> KeyFrame<InterpolationMethod><Type> KeyFrame

Wobei <InterpolationMethod> für die Interpolationsmethode steht, die der Keyframe verwendet, und <Typ> für den Werttyp, den die Klasse animiert.Where <InterpolationMethod> is the interpolation method the key frame uses and <Type> is the type of value that the class animates. Eine Keyframe-Animation, die alle drei Interpolationsmethoden unterstützt, besitzt drei Keyframe-Typen, die Sie verwenden können.A key-frame animation that supports all three interpolation methods will have three key frame types that you can use. Sie können z.B. drei Keyframe-Typen mit einem DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, und SplineDoubleKeyFrame.For example, you can use three key frame types with a DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, and SplineDoubleKeyFrame. (Interpolationsmethoden werden in einem späteren Abschnitt ausführlich beschrieben.)(Interpolation methods are described in detail in a later section.)

Die Hauptaufgabe eines Keyframes wird an eine KeyTime und Value.The primary purpose of a key frame is to specify a KeyTime and a Value. Jeder Keyframe-Typ stellt diese zwei Eigenschaften bereit.Every key frame type provides these two properties.

  • Die Value Eigenschaft gibt den Zielwert für diesen Keyframe an.The Value property specifies the target value for that key-frame.

  • Die KeyTime Eigenschaft gibt an, wann (innerhalb der Animation Duration) eines Keyframes Value erreicht ist.The KeyTime property specifies when (within the animation's Duration) a key frame's Value is reached.

Wenn eine Keyframe-Animation beginnt, durchläuft die Keyframes in der Reihenfolge definiert, die von ihren KeyTime Eigenschaften.When a key frame animation begins, iterates through its key frames in the order defined by their KeyTime properties.

  • 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 die Animation die Ausgabe Wert wird der Wert des ersten Keyframes.If there is no key frame at time 0, the animation creates a transition between the target property's current value and the Value of the first key frame; otherwise, the animation's output value becomes the value of the first key frame.

  • Die Animation erstellt einen Übergang zwischen den Value von der ersten und zweiten Keyframe, die mithilfe der vom zweiten Keyframe angegebenen Interpolationsmethode.The animation creates a transition between the Value of the first and second key frames using the interpolation method specified by the second key frame. Der Übergang beginnt an der erste Keyframe KeyTime und endet, wenn der zweite Keyframe KeyTime erreicht ist.The transition starts at the first key frame's KeyTime and ends when the second key frame's KeyTime is reached.

  • Die Animation wird fortgesetzt und erstellt Übergänge zwischen jedem nachfolgenden Keyframe und dem vorangehenden Keyframe.The animation continues, creating transitions between each subsequent key frame and its preceding key frame.

  • Schließlich wechselt die Animation zum Wert des Keyframes mit der größten Schlüsselzeit ist gleich oder kleiner als der Animation Duration.Finally, the animation transitions to the value of the key frame with the greatest key time that is equal to or smaller than the animation's Duration.

Wenn der Animation Duration ist Automatic oder den zugehörigen Duration entspricht bis zum Zeitpunkt des letzten Keyframes, endet die Animation.If the animation's Duration is Automatic or its Duration is equal to the time of the last key frame, the animation ends. Andernfalls gilt: Wenn der Animation Duration ist größer als die Schlüsselzeit des letzten Keyframes, behält die Animation, die die Keyframe-Wert, bis das Ende erreicht die Duration.Otherwise, if the animation's Duration is greater than the key time of the last key frame, the animation holds the key frame value until it reaches the end of its Duration. Wie alle Animationen bestimmt eine Keyframe Animation die FillBehavior Eigenschaft, um zu bestimmen, ob es Endwert, wenn das Ende des aktiven Zeitraums erreicht.Like all animations, a key-frame animation uses its FillBehavior property to determine whether it holds it final value when it reaches the end of its active period. Weitere Informationen finden Sie unter Übersicht über Zeitsteuerungsverhalten.For more information, see the Timing Behaviors Overview.

Im folgenden Beispiel wird die DoubleAnimationUsingKeyFrames Objekt definiert, die im vorherigen Beispiel veranschaulicht die Value und KeyTime Eigenschaften arbeiten.The following example uses the DoubleAnimationUsingKeyFrames object defined in the preceding example to demonstrate how the Value and KeyTime properties work.

  • Der erste Keyframe legt sofort den Ausgabewert der Animation auf 0 fest.The first key frame immediately sets the animation's output value to 0.

  • Der zweite Keyframe führt eine Animation von 0 bis 350 aus.The second key frame animates from 0 to 350. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 0 Sekunden), wird 2 Sekunden lang abgespielt und endet zur Zeit = 0:0:2.It starts after the first key frame ends (at time = 0 seconds) and plays for 2 seconds, ending at time = 0:0:2.

  • Der dritte Keyframe führt eine Animation von 350 bis 50 aus.The third key frame animates from 350 to 50. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 2 Sekunden), wird 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:7.It starts when the second key frame ends (at time = 2 seconds) and plays for 5 seconds, ending at time = 0:0:7.

  • Der vierte Keyframe führt eine Animation von 50 bis 200 aus.The fourth key frame animates from 50 to 200. Sie beginnt nach dem Ende des dritten Keyframes (zur Zeit = 7 Sekunden), wird 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:8.It starts when the third key frame ends (at time = 7 seconds) and plays for 1 second, ending at time = 0:0:8.

  • Da die Duration -Eigenschaft der Animation auf 10 Sekunden festgelegt wurde, behält die Animation den Endwert zwei Sekunden vor Ende zur Zeit = 0:0:10.Because the Duration property of the animation was set to 10 seconds, the animation holds its final value for two seconds before ending at time = 0:0:10.

<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>

InterpolationsmethodenInterpolation Methods

In den vorherigen Abschnitten wurde erwähnt, dass einige Keyframe-Animationen mehrere Interpolationsmethoden unterstützen.The preceding sections mentioned that some key-frame animations support multiple interpolation methods. Die Interpolation einer Animation beschreibt, wie eine Animation während ihrer Dauer einen Übergang zwischen Werten erstellt.An animation's interpolation describes how an animation transitions between values over its duration. Durch die Auswahl, welcher Keyframe-Typ für die Animation verwendet wird, kann die Interpolationsmethode für dieses Keyframe-Segment definiert werden.By selecting which key frame type you use with your animation, you can define the interpolation method for that key frame segment. Es gibt drei verschiedene Typen von Interpolationsmethoden: linear, diskret und Spline.There are three different types of interpolation methods: linear, discrete, and splined.

Lineare InterpolationLinear Interpolation

Bei der linearen Interpolation verläuft die Animation mit konstanter Geschwindigkeit der Segmentdauer.With linear interpolation, the animation progresses at a constant rate of the segment duration. 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:For example, if a key frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation will output the following values at the specified times:

zeitTime AusgabewertOutput value
00 00
11 22
22 44
33 66
44 88
4.254.25 8.58.5
4.54.5 99
55 1010

Diskrete InterpolationDiscrete Interpolation

Bei der diskreten Interpolation springt die Animationsfunktion ohne Interpolation von einem Wert zum nächsten.With discrete interpolation, the animation function jumps from one value to the next without interpolation. 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:If a key frame segment transitions from 0 to 10 over a duration of 5 seconds, the animation will output the following values at the specified times:

zeitTime AusgabewertOutput value
00 00
11 00
22 00
33 00
44 00
4.254.25 00
4.54.5 00
55 1010

Beachten Sie, dass die Animation ihren Ausgabewert erst ganz am Ende der Segmentdauer ändert.Notice how the animation does not change its output value until the very end of the segment duration.

Die Spline-Interpolation ist komplexer.Splined interpolation is more complex. Sie wird im nächsten Abschnitt beschrieben.It is described in the next section.

Spline-InterpolationSplined Interpolation

Die Spline-Interpolation kann verwendet werden, um realistischere Effekte zur Zeitsteuerung zu erreichen.Splined interpolation can be used to achieve more realistic timing effects. 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.Because animations are so often used to imitate effects that occur in the real world, developers might need fine control of the acceleration and deceleration of objects, and close manipulation of timing segments. Sie können Spline-Keyframes verwenden, um Animationen mit der Spline-Interpolation auszuführen.Spline key frames enable you to animate with splined interpolation. Bei anderen Keyframes geben Sie einen Value und KeyTime.With other key frames, you specify a Value and KeyTime. Mit einem Spline-Keyframe Geben Sie auch eine KeySpline.With a spline key frame, you also specify a KeySpline. Das folgende Beispiel zeigt einen einzelnen Spline-Keyframe für eine DoubleAnimationUsingKeyFrames.The following example shows a single spline key frame for a DoubleAnimationUsingKeyFrames. Beachten Sie, dass die KeySpline Eigenschaft, die Spline-Keyframes sich von anderen Typen von Keyframes macht.Notice the KeySpline property; that's what makes a spline key frame different from the other types of key frames.

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

Kubische Bezier-Kurve ist von einem Startpunkt, Endpunkt und zwei Steuerpunkte definiert.A cubic Bezier curve is defined by a start point, an end point, and two control points. Die KeySpline Eigenschaft von einem Spline-Keyframe definiert, den zwei Kontrollpunkt einer Bezier-Kurve, die von (0,0) bis (1,1) erweitert.The KeySpline property of a spline key frame defines the two control point of a Bezier curve that extends from (0,0) to (1,1). Steuert, der erste Kontrollpunkt den Kurvenfaktor der ersten Hälfte des Bezier-Kurve und steuert, der zweite Kontrollpunkt den Kurvenfaktor der zweiten Hälfte des Bezier-Segments.The first control point controls the curve factor of the first half of the Bezier curve, and the second control point controls the curve factor of the second half of the Bezier segment. Die resultierende Kurve beschreibt die Änderungsrate für diesen Spline-Keyframe.The resulting curve describes the rate of change for that spline key frame. Je steiler die Kurve, desto schneller ändert der Keyframe seine Werte.The steeper the curve, the faster the key frame changes its values. Wenn die Kurve flacher wird, ändert der Keyframe seine Werte langsamer.As the curve gets flatter, the key frame changes its values more slowly.

Sie können KeySpline physischen herabstürzendes wie fallen Wasser oder springenden Bällen simulieren oder andere "Ease-in" und "Ease-Out"-Effekte auf die Animationen anwenden.You might use KeySpline to simulate physical trajectories like falling water or bouncing balls, or apply other "ease in" and "ease out" effects to motion animations. 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.For user interaction effects like background fades or control button rebound, you might apply splined interpolation to speed up or slow down the rate of change for an animation in a specific way.

Im folgenden Beispiel wird eine KeySpline von 0,1 1,0, der die folgende Bezier-Kurve erstellt.The following example specifies a KeySpline of 0,1 1,0, which creates the following Bezier curve.

Bezier-KurveA Bezier curve
Ein KeySpline mit Kontrollpunkten (0,0, 1,0) und (1,0, 0,0)A key spline with control points (0.0, 1.0) and (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.This key frame animates rapidly when it begins, slows down, and then speeds up again before it ends.

Im folgenden Beispiel wird eine KeySpline von 0,5,0,25 0,75,1,0 angegeben, die die folgende Bezier-Kurve erstellt.The following example specifies a KeySpline of 0.5,0.25 0.75,1.0, which creates the following Bezier curve.

Bezier-KurveA Bezier curve
Ein Spline für Keyframes mit den Kontrollpunkten (0,25, 0,5) und (0,75, 1,0)A key spline with control points (0.25, 0.5) and (0.75, 1.0)

<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />

Da die Krümmung der Bezier-Kurve sehr wenig geändert wird, wird dieses Keyframes animiert, auf fast konstanter Geschwindigkeit; Sie verlangsamt ein wenig in Richtung der ganz am Ende.Because the curvature of the Bezier curve changes very little, this key frame animates at an almost constant rate; it slows down somewhat toward its very end.

Im folgenden Beispiel wird eine DoubleAnimationUsingKeyFrames die Position des Rechtecks animiert.The following example uses a DoubleAnimationUsingKeyFrames to animate the position of rectangle. Da die DoubleAnimationUsingKeyFrames verwendet SplineDoubleKeyFrame Objekten, die den Übergang zwischen jedem Keyframe-Wert verwendet Spline-Interpolation.Because the DoubleAnimationUsingKeyFrames uses SplineDoubleKeyFrame objects, the transition between each key frame value uses 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>

Die Spline-Interpolation kann schwer verständlich sein. Es kann daher hilfreich sein, mit verschiedenen Einstellungen zu experimentieren.Splined interpolation can be difficult to understand; experimenting with different settings can help. 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.The Key Spline Animation Sample enables you to change key spline values and see the result it has on an animation.

Kombinieren von InterpolationsmethodenCombining Interpolation Methods

Sie können Keyframes mit verschiedenen Interpolationstypen in einer einzelnen Keyframe-Animation verwenden.You can use key frames with different interpolation types in a single key frame animation. Wenn zwei Keyframe-Animationen mit verschiedenen Interpolationen aufeinanderfolgen, wird mit der Interpolationsmethode des zweiten Keyframes der Übergang vom ersten zum zweiten Wert erstellt.When two key frame animations with different interpolations follow each other, the interpolation method of the second key frame is used to create the transition from the first value to the second.

Im folgenden Beispiel eine DoubleAnimationUsingKeyFrames erstellt wird, verwendet lineare, diskrete und Spline-Interpolation.In the following example, a DoubleAnimationUsingKeyFrames is created that uses linear, splined, and discrete interpolation.

<!-- 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üsselzeitenMore about Duration and Key Times

Wie andere Animationen, verfügen auch Keyframe-Animationen eine Duration Eigenschaft.Like other animations, key-frame animations have a Duration property. Zusätzlich zur Angabe der Animation Duration, müssen Sie angeben, welcher Teil dieser Dauer auf jedem Keyframe gewährt wird.In addition to specifying the animation's Duration, you need to specify what portion of that duration is given to each key frame. Beschreiben Sie dazu eine KeyTime für jeden Keyframe der Animation.You do so by describing a KeyTime for each of the animation's key frames. Jeder Keyframe KeyTime gibt den Zeitpunkt, zu dem der Keyframe endet.Each key frame's KeyTime specifies when that key frame ends.

Die KeyTime Eigenschaft gibt nicht die Wiedergabedauer der Schlüsselzeit.The KeyTime property does not specify how long the key time plays. 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.The amount of time a key frame plays is determined by when the key frame ends, when the previous key frame ended, and the animation's duration. Schlüsselzeiten können als Zeitwert, Prozentwert oder als die speziellen Werte angegeben werden, wenn Uniform oder Paced.Key times may be specified as a time value, a percentage, or as the special values Uniform or Paced.

In der folgenden Liste werden die verschiedenen Methoden zur Angabe von Schlüsselzeiten beschrieben.The following list describes the different ways of specifying key times.

TimeSpan-WerteTimeSpan Values

Sie können TimeSpan Werte fest, um eine KeyTime.You may use TimeSpan values to specify a KeyTime. Der Wert muss größer als oder gleich 0 und kleiner als oder gleich der Dauer der Animation sein.The value should be greater than or equal to 0 and less than or equal to the animation's duration. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, deren Schlüsselzeiten als Zeitwerte angegeben sind.The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as time values.

  • Der erste Keyframe führt die Animation vom Basiswert bis 100 in den ersten 3 Sekunden aus und endet zur Zeit = 0:0:03.The first key frame animates from the base value to 100 over the first 3 seconds, ending at time = 0:0:03.

  • Der zweite Keyframe führt eine Animation von 100 bis 200 aus.The second key frame animates from 100 to 200. Sie beginnt nach dem Ende des ersten Keyframes (zur Zeit = 3 Sekunden), wird 5 Sekunden lang abgespielt und endet zur Zeit = 0:0:8.It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8.

  • Der dritte Keyframe führt eine Animation von 200 bis 500 aus.The third key frame animates from 200 to 500. Sie beginnt nach dem Ende des zweiten Keyframes (zur Zeit = 8 Sekunden), wird 1 Sekunden lang abgespielt und endet zur Zeit = 0:0:9.It starts when the second key frame ends (at time = 8 seconds) and plays for 1 second, ending at time = 0:0:9.

  • Der vierte Keyframe führt eine Animation von 500 bis 600 aus.The fourth key frame animates from 500 to 600. Sie beginnt nach dem Ende des dritten Keyframes (zur Zeit = 9 Sekunden), wird 1 Sekunde lang abgespielt und endet zur Zeit = 0:0:10.It starts when the third key frame ends (at time = 9 seconds) and plays for 1 second, ending at time = 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>

ProzentwertePercentage Values

Ein Prozentwert gibt an, dass das Ende des Keyframes bei einem bestimmten Prozentsatz von der Animation Duration.A percentage value specifies that the key frame ends at some percentage of the animation's Duration. In XAMLXAML wird der Prozentsatz als Zahl angegeben, gefolgt vom %-Symbol.In XAMLXAML, you specify the percentage as a number followed by the % symbol. Im Code verwenden Sie die FromPercent Methode und übergeben sie einen Double , der angibt, des Prozentsatzes.In code, you use the FromPercent method and pass it a Double indicating the percentage. Der Wert muss größer als oder gleich 0 und kleiner als oder gleich 100 Prozent sein.The value must be greater than or equal to 0 and less than or equal to 100 percent. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, deren Schlüsselzeiten als Prozentsätze angegeben sind.The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as percentages.

  • Der erste Keyframe führt die Animation vom Basiswert bis 100 in den ersten 3 Sekunden aus und endet zur Zeit = 0:0:3.The first key frame animates from the base value to 100 over the first 3 seconds, ending at time = 0:0:3.

  • Der zweite Keyframe führt eine Animation von 100 bis 200 aus.The second key frame animates from 100 to 200. 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).It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8 (0.8 * 10 = 8).

  • Der dritte Keyframe führt eine Animation von 200 bis 500 aus.The third key frame animates from 200 to 500. 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).It starts when the second key frame ends (at time = 8 seconds) and plays for 1 second, ending at time = 0:0:9 (0.9 * 10 = 9).

  • Der vierte Keyframe führt eine Animation von 500 bis 600 aus.The fourth key frame animates from 500 to 600. 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).It starts when the third key frame ends (at time = 9 seconds) and plays for 1 second, ending at time = 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“Special Value, Uniform

Verwendung Uniform Zeitüberschreitung auftritt, wenn Sie möchten, dass jeder Keyframe die gleiche Menge an Zeit dauern.Use Uniform timing when you want each key frame to take the same amount of time.

Ein Uniform -Schlüsselzeit teilt die verfügbare Zeit gleichmäßig durch die Anzahl der Keyframes, um die Endzeit jedes Keyframes zu bestimmen.A Uniform key time divides the available time equally by the number of key frames to determine the end time of each key frame. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und vier Keyframes, deren Schlüsselzeiten, als Uniform.The following example shows an animation with a duration of 10 seconds and four key frames whose key times are specified as Uniform.

  • 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.The first key frame animates from the base value to 100 over the first 2.5 seconds, ending at time = 0:0:2.5.

  • Der zweite Keyframe führt eine Animation von 100 bis 200 aus.The second key frame animates from 100 to 200. 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.It starts after the first key frame ends (at time = 2.5 seconds) and plays for approximately 2.5 seconds, ending at time = 0:0:5.

  • Der dritte Keyframe führt eine Animation von 200 bis 500 aus.The third key frame animates from 200 to 500. 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.It starts when the second key frame ends (at time = 5 seconds) and plays for 2.5 seconds, ending at time = 0:0:7.5.

  • Der vierte Keyframe führt eine Animation von 500 bis 600 aus.The fourth key frame animates from 500 to 600. 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.It starts when the second key frame ends (at time = 7.5 seconds) and plays for 2.5 seconds, ending at time = 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“Special Value, Paced

Verwendung Paced Zeitüberschreitung auftritt, wenn Sie mit konstanter Geschwindigkeit animieren möchten.Use Paced timing when you want to animate at a constant rate.

Ein Paced -Schlüsselzeit weist die verfügbare Zeit entsprechend der Länge der einzelnen Keyframes, die Dauer jedes Frames zu bestimmen.A Paced key time allocates the available time according to the length of each of the key frames to determine the duration of each frame. Auf diese Weise kann sichergestellt werden, dass die Geschwindigkeit der Animation konstant bleibt.This will provide the behavior that the velocity or pace of the animation remains constant. Das folgende Beispiel zeigt eine Animation mit einer Dauer von 10 Sekunden und drei Keyframes, deren Schlüsselzeiten, als Paced.The following example shows an animation with a duration of 10 seconds and three key frames whose key times are specified as Paced.

<!-- 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, wenn die Schlüsselzeit des letzten Keyframes ist Paced oder Uniform, wird die aufgelöste Schlüsselzeit auf 100 Prozent festgelegt.Note that, if the last key frame's key time is Paced or Uniform, its resolved key time will be set to 100 percent. Wenn der erste Keyframe in einer Multiframe-Animation einen Paced-Wert besitzt, wird die aufgelöste Schlüsselzeit auf 0 festgelegt.If the first key frame in a multiframe animation is paced, its resolved key time will be set to 0. (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.)(If the key frame collection contains only a single key frame and it is a paced key frame, its resolved key time will be set to 100 percent.)

Verschiedene Keyframes innerhalb einer einzelnen Keyframe-Animation können verschiedene Schlüsselzeittypen verwenden.Different key frames within a single key frame animation may use different key time types.

Kombinieren von Schlüsselzeiten, Keyframes in falscher ReihenfolgeCombining Key Times, Out-Of-Order Key Frames

Sie können Keyframes mit verschiedenen KeyTime Werttypen in derselben Animation.You can use key frames with different KeyTime value types in the same animation. Und obwohl empfohlen wird, Keyframes in der Reihenfolge hinzuzufügen, in der sie abgespielt werden sollen, ist das nicht notwendig.And, although it's recommended that you add key frames in the order in which they should play, it's not necessary. Das Animations- und Zeitsteuerungssystem kann Keyframes in falscher Reihenfolge auflösen.The animation and timing system is capable of resolving out of order key frames. Keyframes mit ungültigen Schlüsselzeiten werden ignoriert.Key frames with invalid key times are ignored.

Die folgende Liste beschreibt das Verfahren, mit dem Schlüsselzeiten für Keyframes einer Keyframe-Animation aufgelöst werden.The following list describes the procedure by which key times are resolved for a key-frame animation's key frames.

  1. Beheben TimeSpan KeyTime Werte.Resolve TimeSpan KeyTime values.

  2. Bestimmen Sie die gesamte Interpolationszeit der Animation, die Gesamtzeit, die die Keyframe-Animation für eine vollständige Vorwärtsiteration benötigt.Determine the animation’s total interpolation time, the total time it takes the key-frame animation to complete a forward iteration.

    1. Wenn der Animation Duration nicht Automatic oder Forever, die gesamte Interpolationszeit Zeit ist der Wert der Animation Duration Eigenschaft.If the animation's Duration is not Automatic or Forever, the total interpolation time is the value of the animation's Duration property.

    2. Andernfalls ist die gesamte Interpolationszeit der größte TimeSpan KeyTime Wert zwischen den Keyframes, angegeben werden, sofern vorhanden.Otherwise, the total interpolation time is the largest TimeSpan KeyTime value specified among its key frames, if any exist.

    3. Andernfalls beträgt die gesamte Interpolationszeit Zeit 1 Sekunde.Otherwise, the total interpolation time is 1 second.

  3. Verwenden Sie den Zeitwert für die gesamte Interpolationszeit aufgelöst Percent KeyTime Werte.Use the total interpolation time value to resolve Percent KeyTime values.

  4. Lösen Sie den letzten Keyframe auf, wenn er nicht bereits in den vorherigen Schritten aufgelöst wurde.Resolve last key frame, if it wasn't already resolved in the previous steps. Wenn die KeyTime des letzten Keyframes ist Uniform oder Paced, die aufgelöste Zeit wird die gesamte Interpolationszeit gleich sein.If the KeyTime of the last key frame is Uniform or Paced, its resolved time will be equal to the total interpolation time.

    Wenn die KeyTime ist der erste Keyframe Paced und diese Animation hat mehr als auf Keyframes, beheben Sie die KeyTime Wert 0 (null); Wenn nur ein Keyframe vorhanden ist und die zugehörige KeyTime Wert Paced, wird er mit dem gesamten aufgelöst Interpolationszeit, wie im vorherigen Schritt beschrieben.If the KeyTime of the first key frame is Paced and this animation has more than on key frames, resolve its KeyTime value to zero; if there is only one key frame and its KeyTime value is Paced, it is resolved to the total interpolation time, as described in the preceding step.

  5. Lösen Sie verbleibende Uniform KeyTime Werte: sie erhalten jeweils einen gleichen Anteil der verfügbaren Zeit.Resolve remaining Uniform KeyTime values: they are each given an equal share of the available time. Während dieses Vorgangs nicht aufgelöste Paced KeyTime Werte werden als vorübergehend behandelt Uniform KeyTime Werte und erhalten eine vorübergehend aufgelöste Zeit.During this process, unresolved Paced KeyTime values are temporarily treated as Uniform KeyTime values, and get a temporary resolved time.

  6. Auflösen der KeyTime -Werte von Keyframes mit nicht Schlüsselzeiten angegeben, mithilfe von Keyframes Sie deklariert, die gelöst haben KeyTime Werte.Resolve the KeyTime values of key frames with unspecified key times by using the key frames declared nearest them that have resolved KeyTime values.

  7. Lösen Sie verbleibende Paced KeyTime Werte.Resolve remaining Paced KeyTime values. Paced KeyTime Verwenden Sie die KeyTime -Werte der benachbarten Keyframes, um ihre aufgelöste Zeit zu bestimmen.Paced KeyTime use the KeyTime values of the neighboring key frames to determine their resolved time. Das Ziel ist es, sicherzustellen, dass die Geschwindigkeit der Animation um die aufgelöste Zeit dieses Keyframes herum konstant ist.The goal is to ensure that the velocity of the animation is constant around this key frame's resolved time.

  8. Sortieren Sie die Keyframes in der Reihenfolge der aufgelösten Zeit (Primärschlüssel), und die Reihenfolge der Deklaration (Sekundärschlüssel), d. h., verwenden Sie eine stabile Sortierung basierend auf den aufgelösten Keyframe KeyTime Werte.Sort key frames in order of resolved time (primary key), and order of declaration (secondary key), i.e., use a stable sort based on the resolved key frame KeyTime values.

Siehe auchSee also