Expériences de manipulation personnalisées avec InteractionTracker

Dans cet article, nous montrons comment utiliser InteractionTracker pour créer des expériences de manipulation personnalisées.

Prerequisites

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

• Animations pilotées par les entrées
• Animations basées sur des relations

Pourquoi créer des expériences de manipulation personnalisées ?

Dans la plupart des cas, l’utilisation des contrôles de manipulation prédéfini suffit pour créer des expériences d’interface utilisateur. Mais que se passerait-il si vous souhaitiez différencier les contrôles standards ? Que se passe-t-il si vous souhaitez créer une expérience spécifique pilotée par une entrée ou avoir une interface utilisateur où un mouvement de manipulation traditionnel n’est pas suffisant ? C’est là que se produit la création d’expériences personnalisées. Ils permettent aux développeurs et concepteurs d’applications d’être plus créatifs : ils donnent vie à des expériences de mouvement qui exemplifient mieux leur marque et leur langage de conception. Dès le départ, vous avez accès au bon ensemble de blocs de construction pour personnaliser complètement une expérience de manipulation, depuis la façon dont le mouvement doit réagir avec le doigt à l'écran et en dehors jusqu'aux points d'accrochage et le chaînage d'entrée.

Voici quelques exemples courants de création d’une expérience de manipulation personnalisée :

• Ajout d’un comportement personnalisé de balayage et de suppression/fermeture
• Les effets pilotés par l’entrée (le mouvement panoramique provoque le flou du contenu)
• Contrôles personnalisés avec des mouvements de manipulation personnalisés (ListView personnalisé, ScrollViewer, etc.)

Pourquoi utiliser InteractionTracker ?

InteractionTracker est disponible dans l’espace de noms Microsoft.UI.Composition.Interactions pour les applications WinUI et Windows App SDK. InteractionTracker permet de :

• Flexibilité complète : nous voulons que vous puissiez personnaliser et adapter chaque aspect d’une expérience de manipulation ; plus précisément, les mouvements exacts qui se produisent pendant ou en réponse à l’entrée. Lors de la création d’une expérience de manipulation personnalisée avec InteractionTracker, tous les boutons dont vous avez besoin sont à votre disposition.
• Performances lisses : l’un des défis liés aux expériences de manipulation est que leurs performances dépendent du thread d’interface utilisateur. Cela peut avoir un impact négatif sur toute expérience de manipulation lorsque l’interface utilisateur est occupée. InteractionTracker a été conçu pour utiliser le nouveau moteur d’animation qui fonctionne sur un thread indépendant à 60 FPS, ce qui entraîne un mouvement lisse.

Vue d’ensemble : InteractionTracker

Lors de la création d’expériences de manipulation personnalisées, il existe deux composants principaux avec lesquels vous interagissez. Nous aborderons d’abord ces points :

• InteractionTracker : l’objet principal qui conserve une machine d’état dont les propriétés sont pilotées par des entrées utilisateur actives ou des mises à jour et des animations directes. Il est ensuite prévu de l'associer à une CompositionAnimation pour créer un mouvement de manipulation personnalisé.
• VisualInteractionSource : objet complémentaire qui définit quand et dans quelles conditions l’entrée est envoyée à InteractionTracker. Il définit la CompositionVisual utilisée pour les tests de détection des collisions ainsi que d’autres propriétés de configuration des entrées.

En tant qu’ordinateur d’état, les propriétés d’InteractionTracker peuvent être pilotées par l’un des éléments suivants :

• Interaction directe de l'utilisateur : l'utilisateur final manipule directement dans la région de test de pointage VisualInteractionSource
• Inertie : à partir de la vitesse programmatique ou d’un mouvement utilisateur, les propriétés d’InteractionTracker s’animent sous une courbe d’inertie
• CustomAnimation : animation personnalisée ciblant directement une propriété d’InteractionTracker

Machine à États du Suivi d'Interaction

Comme mentionné précédemment, InteractionTracker est un ordinateur d’état avec 4 états, chacun pouvant passer à l’un des quatre autres états. (Pour plus d’informations sur la façon dont InteractionTracker passe entre ces états, consultez la documentation de la classe InteractionTracker .)

State	Description
Idle	Pas d’entrées actives, de conduite ou d’animations
Interaction en cours	Entrée utilisateur active détectée
Inertie	Mouvement actif résultant d’une entrée active ou d’une vitesse de programmation
AnimationPersonnalisée	Mouvement actif résultant d’une animation personnalisée

Dans chacun des cas où l’état d’InteractionTracker change, un événement (ou rappel) est généré que vous pouvez écouter. Pour que vous écoutiez ces événements, ils doivent implémenter l’interface IInteractionTrackerOwner et créer leur objet InteractionTracker avec la méthode CreateWithOwner. Le diagramme suivant décrit également quand les différents événements sont déclenchés.

Utilisation de VisualInteractionSource

Pour que InteractionTracker soit piloté par Input, vous devez connecter un VisualInteractionSource (VIS) à celui-ci. Le VIS est créé en tant qu’objet complémentaire à l’aide d’une CompositionVisual pour définir :

1. Région de détection des interactions dans laquelle les données d'entrée seront suivies, et où les gestes dans l'espace de coordonnées sont détectés.
2. Les configurations d'entrée qui seront détectées et routées, dont quelques-unes incluent :
   • Mouvements détectables : Position X et Y (défilement horizontal et vertical), Zoom (pincement)
   • Inertie
   • Rails & Chaînage
   • Modes de redirection : les données d’entrée redirigées automatiquement vers InteractionTracker

Note

Étant donné que le VisualInteractionSource est créé en fonction de la position de point d'impact et de l'espace de coordonnées d'un Visual, il est recommandé de ne pas utiliser un Visual qui sera en mouvement ou changeant de position.

Note

Vous pouvez utiliser plusieurs instances de VisualInteractionSource avec le même InteractionTracker s’il existe plusieurs zones de test. Toutefois, le cas le plus courant consiste à utiliser un seul VIS.

VisualInteractionSource est également responsable de la gestion lorsque les données d’entrée provenant de différentes modalités (tactile, PTP, Pen) sont acheminées vers InteractionTracker. Ce comportement est défini par la propriété ManipulationRedirectionMode. Par défaut, toutes les entrées de pointeur sont envoyées au thread d’interface utilisateur et l’entrée Precision Touchpad est envoyée à VisualInteractionSource et InteractionTracker.

Par conséquent, si vous souhaitez que Touch et Pen (Creators Update) pilotent une manipulation via un Élément VisualInteractionSource et InteractionTracker, vous devez appeler la méthode VisualInteractionSource.TryRedirectForManipulation. Dans l’extrait de code court ci-dessous d’une application XAML, la méthode est appelée lorsqu’un événement tactile survient sur l’UIElement Grid le plus haut :

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Liaison avec ExpressionAnimations

Lorsque vous utilisez InteractionTracker pour piloter une expérience de manipulation, vous interagissez principalement avec les propriétés Scale et Position. Comme d'autres propriétés de CompositionObject, ces propriétés peuvent être à la fois la cible et être référencées dans des animations de composition, le plus souvent des ExpressionAnimations.

Pour utiliser InteractionTracker dans une expression, utilisez la propriété Position (ou Scale) du tracker, comme illustré dans l’exemple ci-dessous. Comme la propriété d’InteractionTracker est modifiée en raison de l’une des conditions décrites précédemment, la sortie de l’expression change également.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Note

Lorsque vous référencez la position d’InteractionTracker dans une expression, vous devez annuler la valeur de l’expression résultante pour qu’elle se déplace dans la direction correcte. La progression d'InteractionTracker à partir de l'origine sur un graphique vous permet de réfléchir à son avancement en coordonnées « réelles », telles que la distance par rapport à son origine.

Démarrer

Pour commencer à utiliser InteractionTracker pour créer des expériences de manipulation personnalisées :

1. Créez votre objet InteractionTracker à l’aide d’InteractionTracker.Create ou d’InteractionTracker.CreateWithOwner.
   • (Si vous utilisez CreateWithOwner, veillez à implémenter l’interface IInteractionTrackerOwner.)
2. Définissez la position Min et Max de votre élément InteractionTracker nouvellement créé.
3. Créez votre VisualInteractionSource avec un CompositionVisual.
   • Vérifiez que le visuel que vous passez n'est pas de taille nulle. Sinon, il ne sera pas soumis à un test de collision correctement.
4. Définissez les propriétés de VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Rails & Chaînage
5. Ajoutez VisualInteractionSource à InteractionTracker à l’aide d’InteractionTracker.InteractionSources.Add.
6. Configurez TryRedirectForManipulation pour détecter les entrées Tactile et stylet.
   • Pour XAML, cela est généralement effectué sur l’événement PointerPressed d’UIElement.
7. Créez une ExpressionAnimation qui référence la position d'un InteractionTracker et cible la propriété d'un CompositionObject.

Voici un extrait de code court qui montre #1 à 5 en action :

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Pour obtenir des utilisations plus avancées d’InteractionTracker, consultez les articles suivants :

• Créer des points d’ancrage avec InertieModifiers
• Glisser pour actualiser avec SourceModifiers