Animaciones controladas por entradasInput-driven animations

En este artículo se proporciona una introducción a la API de InputAnimation y se recomienda usar estos tipos de animaciones en la interfaz de usuario.This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

PrerrequisitosPrerequisites

Aquí se supone que está familiarizado con los conceptos descritos en estos artículos:Here, we assume that you're familiar with the concepts discussed in these articles:

Movimiento suave controlado por las interacciones del usuarioSmooth motion driven from user interactions

En el lenguaje de diseño fluida, la interacción entre los usuarios finales y las aplicaciones es de la máxima importancia.In the Fluent Design language, interaction between end users and apps is of the utmost importance. Las aplicaciones no solo tienen que buscar el elemento, sino que también responden de forma natural y dinámica a los usuarios que interactúan con ellos.Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. Esto significa que cuando se coloca un dedo en la pantalla, la interfaz de usuario debe reaccionar correctamente a los grados de entrada cambiantes; el desplazamiento debe ser suave y ceñirse a la panorámica de un dedo por la pantalla.This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

La creación de una interfaz de usuario que responda de forma dinámica y fluida a los resultados de los datos proporcionados por el usuario con mayor interacción de usuario: el movimiento ahora no solo tiene un buen aspecto, sino que es bueno y natural cuando los usuarios interactúan con sus diferentes experiencias de IU.Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. Esto permite a los usuarios finales conectarse con mayor facilidad a su aplicación, lo que hace que la experiencia sea más memorable y agradables.This enables end users to more easily connect with your application, making the experience more memorable and delightful.

Expandir solo la entrada táctilExpanding past just touch

Aunque Touch es una de las interfaces más comunes que los usuarios finales usan para manipular el contenido de la interfaz de usuario, también usarán otras modalidades de entrada, como el mouse y el lápiz.Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. En estos casos, es importante que los usuarios finales perciban que la interfaz de usuario responde de forma dinámica a la entrada, independientemente de qué modal de entrada decida usar.In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. Debe ser Cognizant de las distintas modalidades de entrada al diseñar experiencias de movimiento controladas por la entrada.You should be cognizant of the different input modalities when designing input-driven motion experiences.

Experiencias de movimiento controladas por entrada diferentesDifferent Input-Driven Motion Experiences

El espacio InputAnimation proporciona varias experiencias diferentes para crear un movimiento de respuesta dinámica.The InputAnimation space provides several different experiences for you to create dynamically responding motion. Al igual que el resto del sistema de animación de la interfaz de usuario de Windows, estas animaciones controladas por entrada operan en un subproceso independiente, lo que ayuda a contribuir a la experiencia de movimiento dinámico.Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. Sin embargo, en algunos casos en los que la experiencia aprovecha los controles y componentes de XAML existentes, algunas de esas experiencias siguen siendo enlazadas a subprocesos de interfaz de usuario.However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

Hay tres experiencias principales que se crean al compilar animaciones de movimiento basadas en la entrada dinámica:There are three core experiences that you create when building dynamic input-driven motion animations:

  1. Mejora de las experiencias de ScrollView existentes: habilita la posición de un ScrollViewer de XAML para impulsar experiencias de animación dinámicas.Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. Experiencias orientadas a la posición del puntero: Use la posición de un cursor en un UIElement de la prueba de posicionamiento para impulsar experiencias dinámicas de animación.Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. Experiencias de manipulación personalizada con InteractionTracker: cree una experiencia de manipulación completamente personalizada y sin subproceso con InteractionTracker (por ejemplo, un lienzo de desplazamiento y zoom).Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

Mejorar las experiencias de ScrollViewer existentesEnhancing Existing ScrollViewer Experiences

Una de las formas más comunes de crear experiencias más dinámicas es basarse en un control ScrollViewer XAML existente.One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. En estas situaciones, se aprovecha la posición de desplazamiento de un ScrollViewer para crear componentes adicionales de la interfaz de usuario que permiten una experiencia de desplazamiento simple más dinámica.In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. Algunos ejemplos son los encabezados de permanencia y tímida y el Parallax.Some examples include Sticky/Shy Headers and Parallax.

Vista de lista con Parallax

Un encabezado tímida

Al crear estos tipos de experiencias, hay una fórmula general que debe seguir:When creating these types of experiences, there is a general formula to follow:

  1. Obtenga acceso a ScrollManipulationPropertySet fuera de la ScrollViewer de XAML que quiere controlar una animación.Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • Se realiza a través de la API ElementCompositionPreview. GetScrollViewerManipulationPropertySet (Elemento UIElement)Done via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • Devuelve un CompositionPropertySet que contiene una propiedad denominada Translation .Returns a CompositionPropertySet containing a property called Translation
  2. Cree una composición ExpressionAnimation con una ecuación que haga referencia a la propiedad Translation.Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. Inicie la animación en la propiedad de un CompositionObject.Start the animation on a CompositionObject’s property.

Para obtener más información sobre la creación de estas experiencias, vea mejorar las experiencias de ScrollViewer existentes.For more info on building these experiences, see Enhance existing ScrollViewer experiences.

Experiencias orientadas a la posición del punteroPointer Position-driven experiences

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.Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. En estas situaciones, los desarrolladores aprovechan la ubicación de un cursor cuando se prueba el posicionamiento en un UIElement de XAML que permite crear experiencias como Spotlight.In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

Ejemplo de Spotlight de puntero

Ejemplo de rotación de puntero

Al crear estos tipos de experiencias, hay una fórmula general que debe seguir:When creating these types of experiences, there is a general formula to follow:

  1. Acceda a PointerPositionPropertySet fuera de un UIElement de XAML que quieras conocer la posición del cursor cuando se probó la visita.Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • Se realiza a través de la API ElementCompositionPreview. GetPointerPositionPropertySet (Elemento UIElement)Done via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • Devuelve un CompositionPropertySet que contiene una propiedad denominada Position .Returns a CompositionPropertySet containing a property called Position
  2. Cree un CompositionExpressionAnimation con una ecuación que haga referencia a la propiedad Position.Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. Inicie la animación en la propiedad de un CompositionObject.Start the animation on a CompositionObject’s property.

Experiencias de manipulación personalizada con InteractionTrackerCustom manipulation experiences with InteractionTracker

Uno de los desafíos relacionados con el uso de un ScrollViewer de XAML es que está enlazado al subproceso de interfaz de usuario.One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. Como resultado, la experiencia de desplazamiento y zoom a menudo se puede retrasar y vibrar si el subproceso de la interfaz de usuario está ocupado y tiene como resultado una experiencia no atractiva.As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. Además, no es posible personalizar muchos aspectos de la experiencia de ScrollViewer.In addition, it is not possible to customize many aspects of the ScrollViewer experience. 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.InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

ejemplo de interacciones 3D

Extraer del ejemplo de animación

Al crear experiencias con InteractionTracker, hay una fórmula general que debe seguir:When creating experiences with InteractionTracker, there is a general formula to follow:

  1. Cree el objeto InteractionTracker y defina sus propiedades.Create your InteractionTracker object and define its properties.
  2. Cree VisualInteractionSources para cualquier CompositionVisual que debería capturar la entrada de InteractionTracker que se va a consumir.Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. Cree una composición ExpressionAnimation con una ecuación que haga referencia a la propiedad Position de InteractionTracker.Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. Inicie la animación en la propiedad de un control visual de composición que quiera que esté controlada por InteractionTracker.Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.