Keyframeanimationen und Animationen für Beschleunigungsfunktionen

Keyframeanimationen und Animationen für Beschleunigungsfunktionen (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Lineare Keyframeanimationen, Keyframeanimationen mit einem KeySpline-Wert oder Beschleunigungsfunktionen sind drei verschiedene Techniken für ungefähr das gleiche Szenario: Erstellen einer komplexeren Storyboardanimation, die ein nichtlineares Animationsverhalten ab einem bestimmten Startzustand bis zu einem Endzustand verwendet.

Voraussetzungen

Lesen Sie vorher unbedingt das Thema Storyboardanimationen. Dieses Thema basiert auf den Animationskonzepten, die in Storyboardanimationen erläutert wurden, und behandelt diese nicht erneut. In Storyboardanimationen wird beispielsweise das Anwenden von Animationen auf Ziele, das Verwenden von Storyboards als Ressourcen, die Timeline-Eigenschaftswerte wie z. B. Duration, FillBehavior usw. erläutert.

Animieren mit Keyframeanimationen

Keyframeanimationen lassen mehr als einen Zielwert zu, der an einem gewissen Punkt auf der Animationszeitachse erreicht wird. Anders ausgedrückt kann jeder Keyframe einen anderen Zwischenwert angeben, und der letzte erreichte Keyframe ist der endgültige Animationswert. Durch Angabe mehrerer Animationswerte können Sie komplexere Animationen erstellen. Keyframeanimationen ermöglichen auch verschiedene Interpolationslogiken, die pro Animationstyp als unterschiedliche KeyFrame-Unterklassen implementiert werden. Insbesondere hat jeder Keyframe-Animationstyp eine Discrete-, Linear-, Spline- und Easing-Variation seiner KeyFrame-Klasse für die Angabe der Keyframes. Zum Festlegen einer Animation mit Keyframes für einen Double können Sie z. B. Keyframes mit DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame und EasingDoubleKeyFrame deklarieren. Sie können all diese Typen beliebig in einer einzelnen KeyFrames-Sammlung verwenden, um die Interpolation bei jedem Erreichen eines neuen Keyframes zu ändern.

Für das Interpolationsverhalten steuert jeder Keyframe die Interpolation, bis die KeyTime-Zeit erreicht ist. Die Value wird zum selben Zeitpunkt erreicht. Folgen weitere Keyframes, wird der Wert anschließend zum Startwert für den nächsten Keyframe in einer Sequenz.

Wenn beim Start der Animation kein Keyframe mit der KeyTime"0:0:0" vorhanden ist, ist der nicht animierte Wert der Eigenschaft der Startwert. Dies ist mit dem Verhalten einer From/To/By-Animation vergleichbar, wenn kein From vorhanden ist.

Die Dauer einer Keyframeanimation entspricht implizit der Dauer des höchsten KeyTime-Werts, der in einem ihrer Keyframes festgelegt ist. Sie können eine explizite Duration festlegen. Achten Sie dabei jedoch darauf, dass sie nicht kürzer als eine KeyTime in ihren eigenen Keyframes ist, andernfalls wird ein Teil der Animation abgeschnitten.

Neben der Duration können Sie alle Timeline-basierten Eigenschaften in einer Keyframeanimation festlegen (genau wie bei einer From/To/By-Animation) da die Keyframe-Animationsklassen ebenfalls von der Timeline-Klasse. Dies sind:

  • AutoReverse: Sobald der letzte Keyframe erreicht ist, werden die Frames vom anderen Ende ausgehend in umgekehrter Reihenfolge wiederholt. So wird die scheinbare Dauer der Animation verdoppelt.
  • BeginTime: verzögert den Start der Animation. Die Zeitachse für die KeyTime-Werte in den Frames beginnt erst nach Erreichen der BeginTime mit der Zählung, damit kein Risiko besteht, dass Frames abgeschnitten werden.
  • FillBehavior: steuert, was nach Erreichen des letzten Keyframes geschieht. FillBehavior hat keine Auswirkungen auf Zwischenkeyframes.
  • RepeatBehavior:
    • Bei Festlegung auf Forever werden die Keyframes und die dazugehörige Zeitachse unendlich wiederholt.
    • Bei Festlegung auf eine bestimmte Iterationsanzahl wird die Zeitachse entsprechend oft wiederholt.
    • Bei Festlegung auf eine Duration wird die Zeitachse bis zum Erreichen dieser Zeit wiederholt. Dadurch wird die Animation u. U. mitten in der Keyframesequenz abgeschnitten, wenn sie keinen ganzzahligen Teiler der impliziten Dauer der Zeitachse darstellt.
  • SpeedRatio (selten verwendet)

Lineare Keyframes

Lineare Keyframes führen zu einer einfachen linearen Interpolation des Werts, bis die KeyTime des Frames erreicht ist. Dieses Interpolationsverhalten gleicht am ehesten den einfacheren From/To/By-Animationen, die im Thema Storyboardanimationen beschrieben werden.

Im Folgenden erfahren Sie, wie die Renderhöhe eines Rechtecks mithilfe von linearen Keyframes skaliert wird. In diesem Beispiel wird eine Animation ausgeführt, bei der die Höhe des Rechtecks in den ersten vier Sekunden leicht und linear ansteigt und in der letzten Sekunde schnell skaliert wird, bis das Rechteck im Vergleich zum Start die doppelte Höhe erreicht hat.


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

Diskrete Keyframes verwenden überhaupt keine Interpolation. Beim Erreichen einer KeyTime wird einfach der neue Value angewendet. Je nach der animierten UI-Eigenschaft führt dies häufig dazu, dass die Animation zu "springen" scheint. Stellen Sie sicher, dass dieses ästhetische Verhalten gewünscht ist. Sie können die scheinbaren Sprünge reduzieren, indem Sie die Anzahl der deklarierten Keyframes erhöhen. Möchten Sie jedoch eine flüssige Animation erzielen, sollten Sie stattdessen lineare Keyframes oder Spline-Keyframes verwenden.

Hinweis  Diskrete Keyframes stellen die einzige Möglichkeit dar, einen Wert mit einer DiscreteObjectKeyFrame zu animieren, der nicht vom Typ Double, Point, oder Color ist. Dies wird später in diesem Thema ausführlich erläutert.
 

Spline-Keyframes

Ein Spline-Keyframe erstellt einen nicht linearen Übergang zwischen Werten entsprechend dem Wert für die KeySpline-Eigenschaft. Diese Eigenschaft gibt den ersten und zweiten Kontrollpunkt einer Bézierkurve an, mit der die Beschleunigung einer Animation beschrieben wird. Grundsätzlich definiert eine KeySpline eine Beziehung der Funktion zur Zeit, wobei der Funktion-Zeit-Graph die Form dieser Bézierkurve hat. In der Regel geben Sie einen KeySpline-Wert in einer XAML-Kompaktattribut-Zeichenfolge an, der vier durch Leerzeichen oder Kommata getrennte Double-Werte umfasst. Diese Werte sind "X,Y"-Paare für zwei Kontrollpunkte der Bézierkurve. "X" ist die Zeit, und "Y" ist der Funktionsmodifizierer für den Wert. Jeder Wert sollte sich immer zwischen 0 und einschließlich 1 bewegen. Ohne Kontrollpunktänderung an einer KeySpline stellt die gerade Linie von 0,0 bis 1,1 eine Funktion der Zeit für eine lineare Interpolation dar. Ihre Kontrollpunkte ändern die Form der Kurve und somit das Verhalten der Funktion der Zeit für die Spline-Animation. Dies wird am besten visuell als Graph dargestellt. Sie können das Beispiel für die Silverlight Keyspline-Schnellansicht in einem Browser ausführen, um zu sehen, wie die Kontrollpunkte die Kurve ändern, und wie eine Beispielanimation ausgeführt wird, wenn sie als KeySpline-Wert verwendet wird.

Im nächsten Beispiel wird die Anwendung von drei verschiedenen Keyframes auf eine Animation gezeigt, wobei der letzte eine Keyspline-Animation für einen Double-Wert (SplineDoubleKeyFrame) ist. Beachten Sie die Anwendung der Zeichenfolge "0.6,0.0 0.9,0.00" als KeySpline. Dadurch entsteht eine Kurve, bei der die Animation zuerst scheinbar langsam ausgeführt wird, dann jedoch schnell den Wert erreicht, bevor die KeyTime erreicht ist.


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


Beschleunigungskeyframes

Ein Beschleunigungskeyframe ist ein Keyframe, bei dem Interpolation angewendet wird und die Funktion der Zeit der Interpolation von mehreren vordefinierten mathematischen Formeln gesteuert wird. Mit einem Splinekeyframe können Sie nahezu dasselbe Ergebnis erzielen, wie mit einigen der Beschleunigungsfunktionstypen. Einige Beschleunigungsfunktionen wie z. B. BackEase können jedoch nicht mit einem Spline reproduziert werden.

Um eine Beschleunigungsfunktion auf einen Beschleunigungskeyframe anzuwenden, legen Sie die EasingFunction-Eigenschaft als Eigenschaftselement in XAML für diesen Keyframe fest. Geben Sie als Wert ein Objektelement für einen der Beschleunigungsfunktionstypen an.

In diesem Beispiel werden eine CubicEase und dann eine BounceEase als aufeinander folgende Keyframes auf eine DoubleAnimation angewendet, um einen Sprungeffekt zu erzielen.


        <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 jedoch nur ein Beispiel für Beschleunigungsfunktionen. Weitere Beispiele werden im nächsten Abschnitt behandelt.

Beschleunigungsfunktionen

Mithilfe von Beschleunigungsfunktionen können Sie benutzerdefinierte mathematische Formeln auf Animationen anwenden. Mathematische Vorgänge eignen sich oft zum Erstellen von Animationen, die ein reales physikalisches Modell in einem 2 D-Koordinatensystem simulieren. Beispielsweise soll ein Objekt mit einer natürlich wirkenden Bewegung springen oder federn. Diese Effekte können Sie näherungsweise mit Keyframes oder sogarFrom/To/By-Animationen erzielen, aber dieses Verfahren ist sehr aufwendig, und die Animationen sind dann trotzdem weniger präzise als bei Verwendung einer mathematischen Formel.

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

Nachfolgend finden Sie eine Liste der Beschleunigungsfunktionen:

  • BackEase: Zieht die Bewegung einer Animation vor ihrer Ausführung in dem angegebenen Pfad etwas zurück.
  • BounceEase: Erstellt einen Sprungeffekt.
  • CircleEase: Erstellt eine Animation, die anhand einer Winkelfunktion beschleunigt oder verzögert wird.
  • CubicEase: Erstellt eine Animation, die anhand der Formel f(t) = t3 beschleunigt oder verzögert wird.
  • ElasticEase: Erstellt eine Animation ähnlich einer Sprungfeder, die auf und ab federt und schließlich zur Ruhe kommt.
  • ExponentialEase: Erstellt eine Animation, die anhand einer Exponentialfunktion beschleunigt oder verzögert wird.
  • PowerEase: Erstellt eine Animation, die anhand der Formel f(t) = tp beschleunigt oder verzögert wird, wobei p der Power-Eigenschaft entspricht.
  • QuadraticEase: Erstellt eine Animation, die anhand der Formel f(t) = t2 beschleunigt oder verzögert wird.
  • QuarticEase: Erstellt eine Animation, die anhand der Formel f(t) = t4 beschleunigt oder verzögert wird.
  • QuinticEase: Erstellt eine Animation, die anhand der Formel f(t) = t5 beschleunigt oder verzögert wird.
  • SineEase: Erstellt eine Animation, die anhand einer Sinusfunktion beschleunigt oder verzögert wird.

Einige der Beschleunigungsfunktionen verfügen über eigene Eigenschaften. Beispielsweise verfügt BounceEase über die beiden Eigenschaften Bounces und Bounciness, die das Funktion-über-Zeit-Verhalten dieser bestimmten BounceEase ändern. Andere Beschleunigungsfunktionen wie z. B. CubicEase haben keine weiteren Eigenschaften außer der EasingMode-Eigenschaft, die von allen Beschleunigungsfunktionen gemeinsam verwendet wird, und erzeugen immer dasselbe Funktion-über-Zeit-Verhalten.

Einige dieser Beschleunigungsfunktionen überschneiden sich geringfügig, je nach Einstellung der Einstellung der Eigenschaften für die Beschleunigungsfunktionen, die über Eigenschaften verfügen. QuadraticEase ist z. B. identisch mit einer PowerEase, wobei Power 2 entspricht. Und CircleEase ist im Grunde eine ExponentialEase mit Standardwert.

Die Beschleunigungsfunktion BackEase ist einzigartig, da sie den Wert außerhalb des normalen Bereichs ändern kann, der durch From/To oder durch Keyframewerte festgelegt wurde. Die Animation wird gestartet, indem der Wert in der umgekehrten Richtung geändert wird, als von einem normalen From/To-Verhalten erwartet wird. Anschließend beginnt die Funktion wieder From oder dem Startwert, und führt die Animation normal aus.

In einem Silverlight-Beispiel können Sie mit verschiedenen Beschleunigungsfunktionen experimentieren.

Das Deklarieren einer Beschleunigungsfunktion für eine Keyframeanimation wurde in einem vorhergehenden Beispiel gezeigt. Im nächsten Beispiel wird eine Beschleunigungsfunktion 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, ändern sie die Funktion-über-Zeit-Merkmale der Interpolation des Werts zwischen den From- und To-Werten im Lauf der Duration-Animation. Ohne Beschleunigungsfunktion läge eine lineare Interpolation vor.

Animationen mit diskreten Objektwerten

Ein Animationstyp sollte besonders hervorgehoben werden, da er die einzige Methode darstellt, einen animierten Wert auf Eigenschaften von einem anderen Typ als Double, Point, oder Color anzuwenden. Hierbei handelt es sich um die Keyframeanimation ObjectAnimationUsingKeyFrames. Es besteht ein Unterschied zum Animieren mithilfe von Object-Werten, da es keine Möglichkeit zur Interpolation der Werte zwischen den Frames gibt. Beim Erreichen der KeyTime des Frames wird der animierte Wert sofort auf den Wert festgelegt, der im Value des Keyframes angegeben ist. Da keine Interpolation vorhanden ist, wird nur ein Keyframe in der ObjectAnimationUsingKeyFrames-Keyframesammlung verwendet: DiscreteObjectKeyFrame.

Die Value einer DiscreteObjectKeyFrame wird oft mithilfe der Eigenschaftselementsyntax festgelegt, da der festzulegende Objektwert häufig nicht als Zeichenfolge zum Ausfüllen der Value in einer Attributsyntax ausgedrückt werden kann. Wenn Sie einen Verweis wie z. B. StaticResource verwenden, können Sie die Attributsyntax dennoch verwenden.

Die Verwendung einer ObjectAnimationUsingKeyFrames in den Standardvorlagen erfolgt bei einem Verweis auf eine Brush-Ressource durch eine Vorlageneigenschaft. Bei diesen Ressourcen handelt es sich um SolidColorBrush-Objekte, nicht nur um einen Color-Wert. Außerdem werden Ressourcen verwendet, die als Systemthemen (ThemeDictionaries) definiert sind. Sie können direkt einem Wert vom Brush-Typ, wie z. B. TextBlock.Foreground, zugeordnet werden; eine indirekte Zielauswahl ist nicht erforderlich. Da eine SolidColorBrush jedoch nicht Double, Point, oder Color ist, müssen die eine ObjectAnimationUsingKeyFrames verwenden, um die Ressource zu nutzen.


    <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 haben auch die Möglichkeit, ObjectAnimationUsingKeyFrames zu verwenden, um Eigenschaften mit einem Enumerationswert zu animieren. Im Folgenden finden Sie ein weiteres Beispiel einer benannten Formatvorlage, die aus den Standardvorlagen der Windows-Runtime stammt. Beachten Sie die Festlegung der Visibility-Eigenschaft, die eine Visibility-Enumerationskonstante akzeptiert. In diesem Fall können Sie den Wert mithilfe der Attributsyntax festlegen. Sie benötigen lediglich den nicht qualifizierten Konstantennamen aus einer Enumeration zum Festlegen einer Eigenschaft mit einem Enumerationswert, 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 mehrere DiscreteObjectKeyFrame für einen ObjectAnimationUsingKeyFrames-Framesatz verwenden. Dies ist eine interessante Methode zum Erstellen einer "Slideshow"-Animation durch Animieren des Werts von Image.Source als Beispielszenario, indem u. U. mehrere Objektwerte hilfreich sind.

Verwandte Themen

Roadmap für das Erstellen von Apps mit C#, C++ oder VB
Property-path-Syntax
Übersicht über Abhängigkeitseigenschaften
Storyboard
Storyboard.TargetProperty

 

 

Anzeigen:
© 2017 Microsoft