Compartir a través de

Mejora de las experiencias existentes de ScrollViewer

  • Artículo

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

Requisitos previos

En este caso, se supone que está familiarizado con los conceptos descritos en estos artículos:

¿Por qué se basa en 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ía centrarse en cómo usar el acto de desplazamiento o zoom de una superficie para impulsar 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é puede crear sobre ScrollViewer?

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

  • Parallax: use la posición de scrollViewer para mover el contenido en segundo plano o en primer plano a una velocidad 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.
  • Efectos controlados por entrada: usa 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 la cantidad de desplazamiento.

Vista de lista con paralaje

Un encabezado tímido

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 obtiene acceso a CompositionPropertySet fuera del ScrollViewer XAML llamado ScrollViewer 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 expressionAnimation.

Pasos generales para empezar:

  1. Acceda a ScrollViewerManipulationPropertySet a través de ElementCompositionPreview.
    • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
  2. Cree una expresiónAnimation que haga referencia a la propiedad Translation desde 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. 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 sólida a ninguno de los objetos usados en la ecuación.

Ejemplo

Echemos un vistazo a cómo se reúne el ejemplo parallax 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 la expresiónAnimation 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 expresiónAnimation y tenga como destino el objeto Visual que desea paralar. 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);