Zeitbasierte Animationen

Wenn sich eine Komponente in oder eine gesamte Benutzeroberfläche ändert, bemerken Endbenutzer diese häufig auf zwei Arten: im Laufe der Zeit oder sofort. Auf der Windows-Plattform wird Ersteres dem Letzteren vorgezogen - Benutzererfahrungen, die sich sofort ändern, verwirren und überraschen Endbenutzer oft, weil sie nicht nachvollziehen können, was passiert ist. Der Endbenutzer empfindet das Erlebnis dann als unangenehm und unnatürlich.

Stattdessen können Sie Ihre Benutzeroberfläche im Laufe der Zeit ändern, um den Endbenutzer zu führen oder ihn über Änderungen zu informieren. Auf der Windows-Plattform erfolgt dies mithilfe zeitbasierter Animationen, auch als KeyFrameAnimations bezeichnet. Mit KeyFrameAnimations können Sie eine Benutzeroberfläche im Laufe der Zeit verändern und jeden Aspekt der Animation steuern, einschließlich wie und wann sie beginnt und wie sie ihren Endzustand erreicht. Zum Beispiel ist es angenehmer, ein Objekt über 300 Millisekunden zu einer neuen Position zu animieren, als es sofort dorthin zu „teleportieren“. Wenn Sie Animationen anstelle von sofortigen Änderungen verwenden, ist das Endergebnis eine angenehmere und ansprechendere Erfahrung.

Arten von zeitbasierten Animationen

Es gibt zwei Kategorien von zeitbasierten Animationen, mit denen Sie ansprechende Benutzeroberflächen unter Windows erstellen können:

Explizite Animationen – wie der Name schon sagt, starten Sie die Animation explizit, um Aktualisierungen vorzunehmen. Implizite Animationen – diese Animationen werden vom System in Ihrem Auftrag gestartet, wenn eine Bedingung erfüllt ist.

In diesem Artikel wird erläutert, wie explizite zeitbasierte Animationen mit KeyFrameAnimations erstellt und verwendet werden.

Für explizite und implizite zeitbasierte Animationen gibt es unterschiedliche Typen, die den verschiedenen Arten von Eigenschaften von CompositionObjects entsprechen, die Sie animieren können.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Erstellen zeitbasierter Animationen mit KeyFrameAnimations

Bevor wir beschreiben, wie explizite zeitbasierte Animationen mit KeyFrameAnimations erstellt werden, befassen wir uns mit einigen Begriffen.

• Keyframes – Dies sind die einzelnen „Momentaufnahmen“, durch die eine Animation animiert wird.
  • Definiert als Schlüssel-Wert-Paare. Der Schlüssel stellt den Fortschritt zwischen 0 und 1 dar, der in der Animations-Lebensdauer dieser „Momentaufnahme“ stattfindet. Der andere Parameter stellt den Eigenschaftswert zu diesem Zeitpunkt dar.
• KeyFrameAnimation-Eigenschaften – Anpassungs-Optionen, die Sie anwenden können, um die Anforderungen der Benutzeroberfläche zu erfüllen.
  • DelayTime – Zeit, bevor eine Animation gestartet wird, nachdem StartAnimation aufgerufen wurde.
  • Duration – Dauer der Animation.
  • IterationBehavior – Anzahl oder unendliches Wiederholungsverhalten für eine Animation.
  • IterationCount – Anzahl der endlichen Male, die eine KeyFrame Animation wiederholt.
  • KeyFrame Count – Lesen der Anzahl der KeyFrames in einer bestimmten KeyFrame Animation.
  • StopBehavior – Gibt das Verhalten eines Animations-Eigenschaftswerts an, wenn StopAnimation aufgerufen wird.
  • Direction – gibt die Richtung der Animation für die Wiedergabe an.
• Animation Group – Gleichzeitiges Starten mehrerer Animationen.
  • Wird häufig verwendet, wenn mehrere Eigenschaften gleichzeitig animiert werden sollen.

Weitere Informationen finden Sie unter CompositionAnimationGroup.

Mit diesen Konzepten im Hinterkopf, lassen Sie uns die allgemeine Formel für die Konstruktion einer KeyFrameAnimation durchgehen:

1. Identifizieren Sie das CompositionObject und die entsprechende Eigenschaft, die Sie animieren müssen.
2. Erstellen Sie eine KeyFrameAnimation Typ-Vorlage des Kompositors, die dem Typ der Eigenschaft entspricht, die Sie animieren möchten.
3. Beginnen Sie mithilfe der Animations-Vorlage mit dem Hinzufügen von Keyframes und dem Definieren von Eigenschaften der Animation.
   • Mindestens ein Keyframe ist erforderlich (der Keyframe 100% oder 1f).
   • Es wird empfohlen, auch eine Dauer zu definieren.
4. Wenn Sie bereit sind, diese Animation auszuführen, rufen Sie StartAnimation(...) auf dem CompositionObject auf und wählen die zu animierende Eigenschaft aus. Insbesondere:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Wenn Sie über eine laufende Animation verfügen und die Animation oder die Animationsgruppe beenden möchten, können Sie diese APIs verwenden:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Sehen wir uns ein Beispiel an, um diese Formel in Aktion zu sehen.

Beispiel

In diesem Beispiel möchten Sie den Offset eines visuellen Elements von <0,0,0> bis <200,0,0> über 1 Sekunde animieren. Darüber hinaus möchten Sie die visuelle Animation zwischen diesen Positionen 10 Mal anzeigen.

Zunächst identifizieren Sie das CompositionObject und die Eigenschaft, die Sie animieren möchten. In diesem Fall wird das rote Quadrat durch ein Visuelles Kompositions-Objekt mit der Bezeichnung redVisual dargestellt. Sie starten ihre Animation aus diesem Objekt.

Da Sie als Nächstes die Offset-Eigenschaft animieren möchten, müssen Sie eine Vector3KeyFrameAnimation erstellen (Offset ist vom Typ Vector3). Außerdem definieren Sie die entsprechenden Keyframes für die KeyframeAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Dann definieren Sie die Eigenschaften der KeyFrameAnimation, um die Dauer zusammen mit dem Verhalten zu beschreiben, das zwischen den beiden Positionen (aktuell und <200,0,0>) 10 Mal animiert werden soll.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Um schließlich eine Animation auszuführen, müssen Sie sie auf einer Eigenschaft eines CompositionObjects starten.

redVisual.StartAnimation("Offset", animation);

Im Folgenden finden Sie den vollständigen Code:

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}