Kompositionsanimationen

Mit den Windows.UI.Composition-APIs können Sie Compositorobjekte in einer einheitlichen API-Ebene erstellen, animieren, transformieren und bearbeiten. Kompositionsanimationen bieten eine leistungsstarke und effiziente Möglichkeit, Animationen auf der Benutzeroberfläche Ihrer Anwendung auszuführen. Sie wurden von Grund auf neu entwickelt, um sicherzustellen, dass Ihre Animationen mit 60 F/s unabhängig vom UI-Thread ausgeführt werden, und um Ihnen die Flexibilität zu bieten, tolle Funktionen zu erstellen, die zur Steuerung von Animationen nicht nur Zeit, sondern auch Eingaben und andere Eigenschaften verwenden.

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 Entwürfe einladen und die Menschen mit filmischer Leichtigkeit von einer Aufgabe zur nächsten führen. Bewegung ist häufig der Unterscheidungsfaktor zwischen einer Benutzeroberfläche und einer Benutzeroberfläche.

Als grundlegender Baustein der Windows-UI-Plattform bietet CompositionAnimations eine leistungsstarke und effiziente Möglichkeit zum Erstellen von Bewegungserfahrungen auf der Benutzeroberfläche Ihrer Anwendung. Die Animations-Engine wurde von Grund auf entwickelt, um sicherzustellen, dass Ihre Bewegung unabhängig vom UI-Thread mit 60 FPS ausgeführt wird. Diese Animationen sind so konzipiert, dass sie flexibel sind, um 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 hilft dabei, den Benutzerkontext über den gesamten Übergang hinweg beizubehalten.

Ein Beispiel für verbundene Animation

Hier verschiebt ein visueller Parallaxeneffekt verschiedene Objekte mit unterschiedlichen Geschwindigkeiten, wenn die Benutzeroberfläche scrollt oder schwenkt, 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 auf der visuellen Ebene zugreifen. Animationen auf der visuellen Ebene bieten Entwicklern eine Reihe von Vorteilen:

  • Leistung– Anstelle der herkömmlichen Thread-gebundenen Animationen der Benutzeroberfläche werden Animationen auf der Windows-UI-Plattform auf einem unabhängigen Thread mit 60 FPS ausgeführt, was eine reibungslose Bewegungserfahrung ermöglicht.
  • Vorlagenmodell: Animationen auf der Windows-UI-Ebene sind Vorlagen, d. h. sie können eine einzelne Animation für mehrere Objekte verwenden und Eigenschaften oder Parameter optimieren, ohne sich Sorgen machen zu müssen, dass vorherige Verwendungen behindert werden.
  • Anpassung : Die Windows-UI-Ebene erleichtert nicht nur die Erstellung einer schönen Benutzeroberfläche, sondern mit einer umfassenden Palette von Animationstypen, die es ermöglichen, neue und erstaunliche Erfahrungen mit einem Farbverlauf von Anpassungen zu erstellen.

Als Entwickler, der Erfahrungen auf windows-UI-Ebene erstellt, haben Sie Zugriff auf eine Vielzahl von Animationskonzepten, um Ihre Designs zum Leben zu erwecken. Sie können jedes dieser Konzepte verwenden, um eine Eigenschaft oder Subchannelkomponente (falls zutreffend) eines Beliebigen CompositionObject zu animieren.

Hinweis

Nicht alle Eigenschaften eines CompositionObject sind animierbar. In der Dokumentation des einzelnen CompositionObject finden Sie Informationen dazu, ob eine Eigenschaft animierbar ist.

Hinweis

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

Animationskonzept BESCHREIBUNG
Zeitbasierte Bewegung mit KeyFrameAnimations KeyFrameAnimations wird verwendet, um die gesamte Bewegungserfahrung über einen bestimmten Zeitraum direkt zu steuern. Entwickler beschreiben Start, Ende, Interpolation dazwischen und Dauer einer Bewegung auf traditionelle Keyframe-Weise.
Relative Bewegung mit ExpressionAnimations ExpressionAnimations wird verwendet, um zu beschreiben, wie eine Bewegung der -Eigenschaft eines Objekts relativ zur Eigenschaft eines anderen Objekts gesteuert werden soll. Entwickler definieren eine mathematische Gleichung, die die referenzbasierte Beziehung definiert.
ImplicitAnimations Diese Animationen sind triggerbasiert und werden getrennt von der Kernlogik der App definiert. ImpliziteAnimations werden verwendet, um zu beschreiben, wie und wann Animationen als Reaktion auf direkte Eigenschaftenänderungen auftreten.
Eingabegesteuerte Bewegung mit Eingabeanimationen Eingabeanimationen decken eine Reihe von Szenarien ab, mit denen Entwickler manipulationsbasierte Bewegung per Toucheingabe oder anderen Eingabemodalitäten beschreiben können. Diese Animationen werden basierend auf aktiven Benutzereingaben oder -gesten gesteuert.
Physikbasierte Bewegung mit NaturalMotionAnimations NaturalMotionAnimations werden verwendet, um natürliche und vertraute Bewegungserfahrungen basierend auf realen kraftgesteuerten Bewegungen zu beschreiben. Anstatt die Zeit zu definieren, definieren Entwickler Merkmale der Bewegung (z. B. Dämpfungsverhältnis für Federn).