KompositionsanimationenComposition animations

Mit der Windows.UI.Composition API können Sie Kompositorobjekte in einer einheitlichen API-Ebene erstellen, animieren, umwandeln und bearbeiten.The Windows.UI.Composition APIs allows you to create, animate, transform and manipulate compositor objects in a unified API layer. Kompositionsanimationen bieten eine leistungsstarke und effiziente Möglichkeit, Animationen auf der Benutzeroberfläche Ihrer Anwendung auszuführen.Composition animations provide a powerful and efficient way to run animations in your application UI. 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.They have been designed from the ground up to ensure that your animations run at 60 FPS independent of the UI thread and to give you the flexibility to build amazing experiences using not only time, but input and other properties, to drive animations.

Bewegung in WindowsMotion in Windows

Stellen Sie sich Motion-Design wie einen Film vor.Think of motion design like a movie. Nahtlose Übergänge halten Sie auf die Geschichte konzentriert und erwecken Erlebnisse zum Leben.Seamless transitions keep you focused on the story, and bring experiences to life. Wir können dieses Gefühl in unsere Entwürfe einbringen und Menschen von einer Aufgabe zur nächsten führen.We can invite that feeling into our designs, leading people from one task to the next with cinematic ease. Bewegung ist oft der differenzierende Faktor zwischen einer Benutzeroberfläche und einer Benutzeroberfläche.Motion is often the differentiating factor between a User Interface and a User Experience.

Als grundlegender Baustein der Windows-UI-Plattform bieten compositionanimationen eine leistungsfähige und effiziente Möglichkeit, Bewegungs Umgebungen in der Benutzeroberfläche Ihrer Anwendung zu erstellen.As a fundamental building block of the Windows UI Platform, CompositionAnimations provide a powerful and efficient way to create motion experiences in your application’s UI. Die Animations-Engine wurde von Grund auf neu entworfen, um sicherzustellen, dass Ihre Bewegung mit 60 fps unabhängig vom UI-Thread ausgeführt wird.The animation engine has been designed from the ground up to ensure that your motion runs at 60 FPS, independent of the UI thread. Diese Animationen sind so konzipiert, dass Sie die Flexibilität zum Erstellen innovativer Bewegungs Erfahrungen basierend auf Zeit, Eingabe und anderen Eigenschaften bieten.These animations are designed to provide the flexibility to build innovative motion experiences based on time, input, and other properties.

Beispiele für BewegungExamples of motion

Im Folgenden finden Sie einige Beispiele für Bewegung in einer App.Here are some examples of motion in an app.

Hier verwendet eine App eine verbundene Animation, um ein Elementbild zu animieren, wenn es als Teil der Überschrift der nächsten Seite weiterbesteht.Here, an app uses a connected animation to animate an item image as it “continues” to become part of the header of the next page. Dieser Effekt trägt dazu bei, Benutzerkontext beim Übergang beizubehalten.The effect helps maintain user context across the transition.

Ein Beispiel für eine verbundene Animation

Hier werden bei einem Bildlauf oder Schwenken der UI verschiedene Objekte mithilfe eines Parallax-Effekts unterschiedlich schnell verschoben. Dadurch entsteht ein Gefühl von Tiefe, Perspektive und Bewegung.Here, a visual parallax effect moves different objects at different rates when the UI scrolls or pans to create a feeling of depth, perspective, and movement.

Beispiel für Parallax mit einer Liste und einem Hintergrundbild

Verwenden von compositionanimationen zum Erstellen von BewegungUsing CompositionAnimations to create Motion

Um Motion in der Benutzeroberfläche zu generieren, können Entwickler entweder in XAML oder in der visuellen Ebene auf Animationen zugreifen.To generate motion in UI, developers can access animations in either XAML or the Visual Layer. Animationen auf der visuellen Ebene bieten Entwicklern eine Reihe von Vorteilen:Animations at the Visual Layer provide developers with a series of benefits:

  • Leistung – anstelle der herkömmlichen Thread gebundenen Animation für die Benutzeroberfläche arbeiten Animationen auf der Windows-UI-Plattform mit einem unabhängigen Thread bei 60 fps und ermöglichen reibungslose Bewegungsmöglichkeiten.Performance – instead of the traditional UI Thread-bound animation, animations on the Windows UI platform operate on an independent thread at 60 FPS, enabling smooth motion experiences.
  • Vorlagen Modell – Animationen in der Windows-Benutzeroberflächen Ebene sind Vorlagen, was bedeutet, dass eine einzelne Animation auf mehreren Objekten verwendet und Eigenschaften oder Parameter angepasst werden können, ohne dass vorherige Verwendungen behindert werden müssen.Templating Model – animations in the Windows UI layer are templates, meaning can use a single animation on multiple objects and tweak properties or parameters without worrying of obstructing previous uses.
  • Anpassung – die Windows-Benutzeroberflächen Schicht vereinfacht nicht nur die Erstellung einer wunderbaren Benutzeroberfläche, sondern mit einer vollständigen Palette von Animations Typen, die möglich sind, um neue und beeindruckende Umgebungen mit einem Farbverlauf von Anpassungen zu erstellen.Customization – the Windows UI layer not only makes it easy to make beautiful UI, but with a full range of animation types, possible to create new and amazing experiences with a gradient of customizations

Als Entwickler, der Erfahrungen auf der Windows-Benutzeroberflächen Ebene erstellt, haben Sie Zugriff auf eine Vielzahl von Animations Konzepten, um Ihre Entwürfe zu verbringen.As a developer creating experiences at the Windows UI layer, you have access to a variety of animation concepts to bring your designs to life. Sie können jedes dieser Konzepte verwenden, um eine Eigenschaft oder unter Kanal Komponente (falls zutreffend) eines beliebigen compositionobject zu animieren.You can use any of these concepts to animate a property or subchannel component (when applicable) of any CompositionObject.

Hinweis

Nicht alle Eigenschaften eines compositionobject sind animabel.Not all properties of a CompositionObject are animatable. Informationen zum bestimmen, ob eine Eigenschaft animiert werden kann, finden Sie in der Dokumentation des einzelnen compositionobject.Refer to the documentation of the individual CompositionObject to determine whether a property is animatable.

Hinweis

Der Begriff Subchannel verweist auf eine Komponenten Form einer Eigenschaft.The term subchannel refers to a component form of a property. Beispielsweise der X-oder XY-Subchannel einer Vector3 Offset-Eigenschaft.For example, the X, or XY subchannel of a Vector3 Offset property.

Animations KonzeptAnimation concept BeschreibungDescription
Zeitbasierte Bewegung mit keyframeanimationenTime-based motion with KeyFrameAnimations Keyframeanimationen werden verwendet, um die gesamte Bewegungs Darstellung über einen bestimmten Zeitraum direkt zu steuern.KeyFrameAnimations are used to directly control the entirety of a motion experience over a period of time. Entwickler, die den Beginn, das Ende und die Interpolation einer Bewegung beschreiben, und die Dauer in einer herkömmlichen keyframed-Weise.Developers describing a motion’s start, end, interpolation in between, and duration in a traditional keyframed fashion.
Relative Bewegung mit expressionanimationenRelative motion with ExpressionAnimations Expressionanimationen werden verwendet, um zu beschreiben, wie eine Bewegung der-Eigenschaft eines Objekts in Bezug auf die-Eigenschaft eines anderen Objekts gesteuert werden soll.ExpressionAnimations are used to describe how a motion of one object’s property should be driven relative to another object’s property. Entwickler definieren eine mathematische Gleichung, die die Verweis basierte Beziehung definiert.Developers define a mathematical equation that defines the reference-based relationship.
ImplicitanimationenImplicitAnimations Diese Animationen sind triggerbasiert und werden getrennt von der APP-Kern Logik definiert.These animations are trigger-based and are defined separately from core app logic. Implicitanimationen werden verwendet, um zu beschreiben, wie und wann Animationen als Antwort auf Änderungen direkter Eigenschaften auftreten.ImplicitAnimations are used to describe how and when animations occur as a response to direct property changes.
Eingabe gesteuerte Bewegung mit Eingabe AnimationenInput-driven motion with Input Animations Eingabe Animationen umfassen eine Reihe von Szenarios, mit denen Entwickler Manipulations basierte Bewegungen über Berührungs-oder andere Eingabe Modalitäten beschreiben können.Input Animations covers a set of scenarios that enable developers to describe manipulation-based motion via touch or other input modalities. Diese Animationen werden basierend auf der aktiven Benutzereingabe oder-Gesten gesteuert.These animations are driven based on active user input or gestures.
Physik-basierte Bewegung mit naturalmotionanimationenPhysics-based motion with NaturalMotionAnimations Naturalmotionanimationen werden verwendet, um natürliche und vertraute Bewegungsmöglichkeiten auf der Grundlage der realen Bewegung zu beschreiben.NaturalMotionAnimations are used to describe natural and familiar motion experiences based on real-world force driven motion. Anstatt die Zeit zu definieren, definieren Entwickler die Merkmale der Bewegung (z. b. das Dämpfungs Verhältnis für Springs).Rather than defining time, developers define characteristics of the motion (for example, damping ratio for Springs)