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.
Prérequis
Ici, nous partons du principe que vous connaissez les concepts abordés dans ces articles :
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 passe-t-il si vous vouliez différencier les contrôles communs ? 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 : apportez des expériences de mouvement de vie qui illustrent mieux leur personnalisation et leur langage de conception personnalisé. À partir du haut, vous avez accès au bon ensemble de blocs de construction pour personnaliser complètement une expérience de manipulation, à partir de la façon dont le mouvement doit répondre avec le doigt sur et hors de l’écran pour aligner les points 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, de suppression/de suppression
- 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 a été introduit dans l’espace de noms Windows.UI.Composition.Interactions dans la version 10586 du SDK. InteractionTracker active :
- Flexibilité complète : nous voulons que vous puissiez personnaliser et adapter chaque aspect d’une expérience de manipulation ; en particulier, 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 destiné à établir une liaison à une CompositionAnimation pour créer le 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 fois la CompositionVisual utilisée pour les tests de positionnement ainsi que d’autres propriétés de configuration d’entrée.
En tant qu’ordinateur d’état, les propriétés d’InteractionTracker peuvent être pilotées par l’un des éléments suivants :
- Interaction utilisateur directe : l’utilisateur final manipule directement dans la région de test d’accès 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
InteractionTracker State Machine
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 section Documentation de classe InteractionTracker.)
| State | Description |
|---|---|
| Idle | Pas d’entrées actives, de conduite ou d’animations |
| Interaction | Entrée utilisateur active détectée |
| Inertie | Mouvement actif résultant d’une entrée active ou d’une vitesse de programmation |
| CustomAnimation | 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 :
- Région de test d’accès à laquelle l’entrée sera suivie et les mouvements d’espace de coordonnées sont détectés dans
- Les configurations d’entrée qui seront détectées et routées, voici quelques-unes des options suivantes :
- Mouvements détectables : position X et Y (mouvement panoramique horizontal et vertical), Échelle (pincement)
- Inertie
- Rails et Chaînage
- Modes de redirection : les données d’entrée redirigées automatiquement vers InteractionTracker
Remarque
Étant donné que VisualInteractionSource est créé en fonction de la position de test de positionnement et de l’espace de coordonnées d’un visuel, il est recommandé de ne pas utiliser un visuel qui sera en mouvement ou en position de modification.
Remarque
Vous pouvez utiliser plusieurs instances VisualInteractionSource avec le même InteractionTracker s’il existe plusieurs régions de test de positionnement. 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 se produit en haut de la grille UIElement :
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 CompositionObject, ces propriétés peuvent être à la fois la cible et référencées dans un CompositionAnimation, le plus souvent ExpressionAnimations.
Pour utiliser InteractionTracker dans une expression, référencez la propriété Position (ou Scale) du suivi comme 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;
Remarque
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. Cela est dû au fait que la progression d’InteractionTracker à partir de l’origine sur un graphique et vous permet de réfléchir à la progression d’InteractionTracker en coordonnées « réels », telles que la distance de son origine.
Mise en route
Pour commencer à utiliser InteractionTracker pour créer des expériences de manipulation personnalisées :
- Créez votre objet InteractionTracker à l’aide d’InteractionTracker.Create ou d’InteractionTracker.CreateWithOwner.
- (Si vous utilisez CreateWithOwner, veillez à implémenter l’interface IInteractionTrackerOwner.)
- Définissez la position Min et Max de votre élément InteractionTracker nouvellement créé.
- Créez votre VisualInteractionSource avec un CompositionVisual.
- Vérifiez que le visuel que vous passez a une taille différente de zéro. Sinon, il ne sera pas testé correctement.
- Définissez les propriétés de VisualInteractionSource.
- VisualInteractionSourceRedirectionMode
- PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
- Rails et Chaînage
- Ajoutez VisualInteractionSource à InteractionTracker à l’aide d’InteractionTracker.InteractionSources.Add.
- Configurez TryRedirectForManipulation pour le moment où l’entrée Tactile et Pen est détectée.
- Pour XAML, cela est généralement effectué sur l’événement PointerPressed d’UIElement.
- Créez une ExpressionAnimation qui référence la position d’InteractionTracker et ciblez la propriété d’un Objet 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 :