Animations pilotées par une entréeInput-driven animations

Cet article fournit une introduction à l’API InputAnimation et vous recommande d’utiliser ces types d’animations dans votre interface utilisateur.This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

PrérequisPrerequisites

Ici, nous partons du principe que vous êtes familiarisé avec les concepts abordés dans les articles suivants :Here, we assume that you're familiar with the concepts discussed in these articles:

Mouvement lisse piloté par les interactions de l’utilisateurSmooth motion driven from user interactions

Dans le langage de conception Fluent, les interactions entre les utilisateurs finaux et les applications sont d’une importance capitale.In the Fluent Design language, interaction between end users and apps is of the utmost importance. Les applications doivent non seulement examiner la partie, mais également répondre naturellement et de manière dynamique aux utilisateurs qui interagissent avec eux.Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. Cela signifie que lorsqu’un doigt est placé sur l’écran, l’interface utilisateur doit réagir de manière appropriée à l’évolution des degrés d’entrée ; le défilement doit être lisse et s’embout d’un doigt panoramique sur l’écran.This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

La création d’une interface utilisateur qui répond de manière dynamique et fluide à l’entrée de l’utilisateur entraîne une plus grande augmentation du mouvement des utilisateurs. en effet, elle semble correcte et naturelle quand les utilisateurs interagissent avec vos différentes expériences d’interface utilisateur.Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. Cela permet aux utilisateurs finaux de se connecter plus facilement à votre application, ce qui rend l’expérience plus mémorable et délicieuse.This enables end users to more easily connect with your application, making the experience more memorable and delightful.

Développement passé justeExpanding past just touch

Bien que Touch soit l’une des interfaces les plus courantes que les utilisateurs finaux utilisent pour manipuler le contenu de l’interface utilisateur, ils utilisent également diverses autres modalités d’entrée telles que la souris et le stylet.Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. Dans ce cas, il est important que les utilisateurs finaux perçoivent que votre interface utilisateur répond dynamiquement à leur entrée, quelle que soit la modalité d’entrée qu’elles choisissent d’utiliser.In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. Vous devez être Cognizant des différentes modalités d’entrée lors de la conception d’expériences de mouvement pilotées par l’entrée.You should be cognizant of the different input modalities when designing input-driven motion experiences.

Différentes expériences pilotées par l’entréeDifferent Input-Driven Motion Experiences

L’espace InputAnimation offre plusieurs expériences différentes qui vous permettent de créer des mouvements de réponse dynamique.The InputAnimation space provides several different experiences for you to create dynamically responding motion. Comme le reste du système d’animation de l’interface utilisateur Windows, ces animations pilotées par les entrées fonctionnent sur un thread indépendant, ce qui contribue à contribuer à l’expérience de mouvement dynamique.Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. Toutefois, dans certains cas où l’expérience s’appuie sur des contrôles et des composants XAML existants, les parties de ces expériences sont toujours liées au thread d’interface utilisateur.However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

Il existe trois expériences principales que vous créez lors de la création d’animations de mouvement dynamiques pilotées par entrée :There are three core experiences that you create when building dynamic input-driven motion animations:

  1. Amélioration des expériences ScrollView existantes : active la position d’un ScrollViewer XAML pour piloter les expériences d’animation dynamiques.Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. Expériences pilotées par position de pointeur : utilisez la position d’un curseur sur un UIElement testé par positionnement pour conduire des expériences d’animation dynamiques.Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. Expériences de manipulation personnalisée avec InteractionTracker : créez des expériences de manipulation hors thread entièrement personnalisées avec InteractionTracker (par exemple, un canevas de défilement/zoom).Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

Amélioration des expériences ScrollViewer existantesEnhancing Existing ScrollViewer Experiences

L’une des méthodes courantes pour créer des expériences plus dynamiques consiste à générer sur un contrôle ScrollViewer XAML existant.One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. Dans ces situations, vous tirez parti de la position de défilement d’un ScrollViewer pour créer des composants d’interface utilisateur supplémentaires qui rendent une expérience de défilement simple plus dynamique.In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. Voici quelques exemples : en-têtes rémanents/discrets et parallaxe.Some examples include Sticky/Shy Headers and Parallax.

Mode liste avec parallaxe

En-tête discret

Lors de la création de ces types d’expériences, il existe une formule générale à suivre :When creating these types of experiences, there is a general formula to follow:

  1. Accédez à ScrollManipulationPropertySet à partir du ScrollViewer XAML pour lequel vous souhaitez piloter une animation.Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • Effectuée via l’API ElementCompositionPreview. GetScrollViewerManipulationPropertySet (élément UIElement)Done via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • Retourne un CompositionPropertySet contenant une propriété appelée translationReturns a CompositionPropertySet containing a property called Translation
  2. Créez un ExpressionAnimation de composition avec une équation qui fait référence à la propriété translation.Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. Démarrez l’animation sur la propriété d’un CompositionObject.Start the animation on a CompositionObject’s property.

Pour plus d’informations sur la création de ces expériences, consultez améliorer les expériences ScrollViewer existantes.For more info on building these experiences, see Enhance existing ScrollViewer experiences.

Expériences pilotées par position de pointeurPointer Position-driven experiences

Une autre expérience dynamique courante impliquant l’entrée consiste à conduire une animation en fonction de la position d’un pointeur comme un curseur de la souris.Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. Dans ces situations, les développeurs tirent parti de l’emplacement d’un curseur lorsqu’ils effectuent des tests d’atteinte au sein d’un UIElement XAML qui rend possible la création d’expériences comme Spotlight.In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

Exemple de Spotlight de pointeur

Exemple de rotation du pointeur

Lors de la création de ces types d’expériences, il existe une formule générale à suivre :When creating these types of experiences, there is a general formula to follow:

  1. Accédez à PointerPositionPropertySet à partir d’un UIElement XAML qui vous permet de connaître la position du curseur lors d’un test d’atteinte.Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • Effectuée via l’API ElementCompositionPreview. GetPointerPositionPropertySet (élément UIElement)Done via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • Retourne un CompositionPropertySet contenant une propriété appelée positionReturns a CompositionPropertySet containing a property called Position
  2. Créez un CompositionExpressionAnimation avec une équation qui fait référence à la propriété position.Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. Démarrez l’animation sur la propriété d’un CompositionObject.Start the animation on a CompositionObject’s property.

Expériences de manipulation personnalisées avec InteractionTrackerCustom manipulation experiences with InteractionTracker

L’un des défis liés à l’utilisation d’un ScrollViewer XAML est qu’il est lié au thread d’interface utilisateur.One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. Par conséquent, l’expérience de défilement et de zoom peut souvent être décalée et instable si le thread d’interface utilisateur est occupé et entraîne une expérience inversée.As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. En outre, il n’est pas possible de personnaliser de nombreux aspects de l’expérience ScrollViewer.In addition, it is not possible to customize many aspects of the ScrollViewer experience. InteractionTracker a été créé pour résoudre les deux problèmes en fournissant un ensemble de blocs de construction pour créer des expériences de manipulation personnalisées qui sont exécutées sur un thread indépendant.InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

exemple d’interactions 3D

Exemple d’extraction vers l’animation

Lors de la création d’expériences avec InteractionTracker, il existe une formule générale à suivre :When creating experiences with InteractionTracker, there is a general formula to follow:

  1. Créez votre objet InteractionTracker et définissez ses propriétés.Create your InteractionTracker object and define its properties.
  2. Créez VisualInteractionSources pour tous les CompositionVisual qui doivent capturer l’entrée pour InteractionTracker à consommer.Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. Créez un ExpressionAnimation de composition avec une équation qui fait référence à la propriété position de InteractionTracker.Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. Démarrez l’animation sur la propriété d’un visuel de composition que vous souhaitez pilotée par InteractionTracker.Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.