Animations de compositionComposition animations

Les API Windows.UI.Composition vous permettent de créer, d’animer, de transformer et de manipuler des objets compositeur dans une couche API unifiée.The Windows.UI.Composition APIs allows you to create, animate, transform and manipulate compositor objects in a unified API layer. Les animations de composition offrent un moyen puissant et efficace d’exécuter des animations dans l’interface utilisateur de votre application.Composition animations provide a powerful and efficient way to run animations in your application UI. Elles ont été entièrement conçues pour garantir l’exécution de vos animations à 60 FPS, indépendamment du thread d’interface utilisateur, et pour vous offrir la possibilité de créer des expériences totalement inédites en usant de nombreuses propriétés et entrées pour produire les animations en question.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.

Motion dans WindowsMotion in Windows

Imaginez la conception du mouvement comme un film.Think of motion design like a movie. Les transitions transparentes vous laissent concentrés sur l’histoire et donnent vie aux expériences.Seamless transitions keep you focused on the story, and bring experiences to life. Nous pouvons inviter ce sentiment dans notre conception, pour guider les utilisateurs d’une tâche à l'autre avec une aisance cinématographique.We can invite that feeling into our designs, leading people from one task to the next with cinematic ease. Motion est souvent le facteur de différenciation entre une interface utilisateur et une expérience utilisateur.Motion is often the differentiating factor between a User Interface and a User Experience.

En tant que bloc de construction fondamental de la plate-forme d’interface utilisateur de Windows, CompositionAnimations offre un moyen puissant et efficace de créer des expériences de mouvement dans l’interface utilisateur de votre application.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. Le moteur d’animation a été conçu dès le départ pour s’assurer que votre mouvement s’exécute à 60 FPS, indépendamment du thread d’interface utilisateur.The animation engine has been designed from the ground up to ensure that your motion runs at 60 FPS, independent of the UI thread. Ces animations sont conçues pour offrir la flexibilité nécessaire pour créer des expériences de mouvement novatrices basées sur le temps, l’entrée et d’autres propriétés.These animations are designed to provide the flexibility to build innovative motion experiences based on time, input, and other properties.

Exemples de mouvementExamples of motion

Voici quelques exemples de mouvement dans une application.Here are some examples of motion in an app.

Ici, une application utilise une animation connectée pour animer une image qui « perdure » pour faire partie de l’en-tête de la page suivante.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. L’effet aide à conserver le contexte de l’utilisateur pendant toute la transition.The effect helps maintain user context across the transition.

Exemple d’animation connectée

Ici, un effet parallaxe visuel déplace les objets à différentes vitesses lorsque vous faites défiler ou que vous développez l'interface utilisateur, afin de créer un effet de profondeur, de perspective et de mouvement.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.

Un exemple de parallaxe avec une liste et une image d’arrière-plan

Utilisation de CompositionAnimations pour créer un mouvementUsing CompositionAnimations to create Motion

Pour générer un mouvement dans l’interface utilisateur, les développeurs peuvent accéder aux animations en XAML ou dans la couche visuelle.To generate motion in UI, developers can access animations in either XAML or the Visual Layer. Les animations au niveau de la couche visuelle offrent aux développeurs une série d’avantages :Animations at the Visual Layer provide developers with a series of benefits:

  • Performances : au lieu de l’animation traditionnelle liée aux threads de l’interface utilisateur, les animations sur la plate-forme d’interface utilisateur Windows fonctionnent sur un thread indépendant à 60 FPS, ce qui permet d’effectuer des expériences de mouvement fluide.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.
  • Modèle de création de modèles : les animations dans la couche d’interface utilisateur Windows sont des modèles, ce qui signifie qu’il est possible d’utiliser une seule animation sur plusieurs objets et de modifier les propriétés ou les paramètres sans vous soucier des utilisations précédentes.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.
  • Personnalisation : la couche d’interface utilisateur Windows facilite non seulement la création d’une belle interface utilisateur, mais avec un large éventail de types d’animations, permettant de créer des expériences étonnantes et étonnantes avec un dégradé de personnalisations.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

En tant que développeur qui crée des expériences au niveau de la couche d’interface utilisateur Windows, vous avez accès à un large éventail de concepts d’animation pour donner vie à vos conceptions.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. Vous pouvez utiliser l’un de ces concepts pour animer un composant de propriété ou de sous-chaîne (le cas échéant) de n’importe quel CompositionObject.You can use any of these concepts to animate a property or subchannel component (when applicable) of any CompositionObject.

Notes

Toutes les propriétés d’un CompositionObject ne peuvent pas être animées.Not all properties of a CompositionObject are animatable. Reportez-vous à la documentation de chaque CompositionObject pour déterminer si une propriété peut être animée.Refer to the documentation of the individual CompositionObject to determine whether a property is animatable.

Notes

Le terme sous- canal fait référence à une forme de composant d’une propriété.The term subchannel refers to a component form of a property. Par exemple, le sous-canal X ou XY d’une propriété de décalage Vector3.For example, the X, or XY subchannel of a Vector3 Offset property.

Concept d’animationAnimation concept DescriptionDescription
Mouvement basé sur l’heure avec KeyFrameAnimationsTime-based motion with KeyFrameAnimations Les KeyFrameAnimations sont utilisés pour contrôler directement l’intégralité d’une expérience de mouvement sur une période donnée.KeyFrameAnimations are used to directly control the entirety of a motion experience over a period of time. Les développeurs décrivant le début, la fin, l’interpolation d’un mouvement entre et la durée d’une image clé traditionnelle.Developers describing a motion’s start, end, interpolation in between, and duration in a traditional keyframed fashion.
Mouvement relatif avec ExpressionAnimationsRelative motion with ExpressionAnimations Les ExpressionAnimations sont utilisés pour décrire la façon dont une trajectoire de la propriété d’un objet doit être pilotée par rapport à la propriété d’un autre objet.ExpressionAnimations are used to describe how a motion of one object’s property should be driven relative to another object’s property. Les développeurs définissent une équation mathématique qui définit la relation basée sur la référence.Developers define a mathematical equation that defines the reference-based relationship.
ImplicitAnimationsImplicitAnimations Ces animations sont basées sur un déclencheur et sont définies séparément de la logique d’application principale.These animations are trigger-based and are defined separately from core app logic. Les ImplicitAnimations sont utilisés pour décrire comment et quand les animations se produisent en réponse à des modifications de propriétés directes.ImplicitAnimations are used to describe how and when animations occur as a response to direct property changes.
Mouvement piloté par les entrées avec des animations d’entréeInput-driven motion with Input Animations Les animations d’entrée couvrent un ensemble de scénarios qui permettent aux développeurs de décrire le mouvement basé sur la manipulation via Touch ou d’autres modalités d’entrée.Input Animations covers a set of scenarios that enable developers to describe manipulation-based motion via touch or other input modalities. Ces animations sont pilotées en fonction de l’entrée ou des gestes actifs de l’utilisateur.These animations are driven based on active user input or gestures.
Mouvement basé sur la physique avec NaturalMotionAnimationsPhysics-based motion with NaturalMotionAnimations Les NaturalMotionAnimations sont utilisés pour décrire une expérience de mouvement naturelle et familière basée sur un mouvement de force réel.NaturalMotionAnimations are used to describe natural and familiar motion experiences based on real-world force driven motion. Plutôt que de définir le temps, les développeurs définissent les caractéristiques du mouvement (par exemple, le ratio d’amortissement des ressorts)Rather than defining time, developers define characteristics of the motion (for example, damping ratio for Springs)