Zeitbasierte Animationen für

Wenn sich eine Komponente in oder eine gesamte Benutzeroberfläche ändert, beobachten Endbenutzer diese häufig auf zwei Arten: im Laufe der Zeit oder sofort. Auf der Windows-Plattform wird der erste Vorzug gegenüber letzterem bevorzugt – Benutzeroberflächen, die sich sofort ändern, verwechseln und überraschen Endbenutzer, weil sie nicht in der Lage sind, zu folgen, was passiert ist. Der Endbenutzer nimmt dann die Erfahrung als jarringend und unnatürlich wahr.

Stattdessen können Sie Ihre Benutzeroberfläche im Laufe der Zeit ändern, um den Endbenutzer durchzuleiten, oder sie über Änderungen an der Benutzeroberfläche 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 ändern und jeden Aspekt der Animation steuern, einschließlich wie und wann sie startet und ihren Endzustand erreicht. Beispielsweise ist das Animieren eines Objekts an einer neuen Position über 300 Millisekunden angenehmer als das sofortige "Teleportieren" dort. Wenn Animationen anstelle von sofortigen Änderungen verwendet werden, ist das Nettoergebnis ein angenehmeres und ansprechendes Erlebnis.

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 bedeutet, 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 Sie beschreiben, wie explizite zeitbasierte Animationen mit KeyFrameAnimations erstellt werden, befassen wir uns mit einigen Konzepten.

• Keyframes – Dies sind die einzelnen "Momentaufnahmen", durch die eine Animation animiert wird.
  • Definiert als Schlüssel- und Wertpaare. Der Schlüssel stellt den Fortschritt zwischen 0 und 1 dar, also den Zeitpunkt innerhalb der Animationslebensdauer, zu dem diese "Momentaufnahme" erfolgt. Der andere Parameter stellt den Eigenschaftswert zu diesem Zeitpunkt dar.
• KeyFrameAnimation-Eigenschaften – Anpassungsoptionen, die Sie auf die Anforderungen der Benutzeroberfläche anwenden können.
  • DelayTime – Zeit, bevor eine Animation gestartet wird, nachdem StartAnimation aufgerufen wurde.
  • Dauer – Dauer der Animation.
  • IterationBehavior – Anzahl oder unendliches Wiederholungsverhalten für eine Animation.
  • IterationCount – Anzahl der endlichen Male, die eine Keyframeanimation wiederholt.
  • Keyframeanzahl – Lesen der Anzahl der Keyframes in einer bestimmten Keyframeanimation.
  • StopBehavior – Gibt das Verhalten eines Animationseigenschaftswerts an, wenn StopAnimation aufgerufen wird.
  • Richtung – gibt die Richtung der Animation für die Wiedergabe an.
• Animationsgruppe – Gleichzeitiges Starten mehrerer Animationen.
  • Wird häufig verwendet, wenn mehrere Eigenschaften gleichzeitig animiert werden sollen.

Weitere Informationen finden Sie unter CompositionAnimationGroup.

Lassen Sie uns mit diesen Konzepten die allgemeine Formel zum Erstellen einer KeyFrameAnimation durcharbeiten:

1. Identifizieren Sie das CompositionObject und die entsprechende Eigenschaft, die Sie animieren müssen.
2. Erstellen Sie eine KeyFrameAnimation Type-Vorlage des Kompositors, die dem Typ der Eigenschaft entspricht, die Sie animieren möchten.
3. Beginnen Sie mithilfe der Animationsvorlage mit dem Hinzufügen von Keyframes und dem Definieren von Eigenschaften der Animation.
   • Mindestens ein Keyframe ist erforderlich (100%-Keyframe oder 1f-Keyframe).
   • Es wird empfohlen, auch eine Dauer zu definieren.
4. Sobald Sie bereit sind, diese Animation auszuführen, rufen Sie StartAnimation(...) für das CompositionObject auf, und richten Sie sich an die Eigenschaft, die Sie animieren möchten. Konkret:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Wenn Sie über eine ausgeführte 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 sehen.

Zunächst identifizieren Sie das CompositionObject und die Eigenschaft, die Sie animieren möchten. In diesem Fall wird das rote Quadrat durch ein Composition-Visual dargestellt redVisual. 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));

Anschließend 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 = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

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

redVisual.StartAnimation("Offset", animation);

Hier sehen 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 = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}