Freigeben über

Key-Frame-Animationen und Animationen mit Übergangsfunktionen

Lineare Keyframeanimationen, Keyframeanimationen mit einem KeySpline-Wert oder Beschleunigungsfunktionen sind drei verschiedene Techniken für ungefähr dasselbe Szenario: Erstellen einer Storyboardanimation, die etwas komplexer ist und ein nichtlineares Animationsverhalten von einem Anfangszustand bis zu einem Endzustand verwendet.

Voraussetzungen

Stellen Sie sicher, dass Sie das Thema "Storyboardanimationen" gelesen haben. Dieses Thema baut auf den Animationskonzepten auf, die in Storyboarded-Animationen erläutert wurden, und wird nicht erneut darauf eingehen. Storyboard-Animationen beschreiben zum Beispiel, wie Animationen ausgerichtet werden, Storyboards als Ressourcen verwendet werden und die Zeitachsen-Eigenschaftswerte wie „Duration“, „FillBehavior“ usw.

Animieren mithilfe von Keyframeanimationen

Keyframeanimationen ermöglichen mehr als einen Zielwert, der an einem Punkt entlang der Animationszeitachse erreicht wird. Mit anderen Worten, jeder Keyframe kann einen anderen Zwischenwert angeben, und der letzte erreichte Keyframe ist der endgültige Animationswert. Indem Sie mehrere zu animierende Werte angeben, können Sie komplexere Animationen erstellen. Keyframeanimationen ermöglichen auch unterschiedliche Interpolationslogik, die jeweils als unterschiedliche Keyframe-Unterklasse pro Animationstyp implementiert werden. Insbesondere verfügt jeder Keyframeanimationstyp über eine Diskrete, Lineare, Spline und Abschwächungsvariation seiner KeyFrame-Klasse zur Angabe seiner Keyframes. Um beispielsweise eine Animation anzugeben, die auf ein Double ausgerichtet ist und Keyframes verwendet, können Sie Keyframes mit DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame und EasingDoubleKeyFrame deklarieren. Sie können alle diese Typen innerhalb einer einzelnen Keyframes-Auflistung verwenden, um die Interpolation jedes Mal zu ändern, wenn ein neuer Keyframe erreicht wird.

Bei interpolationsverhalten steuert jeder Keyframe die Interpolation, bis die KeyTime-Zeit erreicht ist. Der Wert wird zu diesem Zeitpunkt ebenfalls erreicht. Wenn neben dem aktuellen noch weitere Keyframes vorhanden sind, wird der Wert in einer Sequenz dann zum Startwert für den nächsten Keyframe.

Zu Beginn der Animation, wenn kein Schlüsselbild mit einem KeyTime von "0:0:0" vorhanden ist, entspricht der Startwert dem nicht animierten Wert der Eigenschaft. Dies ähnelt der Funktionsweise einer From/To/By-Animation, wenn kein From vorhanden ist.

Die Dauer einer Keyframeanimation ist implizit die Dauer, die dem höchsten KeyTime-Wert entspricht, der in einem seiner Keyframes festgelegt ist. Sie können eine explizite Dauer festlegen, wenn Sie möchten, aber achten Sie darauf, dass es nicht kürzer als eine KeyTime in Ihren eigenen Keyframes ist, oder Sie werden einen Teil der Animation abschneiden.

Zusätzlich zu Dauer können Sie alle zeitachsenbasierten Eigenschaften für eine Key-Frame-Animation festlegen, wie Sie es auch mit einer Von-Zu-/-Animation tun können, da die Key-Frame-Animationsklassen ebenfalls von der Zeitachse abgeleitet sind. Diese lauten wie folgt:

  • AutoReverse: Sobald der letzte Keyframe erreicht wurde, werden die Frames von Ende an in umgekehrter Reihenfolge wiederholt. Dadurch wird die scheinbare Dauer der Animation verdoppelt.
  • BeginTime: verzögert den Start der Animation. Der Zeitverlauf für die KeyTime-Werte in den Frames beginnt erst, wenn BeginTime erreicht ist, sodass keine Gefahr besteht, die Frames abzuschneiden.
  • FillBehavior: Steuert, was passiert, wenn der letzte Keyframe erreicht wird. FillBehavior wirkt sich nicht auf zwischengeschaltete Keyframes aus.
  • RepeatBehavior:
    • Wenn dieser Wert auf "Forever" festgelegt ist, wiederholen sich die Keyframes und deren Zeitachse unendlich.
    • Bei Festlegung auf eine Iterationsanzahl wiederholt sich die Zeitachse so oft.
    • Bei Festlegung auf eine Dauer wiederholt sich die Zeitachse, bis diese Zeit erreicht ist. Möglicherweise wird die Animation innerhalb der Keyframe-Sequenz abgeschnitten, wenn die implizite Dauer der Zeitachse kein ganzzahliger Faktor ist.
  • SpeedRatio (nicht häufig verwendet)

Lineare Keyframes

Lineare Keyframes führen zu einer einfachen linearen Interpolation des Werts, bis die KeyTime des Frames erreicht ist. Dieses Interpolationsverhalten ähnelt am meisten den einfacheren Von/Zu/By-Animationen, die im Thema über Storyboard-Animationen beschrieben werden.

Hier erfahren Sie, wie Sie mithilfe einer Keyframeanimation die Renderhöhe eines Rechtecks mithilfe linearer Keyframes skalieren. In diesem Beispiel wird eine Animation ausgeführt, bei der die Höhe des Rechtecks für die ersten 4 Sekunden leicht und linear zunimmt und dann schnell für die letzte Sekunde skaliert wird, bis das Rechteck doppelt so hoch ist wie die Anfangshöhe.

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

Diskrete Schlüsselframes

Diskrete Keyframes verwenden überhaupt keine Interpolation. Wenn eine KeyTime erreicht ist, wird einfach der neue Wert angewendet. Abhängig davon, welche UI-Eigenschaft animiert wird, entsteht häufig eine Animation, die den Eindruck eines "Springens" vermittelt. Seien Sie sicher, dass dies das ästhetische Verhalten ist, das Sie wirklich wollen. Sie können die scheinbaren Sprünge minimieren, indem Sie die Anzahl der deklarierten Keyframes erhöhen, aber wenn eine reibungslose Animation Ihr Ziel ist, sollten Sie stattdessen lineare oder Spline-Keyframes verwenden.

Hinweis

Diskrete Keyframes sind die einzige Möglichkeit, einen Wert zu animieren, der nicht vom Typ Double, Point und Color mit einem DiscreteObjectKeyFrame ist. Dies wird weiter unten in diesem Thema ausführlicher erläutert.

Spline-Keyframes

Ein Spline-Keyframe erstellt einen variablen Übergang zwischen Werten gemäß dem Wert der KeySpline-Eigenschaft . Diese Eigenschaft gibt die ersten und zweiten Kontrollpunkte einer Bézierkurve an, die die Beschleunigung der Animation beschreibt. Im Grunde definiert eine KeySpline eine Funktionsüberzeitbeziehung, bei der das Funktionszeitdiagramm die Form dieser Bézierkurve ist. In der Regel geben Sie einen KeySpline-Wert in einer XAML-Kurzhand-Attributzeichenfolge an, die vier Double-Werte durch Leerzeichen oder Kommas getrennt hat. Diese Werte sind "X,Y"-Paare für zwei Kontrollpunkte der Bézierkurve. "X" ist Zeit und "Y" ist der Funktionsmodifizierer für den Wert. Jeder Wert sollte immer zwischen 0 und einschließlich 1 liegen. Ohne Änderung des Kontrollpunkts an eine KeySpline ist die gerade Linie von 0,0 bis 1,1 die Darstellung einer Funktion im Laufe der Zeit für eine lineare Interpolation. Ihre Kontrollpunkte ändern die Form dieser Kurve und damit das Verhalten der Funktion im Laufe der Zeit für die Splineanimation. Es ist wahrscheinlich am besten, dies visuell als Diagramm zu sehen.

Dieses nächste Beispiel zeigt drei verschiedene Keyframes, die auf eine Animation angewendet werden, wobei es sich bei der letzten um eine Schlüsselsplineanimation für einen Double-Wert (SplineDoubleKeyFrame) handelt. Beachten Sie die Zeichenfolge "0.6,0.0 0.9,0.00", die für KeySpline angewendet wurde. Dies erzeugt eine Kurve, bei der die Animation zunächst langsam ausgeführt wird, dann aber schnell den Wert erreicht, bevor die KeyTime erreicht wird.

<Storyboard x:Name="myStoryboard">
    <!-- 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" EnableDependentAnimation="True">

        <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
            steadily from its starting position to 500 over 
            the first 3 seconds.  -->
        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

        <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
            appears at 400 after the fourth second of the animation. -->
        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

        <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
            back to its starting point. The
            animation starts out slowly at first and then speeds up. 
            This KeyFrame ends after the 6th second. -->
        <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Ein- und Ausblende-Keyframes

Ein Easing-Keyframe ist ein Keyframe, bei dem Interpolation angewendet wird, und die Funktion der Interpolation im Laufe der Zeit wird durch mehrere vordefinierte mathematische Formeln gesteuert. Sie können tatsächlich ein sehr ähnliches Ergebnis mit einem Spline-Keyframe erzeugen, wie es mit einigen der Beschleunigungsfunktionstypen möglich ist, aber es gibt auch bestimmte Beschleunigungsfunktionen, z. B. BackEase, die Sie nicht mit einem Spline reproduzieren können.

Wenn Sie eine Easing-Funktion auf einen Easing-Schlüsselframe anwenden möchten, legen Sie die EasingFunction-Eigenschaft als Eigenschaftselement in XAML für diesen Schlüsselframe fest. Geben Sie für den Wert ein Objektelement für einen der Beschleunigungsfunktionstypen an.

In diesem Beispiel wird zunächst eine CubicEase und dann eine BounceEase als aufeinanderfolgende Schlüsselbilder auf eine DoubleAnimation angewendet, um einen hüpfenden Effekt zu erzeugen.

<Storyboard x:Name="myStoryboard">
    <DoubleAnimationUsingKeyFrames Duration="0:0:10"
        Storyboard.TargetProperty="Height"
        Storyboard.TargetName="myEllipse">

        <!-- This keyframe animates the ellipse up to the crest 
            where it slows down and stops. -->
        <EasingDoubleKeyFrame Value="-300" KeyTime="00:00:02">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>

        <!-- This keyframe animates the ellipse back down and makes
            it bounce. -->
        <EasingDoubleKeyFrame Value="0" KeyTime="00:00:06">
            <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Dies ist nur ein Beispiel für eine Easing-Funktion. Weitere Informationen finden Sie im nächsten Abschnitt.

Übergangsfunktionen

Beschleunigungsfunktionen ermöglichen es Ihnen, benutzerdefinierte mathematische Formeln auf Ihre Animationen anzuwenden. Mathematische Vorgänge sind häufig hilfreich, um Animationen zu erzeugen, die reale Physik in einem 2D-Koordinatensystem simulieren. Zum Beispiel möchten Sie vielleicht, dass ein Objekt realistisch federt oder sich so verhält, als wäre es auf einer Feder. Sie könnten Keyframe- oder sogar From/To/By-Animationen verwenden, um diese Effekte anzunähern. Dies würde jedoch erhebliche Arbeit erfordern, und die Animation wäre weniger genau als die Verwendung einer mathematischen Formel.

Beschleunigungsfunktionen können auf drei Arten auf Animationen angewendet werden:

Hier ist eine Liste der Beschleunigungsfunktionen:

  • BackEase: Zieht die Bewegung einer Animation etwas zurück, bevor sie im angegebenen Pfad animiert wird.
  • BounceEase: Erstellt einen Springeffekt.
  • CircleEase: Erstellt eine Animation, die mithilfe einer Kreisfunktion beschleunigt oder verzögert wird.
  • CubicEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t3 beschleunigt oder verzögert wird.
  • ElasticEase: Erstellt eine Animation, die einer Feder ähnelt, die hin und her schwingt, bis sie zum Ruhezustand kommt.
  • ExponentialEase: Erstellt eine Animation, die mithilfe einer exponentiellen Formel beschleunigt oder verzögert wird.
  • PowerEase: Erstellt eine Animation, die mithilfe der Formel f(t) = tp beschleunigt oder verzögert wird, wobei p der Power-Eigenschaft entspricht.
  • QuadraticEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t2 beschleunigt oder verzögert wird.
  • QuarticEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t4 beschleunigt oder verzögert wird.
  • QuinticEase: Erstellen Sie eine Animation, die mithilfe der Formel f(t) = t5 beschleunigt oder verzögert wird.
  • SineEase: Erstellt eine Animation, die mithilfe einer Sinusformel beschleunigt oder verzögert wird.

Einige der Übergangsfunktionen verfügen über eigene Eigenschaften. Beispielsweise verfügt BounceEase über zwei Eigenschaften "Bounces " und "Bounciness ", die das Funktion-Over-Time-Verhalten dieses bestimmten BounceEase ändern. Andere Beschleunigungsfunktionen wie CubicEase verfügen nicht über andere Eigenschaften als die EasingMode-Eigenschaft , die alle Beschleunigungsfunktionen gemeinsam nutzen, und erzeugen immer dasselbe Funktionsüberlaufzeitverhalten.

Einige dieser Erleichterungsfunktionen haben eine gewisse Überlappung, je nachdem, wie Sie Eigenschaften für diejenigen Erleichterungsfunktionen festlegen, die über solche Eigenschaften verfügen. QuadraticEase ist z. B. identisch mit einer PowerEase mit Power gleich 2. Und CircleEase ist im Grunde ein Standardwert exponentialEase.

Die BackEase-Easing-Funktion ist einzigartig, da sie den Wert außerhalb des normalen Bereichs verändern kann, wie durch Von/Bis oder Werte der Keyframes festgelegt. Es startet die Animation, indem sie den Wert in der entgegengesetzten Richtung ändert, wie es von einem normalen From-To-Verhalten/ erwartet wird, zum From- oder Startwert zurückgeht und führt dann die Animation normal aus.

In einem früheren Beispiel wurde gezeigt, wie eine Beschleunigungsfunktion für eine Keyframeanimation deklariert wird. In diesem nächsten Beispiel wird eine Abschwächungsfunktion auf eine From/To/By-Animation angewendet.

<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

Wenn eine Beschleunigungsfunktion auf eine From/To/By-Animation angewendet wird, ändert sich die Charakteristik der Funktions-über-Zeit, wie der Wert zwischen den From und To-Werten über die Dauer der Animation interpoliert wird. Ohne eine Easing-Funktion wäre dies eine lineare Interpolation.

Animationen für diskrete Objektwerte

Eine Art von Animation verdient besondere Erwähnung, da sie die einzige Möglichkeit ist, einen animierten Wert auf Eigenschaften anzuwenden, die nicht vom Typ "Double", "Point" oder "Color" sind. Dies ist die Keyframe-Animation ObjectAnimationUsingKeyFrames. Das Animieren von Objektwerten unterscheidet sich, da es keine Möglichkeit gibt, die Werte zwischen den Frames zu interpolieren. Wenn die KeyTime des Frames erreicht ist, wird der animierte Wert sofort auf den Wert festgelegt, der im Wert des Keyframes angegeben ist. Da keine Interpolation vorhanden ist, gibt es nur einen Keyframe, den Sie in der Keyframesammlung ObjectAnimationUsingKeyFrames verwenden: DiscreteObjectKeyFrame.

Der Wert eines DiscreteObjectKeyFrame wird häufig mithilfe der Eigenschaftselementsyntax festgelegt, da der objektwert, den Sie festlegen möchten, häufig nicht als Zeichenfolge zum Ausfüllen von Value in Attributsyntax ausgedrückt werden kann. Sie können die Attributsyntax weiterhin verwenden, wenn Sie einen Verweis wie StaticResource verwenden.

Eine Stelle, an der ein ObjectAnimationUsingKeyFrames in den Standardvorlagen verwendet wird, ist, wenn eine Vorlageneigenschaft auf eine Brush-Ressource verweist. Diese Ressourcen sind SolidColorBrush-Objekte, nicht nur ein Farbwert, und sie verwenden Ressourcen, die als Systemthemen (ThemeDictionaries) definiert sind. Sie können direkt einem Pinseltypwert wie "TextBlock.Foreground" zugewiesen werden und müssen keine indirekte Zielbestimmung verwenden. Da ein SolidColorBrush jedoch nicht Double, Point oder Color ist, müssen Sie eine ObjectAnimationUsingKeyFrames verwenden, um die Ressource zu verwenden.

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <TextBlock x:Name="Text"
                        Text="{TemplateBinding Content}"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
...
                       </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Sie können auch ObjectAnimationUsingKeyFrames verwenden, um Eigenschaften zu animieren, die einen Enumerationswert verwenden. Hier sehen Sie ein weiteres Beispiel aus einem benannten Stil, der aus den Standardvorlagen für Windows Runtime stammt. Beachten Sie, wie die Visibility-Eigenschaft festgelegt wird, die eine Visibility-Enumerationskonstante verwendet. In diesem Fall können Sie den Wert mithilfe der Attributsyntax festlegen. Sie benötigen nur den nicht qualifizierten Konstantennamen aus einer Aufzählung, um eine Eigenschaft mit einem Enumerationswert festzulegen, z. B. "Collapsed".

<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Sie können mehr als ein DiscreteObjectKeyFrame für einen ObjectAnimationUsingKeyFrames-Framesatz verwenden. Dies kann eine interessante Möglichkeit sein, eine "Bildschirmpräsentationsanimation" zu erstellen, indem Sie den Wert von Image.Source animieren, als Beispielszenario, in dem mehrere Objektwerte nützlich sein können.

  • Last updated on