Experiencias de manipulación personalizadas con InteractionTracker

En este artículo se muestra cómo usar InteractionTracker para crear experiencias de manipulación personalizadas.

Prerrequisitos

Aquí se supone que está familiarizado con los conceptos descritos en estos artículos:

• Animaciones controladas por entrada
• Animaciones basadas en relaciones

¿Por qué crear experiencias de manipulación personalizadas?

En la mayoría de los casos, el uso de los controles de manipulación pregenerados es lo suficientemente bueno como para crear experiencias de interfaz de usuario. ¿Pero qué ocurre si desea diferenciar de los controles comunes? ¿Qué ocurre si desea crear una experiencia específica controlada por la entrada o tener una interfaz de usuario en la que un movimiento de manipulación tradicional no es suficiente? Aquí es donde entra en acción la creación de experiencias personalizadas. Permiten a los desarrolladores y diseñadores de aplicaciones ser más creativos: dar vida a experiencias de movimiento que ejemplifiquen mejor su imagen de marca y lenguaje de diseño propio. Desde el principio, se le proporciona acceso al conjunto adecuado de bloques de construcción para personalizar completamente una experiencia de manipulación, desde cómo debe responder el movimiento al contacto del dedo en la pantalla hasta puntos de ajuste y encadenamiento de entradas.

A continuación se muestran algunos ejemplos comunes de cuándo crearía una experiencia de manipulación personalizada:

• Agregar un gesto de deslizamiento personalizado, eliminar o descartar un comportamiento
• Efectos impulsados por la entrada (el paneo provoca que el contenido se vea borroso)
• Controles personalizados con movimientos de manipulación personalizados (ListView personalizado, ScrollViewer, etc.)

¿Por qué usar InteractionTracker?

InteractionTracker está disponible en el espacio de nombres Microsoft.UI.Composition.Interactions para aplicaciones winUI y Windows App SDK. InteractionTracker habilita:

• Flexibilidad completa : queremos que pueda personalizar y adaptar todos los aspectos de una experiencia de manipulación; concretamente, los movimientos exactos que se producen durante o en respuesta a la entrada. Al crear una experiencia de manipulación personalizada con InteractionTracker, todas las perillas que necesita están a su disposición.
• Rendimiento suave : uno de los desafíos de las experiencias de manipulación es que su rendimiento depende del subproceso de la interfaz de usuario. Esto puede afectar negativamente a cualquier experiencia de manipulación cuando la interfaz de usuario está ocupada. InteractionTracker se creó para utilizar el nuevo motor de animación que funciona en un subproceso independiente a 60 FPS, lo que da como resultado un movimiento suave.

Información general: InteractionTracker

Al crear experiencias de manipulación personalizadas, hay dos componentes principales con los que interactúa. Hablaremos primero de lo siguiente:

• InteractionTracker : el objeto principal que mantiene una máquina de estado cuyas propiedades están controladas por la entrada activa del usuario o las actualizaciones directas y animaciones. Está diseñado para asociarse luego a una CompositionAnimation para crear el movimiento de manipulación personalizado.
• VisualInteractionSource : un objeto de complemento que define cuándo y en qué condiciones se envía la entrada a InteractionTracker. Define tanto el CompositionVisual usado para las pruebas de detección de impactos como para otras propiedades de configuración de entrada.

Como máquina de estado, las propiedades de InteractionTracker se pueden controlar mediante cualquiera de las siguientes opciones:

• Interacción directa del usuario: el usuario final está manipulando directamente dentro de la región de prueba de impacto de VisualInteractionSource.
• Inercia: ya sea por la velocidad programática o un gesto de usuario, las propiedades de InteractionTracker se animan siguiendo una curva de inercia.
• CustomAnimation: una animación personalizada dirigida directamente a una propiedad de InteractionTracker

Máquina de Estados de InteractionTracker

Como se mencionó anteriormente, InteractionTracker es una máquina de estado con 4 estados, cada uno de los cuales puede realizar la transición a cualquiera de los otros cuatro estados. (Para obtener más información sobre la transición de InteractionTracker entre estos estados, consulte la documentación de la clase InteractionTracker ).

Estado	Descripción
Inactivo	No hay entradas o animaciones activas, de conducción
Interacción	Entrada de usuario activa detectada
Inercia	Movimiento activo resultante de la velocidad generada por entrada activa o programación
AnimaciónPersonalizada	Movimiento activo resultante de una animación personalizada

En cada uno de los casos en los que cambia el estado de InteractionTracker, se genera un evento (o callback) al que se puede escuchar. Para que escuche estos eventos, deben implementar la interfaz IInteractionTrackerOwner y crear su objeto InteractionTracker con el método CreateWithOwner. En el diagrama siguiente también se describe cuándo se desencadenan los distintos eventos.

Uso de VisualInteractionSource

Para que InteractionTracker esté controlado por Input, debe conectar un VisualInteractionSource (VIS) a este. El VIS se crea como un objeto complementario utilizando CompositionVisual para definir:

1. La región de prueba de impacto en la que se realizará el seguimiento de la entrada y se detectan los gestos en el espacio de coordenadas.
2. Las configuraciones de entrada que se detectarán y serán enrutadas, algunas de las cuales incluyen:
   • Gestos detectables: Posición X e Y (movimiento panorámico horizontal y vertical), Escala (pellizcar)
   • Inercia
   • Raíles y encadenamiento
   • Modos de redireccionamiento: qué datos de entrada se redirigen automáticamente a InteractionTracker

Nota:

Dado que VisualInteractionSource se crea en función de la posición de prueba de contacto y del espacio de coordenadas de un objeto Visual, se recomienda no usar uno que esté en movimiento o varíe de posición.

Nota:

Puede usar varias instancias de VisualInteractionSource con el mismo InteractionTracker si hay varias regiones de prueba de posicionamiento. Sin embargo, el caso más común es usar solo un VIS.

VisualInteractionSource también es responsable de gestionar cuándo los datos de entrada de diferentes modalidades (táctil, PTP, lápiz óptico) se enrutan a InteractionTracker. Este comportamiento se define mediante la propiedad ManipulationRedirectionMode. De forma predeterminada, todas las entradas de puntero se envían al subproceso de la interfaz de usuario, mientras que las entradas del Touchpad de precisión se dirigen a VisualInteractionSource e InteractionTracker.

Por lo tanto, si desea usar la capacidad de Touch y Pen (Creators Update) para controlar una manipulación a través de VisualInteractionSource e InteractionTracker, debe llamar al método VisualInteractionSource.TryRedirectForManipulation. En el fragmento de código corto siguiente de una aplicación XAML, se llama al método cuando se produce un evento de pulsación táctil en la parte superior de UIElement Grid:

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

Vinculación con ExpressionAnimations

Al usar InteractionTracker para impulsar una experiencia de manipulación, interactúa principalmente con las propiedades Scale y Position. Al igual que otras propiedades de CompositionObject, estas propiedades pueden ser tanto el destino como ser referenciadas en una CompositionAnimation, normalmente en ExpressionAnimations.

Para usar InteractionTracker dentro de una expresión, haga referencia a la propiedad Position (o Scale) del rastreador, como en el ejemplo siguiente. Como la propiedad de InteractionTracker se modifica debido a cualquiera de las condiciones descritas anteriormente, también cambia la salida de la expresión.

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

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

Nota:

Al referirse a la posición de InteractionTracker en una expresión, es necesario invertir el valor para que la expresión resultante se mueva en la dirección correcta. Esto se debe a que la progresión de InteractionTracker desde el origen en un gráfico y le permite pensar en la progresión de InteractionTracker en coordenadas "del mundo real", como la distancia desde su origen.

Get Started

Para empezar a usar InteractionTracker para crear experiencias de manipulación personalizadas:

1. Cree el objeto InteractionTracker mediante InteractionTracker.Create o InteractionTracker.CreateWithOwner.
   • (Si usa CreateWithOwner, asegúrese de implementar la interfaz IInteractionTrackerOwner).
2. Establezca la posición mínima y máxima de la InteractionTracker recién creada.
3. Cree su VisualInteractionSource con un CompositionVisual.
   • Asegúrese de que el objeto visual que pase tiene un tamaño distinto de cero. De lo contrario, no se realizará la prueba de impacto correctamente.
4. Establezca las propiedades de VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Raíles y encadenamiento
5. Agregue VisualInteractionSource a InteractionTracker mediante InteractionTracker.InteractionSources.Add.
6. Configure TryRedirectForManipulation para cuando se detecte la entrada táctil y del lápiz.
   • Para XAML, esto suele hacerse en el evento PointerPressed de UIElement.
7. Cree un ExpressionAnimation que haga referencia a la posición de InteractionTracker y apunte a la propiedad de un CompositionObject.

Este es un fragmento de código corto que muestra el número 1 – 5 en acción:

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);
}

Para obtener usos más avanzados de InteractionTracker, consulte los siguientes artículos:

• Creación de puntos de acoplamiento con InertiaModifiers
• Deslizar hacia abajo para actualizar con SourceModifiers