Mejora de las experiencias existentes de ScrollViewer

En este artículo se explica cómo usar un ScrollViewer XAML de WinUI y ExpressionAnimations para crear experiencias dinámicas de movimiento controladas por entrada.

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é construir sobre ScrollViewer?

Normalmente, usas el ScrollViewer XAML existente para crear una superficie desplazable y zoomable para el contenido de la aplicación. Con la introducción del lenguaje Fluent Design, ahora también deberá centrarse en cómo utilizar el desplazamiento o el zoom sobre una superficie para potenciar otras experiencias de movimiento. Por ejemplo, usar el desplazamiento para controlar una animación de desenfoque en un fondo o fijar la posición de un "encabezado fijo".

En estos escenarios, estás aprovechando el comportamiento o las experiencias de manipulación, como El desplazamiento y el zoom para hacer que otras partes de la aplicación sean más dinámicas. A su vez, permiten que la aplicación se sienta más cohesiva, lo que hace que las experiencias sean más memorables en los ojos de los usuarios finales. Al hacer que la interfaz de usuario de la aplicación sea más memorable, los usuarios finales interactuarán con la aplicación con más frecuencia y durante períodos más largos.

¿Qué puede desarrollar utilizando ScrollViewer?

Puede aprovechar la posición de scrollViewer para crear una serie de experiencias dinámicas:

• Parallax: usa la posición de ScrollViewer para mover el contenido de fondo o de primer plano a una velocidad relativa respecto a la posición de desplazamiento.
• StickyHeaders: use la posición de un ScrollViewer para animar y "pegar" un encabezado a una posición.
• Efectos impulsados por la entrada: utiliza la posición de un visor de desplazamiento para animar un efecto de composición como el desenfoque.

En general, haciendo referencia a la posición de un ScrollViewer con ExpressionAnimation, puede crear una animación que cambie dinámicamente en función del desplazamiento.

Uso de ScrollViewerManipulationPropertySet

Para crear estas experiencias dinámicas mediante un ScrollViewer XAML, debes poder hacer referencia a la posición de desplazamiento en una animación. Para ello, se accede a un CompositionPropertySet del ScrollViewer XAML llamado ScrollViewerManipulationPropertySet. ScrollViewerManipulationPropertySet contiene una sola propiedad Vector3 denominada Translation que proporciona acceso a la posición de desplazamiento del ScrollViewer. A continuación, puede hacer referencia a esto como cualquier otro CompositionPropertySet en su ExpressionAnimation.

Pasos generales para empezar:

1. Acceda a ScrollViewerManipulationPropertySet a través de ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Cree una animación de expresiones que referencia la propiedad Translation del ConjuntoDePropiedades.
   • No olvide establecer el parámetro de referencia.
3. Establecer como destino la propiedad de CompositionObject con ExpressionAnimation.

Nota:

Se recomienda asignar el PropertySet devuelto desde el método GetScrollViewerManipulationPropertySet a una variable de clase. Esto garantiza que el conjunto de propiedades no se limpia mediante la recolección de elementos no utilizados y, por tanto, no tiene ningún efecto en expressionAnimation en el que se hace referencia. ExpressionAnimations no mantienen una referencia fuerte a ninguno de los objetos usados en la ecuación.

Ejemplo

Echemos un vistazo a cómo se reúne el ejemplo Parallax que se muestra arriba. Como referencia, todo el código fuente de la aplicación se encuentra en el repositorio window UI Dev Labs en GitHub.

Lo primero es obtener una referencia a ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

El siguiente paso es crear la ExpressionAnimation que define una ecuación que utiliza la posición de desplazamiento del ScrollViewer.

_parallaxExpression = compositor.CreateExpressionAnimation();
_parallaxExpression.SetScalarParameter("StartOffset", 0.0f);
_parallaxExpression.SetScalarParameter("ParallaxValue", 0.5f);
_parallaxExpression.SetScalarParameter("ItemHeight", 0.0f);
_parallaxExpression.SetReferenceParameter("ScrollManipulation", _scrollProperties);
_parallaxExpression.Expression = "(ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight)) * ParallaxValue - (ScrollManipulation.Translation.Y + StartOffset - (0.5 * ItemHeight))";

Nota:

También puede usar las clases auxiliares expressionBuilder para construir esta misma expresión sin necesidad de cadenas:

var scrollPropSet = _scrollProperties.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var parallaxValue = 0.5f;
var parallax = (scrollPropSet.Translation.Y + startOffset);
_parallaxExpression = parallax * parallaxValue - parallax;

Por último, tome esta animación de expresión y tenga como destino el objeto visual que desea paralaje. En este caso, es la imagen de cada uno de los elementos de la lista.

Visual visual = ElementCompositionPreview.GetElementVisual(image);
visual.StartAnimation("Offset.Y", _parallaxExpression);