Mejora de las experiencias existentes de ScrollViewer

En este artículo se explica cómo usar un ScrollViewer xaml 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 Relation

¿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ías centrarte en cómo usar el acto de desplazarse o hacer zoom en una superficie para generar otras experiencias de movimiento. Por ejemplo, mediante el desplazamiento para controlar una animación de desenfoque de un fondo o controlar la posición de un "encabezado pegajoso".

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é se puede desarrollar a partir de ScrollViewer?

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

• Parallax: utiliza la posición de un ScrollViewer para mover el contenido en primer plano o en el fondo a una tasa relativa a la posición de desplazamiento.
• StickyHeaders: use la posición de un ScrollViewer para animar y "pegar" un encabezado a una posición.
• Input-Driven Efectos: use la posición de un Scrollviewer para animar un efecto de composición como desenfoque.

En general, haciendo referencia a la posición de un ScrollViewer con ExpressionAnimation, puede crear una animación que cambie dinámicamente con respecto a la cantidad de 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 hacerlo, 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 ExpressionAnimation que haga referencia a la propiedad Translation desde el PropertySet.
   • 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. Se garantiza que el conjunto de propiedades no sea eliminado por la recolección de basura y, por lo tanto, no tenga ningún efecto en la ExpressionAnimation en la 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 está compuesto el ejemplo de paralaje mostrado anteriormente. 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 el 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 ExpressionAnimation y dirija al objeto Visual que desea parallax. 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);