Partager via


Animations de composition

Les API Windows.UI.Composition vous permettent de créer, animer, transformer et manipuler des objets compositor dans une couche d’API unifiée. Les animations de composition offrent un moyen puissant et efficace d’exécuter des animations dans l’interface utilisateur de votre application. Ils ont été conçus à partir du terrain pour vous assurer que vos animations s’exécutent à 60 FPS indépendamment du thread d’interface utilisateur et pour vous donner la possibilité de créer des expériences étonnantes en utilisant non seulement le temps, mais l’entrée et d’autres propriétés, pour générer des animations.

Mouvement dans Windows

Imaginez la conception du mouvement comme un film. La fluidité des transitions vous permet de vous concentrer sur l’histoire et donne vie aux expériences. Nous pouvons inviter ce sentiment dans nos conceptions, dirigeant les gens d’une tâche à l’autre avec facilité cinématographique. Le mouvement est souvent le facteur de différenciation entre une interface utilisateur et une expérience utilisateur.

En tant que bloc de construction fondamental de la plateforme d’interface utilisateur Windows, CompositionAnimations offre un moyen puissant et efficace de créer des expériences de mouvement dans l’interface utilisateur de votre application. Le moteur d’animation a été conçu à partir du terrain pour vous assurer que votre mouvement s’exécute à 60 FPS, indépendamment du thread d’interface utilisateur. Ces animations sont conçues pour offrir la flexibilité nécessaire pour créer des expériences de mouvement innovantes basées sur le temps, l’entrée et d’autres propriétés.

Exemples de mouvement

Voici quelques exemples de mouvement dans une application.

Ici, une application utilise une animation connectée pour animer une image d’élément car elle « continue » pour faire partie de l’en-tête de la page suivante. L’effet permet de maintenir le contexte utilisateur au cours de la transition.

Exemple d’animation connectée

Ici, un effet parallaxe visuel déplace différents objets à différents rythmes lorsque l’interface utilisateur fait défiler ou panoramique pour créer une sensation de profondeur, de perspective et de mouvement.

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

Utilisation de CompositionAnimations pour créer un mouvement

Pour générer un mouvement dans l’interface utilisateur, les développeurs peuvent accéder aux animations en XAML ou en couche visuelle. Les animations au niveau de la couche visuelle offrent aux développeurs une série d’avantages :

  • Performances : au lieu de l’animation traditionnelle liée au thread d’interface utilisateur, les animations sur la plateforme d’interface utilisateur Windows fonctionnent sur un thread indépendant à 60 FPS, ce qui permet des expériences de mouvement fluide.
  • Modèle de création de modèles : les animations de la couche d’interface utilisateur Windows sont des modèles, ce qui signifie qu’elles peuvent utiliser une seule animation sur plusieurs objets et ajuster les propriétés ou les paramètres sans vous soucier d’obstruer les utilisations précédentes.
  • Personnalisation : la couche d’interface utilisateur Windows facilite non seulement la création d’une interface utilisateur magnifique, mais avec une gamme complète de types d’animations, possible pour créer des expériences nouvelles et étonnantes avec un dégradé de personnalisations

En tant que développeur créant des expériences au niveau de la couche d’interface utilisateur Windows, vous avez accès à divers concepts d’animation pour mettre vos conceptions à la vie. Vous pouvez utiliser l’un de ces concepts pour animer une propriété ou un composant de sous-canal (le cas échéant) d’un Objet CompositionObject.

Remarque

Toutes les propriétés d’un Objet CompositionObject ne sont pas modifiables. Reportez-vous à la documentation de l’objet CompositionObject individuel pour déterminer si une propriété est animatable.

Remarque

Le terme sous-canal fait référence à une forme de composant d’une propriété. Par exemple, le sous-canal X ou XY d’une propriété Vector3 Offset.

Concept d’animation Description
Mouvement basé sur le temps avec KeyFrameAnimations Les KeyFrameAnimations sont utilisées pour contrôler directement l’intégralité d’une expérience de mouvement sur une période donnée. Les développeurs décrivant le début, la fin, l’interpolation entre un mouvement et la durée d’une manière traditionnelle avec images clés.
Mouvement relatif avec ExpressionAnimations Les expressionAnimations sont utilisées pour décrire comment un mouvement de la propriété d’un objet doit être piloté par rapport à la propriété d’un autre objet. Les développeurs définissent une équation mathématique qui définit la relation basée sur des références.
ImpliciteAnimations Ces animations sont basées sur des déclencheurs et sont définies séparément de la logique d’application principale. Les animations implicites sont utilisées pour décrire comment et quand des animations se produisent en réponse aux modifications de propriété directes.
Mouvement piloté par l’entrée avec animations d’entrée 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 l’interaction tactile ou d’autres modalités d’entrée. Ces animations sont pilotées en fonction de l’entrée ou des mouvements utilisateur actifs.
Mouvement basé sur la physique avec NaturalMotionAnimations NaturalMotionAnimations est utilisé pour décrire des expériences de mouvement naturelles et familières basées sur le mouvement piloté par la force réelle. Au lieu de définir le temps, les développeurs définissent des caractéristiques du mouvement (par exemple, rapport d’amortissement pour Springs)