Freigeben über

Kompositionsanimationen

  • Artikel

Mit den Windows.UI.Composition-APIs können Sie kompositorobjekte in einer einheitlichen API-Ebene erstellen, animieren, transformieren und bearbeiten. Kompositionsanimationen bieten eine leistungsstarke und effiziente Möglichkeit zum Ausführen von Animationen in der Benutzeroberfläche Ihrer Anwendung. Sie wurden von Grund auf entworfen, um sicherzustellen, dass Ihre Animationen unabhängig vom UI-Thread mit 60 FPS ausgeführt werden und Ihnen die Flexibilität bieten, erstaunliche Erfahrungen zu erstellen, die nicht nur Zeit, sondern auch Eingaben und andere Eigenschaften verwenden, um Animationen zu fördern.

Bewegung in Windows

Stellen Sie sich Motion-Design wie einen Film vor. Nahtlose Übergänge halten Sie auf die Geschichte konzentriert und erwecken Erlebnisse zum Leben. Wir können dieses Gefühl in unsere Designs einladen, die Menschen von einer Aufgabe zur nächsten mit kinotischer Leichtigkeit führen. Bewegung ist häufig der Unterscheidungsfaktor zwischen einer Benutzeroberfläche und einer Benutzeroberfläche.

Als grundlegender Baustein der Windows-UI-Plattform bieten CompositionAnimations eine leistungsstarke und effiziente Möglichkeit zum Erstellen von Bewegungserlebnissen in der Benutzeroberfläche Ihrer Anwendung. Das Animationsmodul wurde von Grund auf entworfen, um sicherzustellen, dass Ihre Bewegung mit 60 FPS ausgeführt wird, unabhängig vom UI-Thread. Diese Animationen sind so konzipiert, dass sie die Flexibilität bieten, innovative Bewegungserlebnisse basierend auf Zeit, Eingabe und anderen Eigenschaften zu erstellen.

Beispiele für Bewegung

Hier sind einige Beispiele für Bewegung in einer App.

Hier verwendet eine App eine verbundene Animation, um ein Elementbild zu animieren, während es "weiterhin" Teil der Kopfzeile der nächsten Seite wird. Der Effekt trägt dazu bei, den Benutzerkontext über den Übergang hinweg aufrechtzuerhalten.

Beispiel für verbundene Animation

Hier verschiebt ein visueller Parallaxeffekt unterschiedliche Objekte mit unterschiedlichen Geschwindigkeiten, wenn die Benutzeroberfläche scrollt oder verschiebt, um ein Gefühl von Tiefe, Perspektive und Bewegung zu erzeugen.

Beispiel für Parallaxe mit einer Liste und einem Hintergrundbild

Verwenden von CompositionAnimations zum Erstellen von Bewegung

Um Bewegung in der Benutzeroberfläche zu generieren, können Entwickler auf Animationen in XAML oder der visuellen Ebene zugreifen. Animationen auf der visuellen Ebene bieten Entwicklern eine Reihe von Vorteilen:

  • Leistung – anstelle der herkömmlichen threadgebundenen UI-Animationen arbeiten Animationen auf der Windows-UI-Plattform auf einem unabhängigen Thread mit 60 FPS und ermöglichen reibungslose Bewegungserlebnisse.
  • Vorlagenmodell – Animationen auf der Windows-UI-Ebene sind Vorlagen, was bedeutet, dass eine einzelne Animation für mehrere Objekte verwendet und Eigenschaften oder Parameter optimiert werden kann, ohne dass vorherige Verwendungen blockiert werden müssen.
  • Anpassung – Die Windows-UI-Ebene erleichtert nicht nur das Erstellen einer ansprechenden Benutzeroberfläche, sondern mit einer vielzahl von Animationstypen, die zum Erstellen neuer und erstaunlicher Oberflächen mit einem Farbverlauf von Anpassungen möglich sind.

Als Entwickler, der Erfahrungen auf der Windows-UI-Ebene erstellt, haben Sie Zugriff auf eine Vielzahl von Animationskonzepten, um Ihre Designs zum Leben zu erwecken. Sie können eines dieser Konzepte verwenden, um eine Eigenschaft oder subchannel-Komponente (falls zutreffend) eines beliebigen CompositionObjects zu animieren.

Hinweis

Nicht alle Eigenschaften eines CompositionObjects sind animierbar. In der Dokumentation des einzelnen CompositionObjects können Sie ermitteln, ob eine Eigenschaft animierbar ist.

Hinweis

Der Begriff "Subchannel " bezieht sich auf eine Komponentenform einer Eigenschaft. Beispielsweise der X- oder XY-Unterkanal einer Vector3 Offset-Eigenschaft.

Animationskonzept Beschreibung
Zeitbasierte Bewegung mit KeyFrameAnimations KeyFrameAnimations werden verwendet, um die gesamte Bewegungserfahrung über einen bestimmten Zeitraum direkt zu steuern. Entwickler, die den Anfang, das Ende, die Interpolation zwischen und die Dauer einer Bewegung in einer herkömmlichen Keyframed-Weise beschreiben.
Relative Bewegung mit ExpressionAnimations ExpressionAnimations werden verwendet, um zu beschreiben, wie eine Bewegung der Eigenschaft eines Objekts relativ zur Eigenschaft eines anderen Objekts gesteuert werden soll. Entwickler definieren eine mathematische Formel, die die referenzbasierte Beziehung definiert.
ImplicitAnimations Diese Animationen sind triggerbasiert und werden getrennt von der Kern-App-Logik definiert. Implizite Animationen werden verwendet, um zu beschreiben, wie und wann Animationen als Reaktion auf direkte Eigenschaftsänderungen auftreten.
Eingabegesteuerte Bewegung mit Eingabeanimationen Eingabeanimationen umfassen eine Reihe von Szenarien, in denen Entwickler manipulationsbasierte Bewegung per Toucheingabe oder anderen Eingabemodalitäten beschreiben können. Diese Animationen werden basierend auf aktiven Benutzereingaben oder -gesten gesteuert.
Physikalische Bewegung mit NaturalMotionAnimations NaturalMotionAnimations werden verwendet, um natürliche und vertraute Bewegungserfahrungen basierend auf realen kraftgesteuerten Bewegungen zu beschreiben. Anstatt Zeit zu definieren, definieren Entwickler Eigenschaften der Bewegung (z. B. Dämpfungsverhältnis für Federn)