Animaciones controladas por entradas

En este artículo se proporciona una introducción a InputAnimation API en aplicaciones de WinUI y Windows App SDK, y se recomienda cómo usar estos tipos de animaciones en tu interfaz de usuario.

Prerrequisitos

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

• Animaciones basadas en relaciones

Movimiento suave controlado por interacciones del usuario

En el lenguaje Fluent Design, la interacción entre los usuarios finales y las aplicaciones es de suma importancia. Las aplicaciones no solo tienen que tener el aspecto adecuado, sino que también deben responder de forma natural y dinámica a los usuarios que interactúan con ellas. Esto significa que cuando se coloca un dedo en la pantalla, la interfaz de usuario debe reaccionar de manera fluida a la variación de la entrada; el desplazamiento debe sentirse suave y seguir el movimiento de un dedo a través de la pantalla.

Creación de una interfaz de usuario que responda dinámica y fluidamente a la entrada del usuario resulta en mayor interacción del usuario, el movimiento ahora no solo luce bien, sino que también se siente bien y natural al interactuar los usuarios con las diversas experiencias de interfaz de usuario. Esto permite a los usuarios finales conectarse más fácilmente con su aplicación, lo que hace que la experiencia sea más memorable y agradable.

Ampliar más allá del mero toque

Aunque la función táctil es una de las interfaces más comunes que usan los usuarios finales para manipular el contenido de la interfaz de usuario, también usarán otras modalidades de entrada, como el mouse y el lápiz. En estos casos, es importante que los usuarios finales perciban que la interfaz de usuario responde dinámicamente a su entrada, independientemente de la modalidad de entrada que elija usar. Debe ser consciente de las diferentes modalidades de entrada al diseñar experiencias de movimiento controladas por entrada.

Diferentes experiencias de movimiento impulsadas por la entrada

El espacio InputAnimation proporciona varias experiencias diferentes para crear movimiento de respuesta dinámica. Al igual que el resto del sistema de animación de composición de Windows App SDK, estas animaciones controladas por entrada funcionan en un subproceso independiente, lo que ayuda a contribuir a la experiencia de movimiento dinámico. Sin embargo, en algunos casos en los que la experiencia aprovecha los componentes y controles XAML existentes, las partes de esas experiencias siguen enlazadas al subproceso de la interfaz de usuario.

Hay tres experiencias básicas que se crean al crear animaciones dinámicas de movimiento controladas por entrada:

1. Mejora de las experiencias de ScrollView existentes: habilita la posición de un ScrollViewer XAML para impulsar experiencias de animación dinámicas.
2. Experiencias basadas en la posición del puntero: utilice la posición de un cursor en un UIElement sometido a pruebas de impacto para generar experiencias de animación dinámicas.
3. Experiencias de manipulación personalizadas con InteractionTracker: cree una experiencia de manipulación totalmente personalizada externa al hilo de ejecución con InteractionTracker (por ejemplo, un lienzo para desplazarse o hacer zoom).

Mejora de las experiencias existentes de ScrollViewer

Una de las formas comunes de crear experiencias más dinámicas es crear sobre un control ScrollViewer XAML existente. En estas situaciones, aprovechará la posición de desplazamiento de un ScrollViewer para crear componentes adicionales de la interfaz de usuario que hacen que una experiencia de desplazamiento sencilla sea más dinámica. Algunos ejemplos incluyen encabezados Sticky/Shy y Parallax.

Al crear estos tipos de experiencias, hay una fórmula general que se debe seguir:

1. Accede a ScrollManipulationPropertySet fuera del ScrollViewer XAML que quieres dirigir una animación.
   • Hecho a través de la API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement)
   • Devuelve un objeto CompositionPropertySet que contiene una propiedad denominada Translation.
2. Cree una expresión de composiciónAnimation con una ecuación que haga referencia a la propiedad Translation.
3. Inicie la animación en la propiedad compositionObject.

Para obtener más información sobre cómo crear estas experiencias, consulta Mejorar las experiencias existentes de ScrollViewer.

Experiencias basadas en posición de puntero

Otra experiencia dinámica común que implica la entrada es impulsar una animación basada en la posición de un puntero, como un cursor del mouse. En estas situaciones, los desarrolladores aprovechan la ubicación de un cursor cuando se realiza una prueba de impacto dentro de un UIElement XAML, lo que hace posible crear experiencias como Spotlight Reveal.

Al crear estos tipos de experiencias, hay una fórmula general que se debe seguir:

1. Obtenga acceso a PointerPositionPropertySet de un UIElement XAML que deseas conocer la posición del cursor cuando se realice la prueba de pulsación.
   • Hecho a través de la API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement)
   • Devuelve un objeto CompositionPropertySet que contiene una propiedad denominada Position.
2. Cree una Animación de Expresión de Composición con una ecuación que haga referencia a la propiedad Posición.
3. Inicie la animación en la propiedad compositionObject.

Experiencias de manipulación personalizadas con InteractionTracker

Uno de los desafíos con el uso de un ScrollViewer XAML es que está enlazado al subproceso de la interfaz de usuario. Como resultado, la experiencia de desplazamiento y zoom puede a menudo provocar un retraso y vibrar si el hilo de la interfaz de usuario se ocupa excesivamente y da como resultado una experiencia desagradable. Además, no es posible personalizar muchos aspectos de la experiencia ScrollViewer. InteractionTracker se creó para resolver ambos problemas proporcionando un conjunto de bloques de creación para crear experiencias de manipulación personalizadas que se ejecutan en un subproceso independiente.

Al crear experiencias con InteractionTracker, hay una fórmula general que se debe seguir:

1. Cree el objeto InteractionTracker y defina sus propiedades.
2. Cree VisualInteractionSources para cualquier CompositionVisual que deba capturar datos de entrada para que InteractionTracker los consuma.
3. Crear un Composition ExpressionAnimation con una ecuación que referencie la propiedad Position de InteractionTracker.
4. Inicie la animación en la propiedad de un objeto Visual de composición que desea controlar mediante InteractionTracker.