Animations pilotées par une entrée

Cet article fournit une introduction à l’API InputAnimation dans les applications WinUI et Windows App SDK, et recommande d’utiliser ces types d’animations dans votre interface utilisateur.

Prerequisites

Ici, nous partons du principe que vous connaissez les concepts abordés dans ces articles :

• Animations basées sur des relations

Mouvement lisse piloté par les interactions utilisateur

Dans le langage Fluent Design, l’interaction entre les utilisateurs finaux et les applications est de la plus grande importance. Les applications doivent non seulement avoir la bonne apparence, mais également répondre naturellement et dynamiquement aux utilisateurs qui interagissent avec elles. Lorsqu’un doigt est placé sur l’écran, l’interface utilisateur doit réagir de manière fluide aux changements de niveaux d’entrée ; le défilement doit être fluide et suivre le mouvement du doigt sur l’écran.

Développer des interfaces qui répondent dynamiquement et de manière fluide aux interactions des utilisateurs augmente leur engagement. Le mouvement ne se contente plus seulement de bien paraître, mais se ressent de manière agréable et naturelle lorsque les utilisateurs interagissent avec vos différentes interfaces. Cela permet aux utilisateurs finaux de se connecter plus facilement à votre application, ce qui rend l’expérience plus mémorable et agréable.

Élargir au-delà du tactile uniquement

Bien que l’interaction tactile soit l’une des interfaces les plus courantes utilisées par les utilisateurs finaux pour manipuler le contenu de l’interface utilisateur, elles utiliseront également différentes autres modalités d’entrée telles que la souris et le stylet. 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’ils choisissent d’utiliser. Vous devez être conscient des différentes modalités d’entrée lors de la conception d’expériences de mouvement pilotées par les entrées.

Différentes expériences de mouvement basées sur l'entrée

L’espace InputAnimation fournit plusieurs expériences différentes pour vous permettre de créer un mouvement de réponse dynamique. Comme le reste du système d’animation de composition du SDK d’application Windows, ces animations pilotées par les entrées fonctionnent sur un thread indépendant, ce qui contribue à l’expérience de mouvement dynamique. Toutefois, dans certains cas où l’expérience tire parti des contrôles et composants XAML existants, certaines parties de ces expériences sont toujours liées au thread d’interface utilisateur.

Il existe trois expériences principales que vous créez lors de la création d’animations dynamiques pilotées par les entrées :

1. Amélioration des expériences ScrollView existantes : activez la position d’un ScrollViewer XAML pour générer des expériences d’animation dynamique.
2. Expériences basées sur la position du pointeur : utiliser la position du curseur sur un UIElement ayant subi un test de collision pour animer des expériences d’animation dynamique.
3. Expériences de manipulation personnalisées 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).

Amélioration des expériences ScrollViewer existantes

L’une des façons courantes de créer des expériences plus dynamiques consiste à s'appuyer sur un contrôle ScrollViewer XAML existant. 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. Voici quelques exemples : Sticky/Shy Headers et Parallax.

Lors de la création de ces types d’expériences, il existe une formule générale à suivre :

1. Accédez au ScrollManipulationPropertySet depuis le ScrollViewer XAML que vous souhaitez animer.
   • Réalisé via l'API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement élément)
   • Retourne un CompositionPropertySet contenant une propriété appelée Translation
2. Créez une ExpressionAnimation de composition avec une équation qui fait référence à la propriété Translation.
3. Démarrez l’animation sur la propriété d’un CompositionObject.

Pour plus d’informations sur la création de ces expériences, consultez Améliorer les expériences ScrollViewer existantes.

Expériences basées sur la position du pointeur

Une autre expérience dynamique courante impliquant l’entrée consiste à piloter une animation basée sur la position d’un pointeur tel qu’un curseur de souris. Dans ces situations, les développeurs exploitent la position du curseur lors des tests de collision au sein d'un UIElement XAML, ce qui rend la création d'expériences telles que Spotlight Reveal possible.

Lors de la création de ces types d’expériences, il existe une formule générale à suivre :

1. Accédez à PointerPositionPropertySet d'un UIElement XAML pour connaître la position du curseur lors du test de positionnement.
   • Effectué via l’API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement élément)
   • Retourne un CompositionPropertySet contenant une propriété appelée Position
2. Créez une CompositionExpressionAnimation avec une équation qui fait référence à la propriété Position.
3. Démarrez l’animation sur la propriété d’un objet CompositionObject.

Expériences de manipulation personnalisées avec InteractionTracker

L’un des défis liés à l’utilisation d’un ScrollViewer XAML est qu’il est lié au thread d’interface utilisateur. Par conséquent, l'expérience de défilement et de zoom peut souvent ralentir et saccader si le thread de l'interface utilisateur devient occupé et entraîne une expérience désagréable. En outre, il n’est pas possible de personnaliser de nombreux aspects de l’expérience ScrollViewer. 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 exécutées sur un thread indépendant.

Lors de la création d’expériences avec InteractionTracker, il existe une formule générale à suivre :

1. Créez votre objet InteractionTracker et définissez ses propriétés.
2. Créez des VisualInteractionSources pour toute CompositionVisual qui doit capturer l’entrée pour être consommée par InteractionTracker.
3. Créez une Composition ExpressionAnimation avec une équation qui fait référence à la propriété Position d’InteractionTracker.
4. Démarrez l’animation sur la propriété d’un Composition Visual que vous souhaitez voir pilotée par InteractionTracker.