Melhorar as experiências existentes no ScrollViewer

Este artigo explica como usar um WinUI XAML ScrollViewer e ExpressionAnimations para criar experiências dinâmicas de movimento orientadas por inputs.

Pré-requisitos

Aqui, assumimos que está familiarizado com os conceitos discutidos nestes artigos:

• Animações orientadas por entrada
• Animações baseadas em relações

Porque construir em cima do ScrollViewer?

Normalmente, utiliza-se o ScrollViewer XAML existente para criar uma superfície deslizável e ampliável para o conteúdo da sua aplicação. Com a introdução da linguagem Fluent Design, deve agora também concentrar-se em como usar o ato de scrollar ou ampliar uma superfície para impulsionar outras experiências de movimento. Por exemplo, usar o deslocamento para implementar uma animação de desfoque de um fundo ou para ajustar a posição de um cabeçalho fixo.

Nestes cenários, estás a aproveitar comportamentos ou experiências de manipulação como o scrolling e o zoom para tornar outras partes da tua aplicação mais dinâmicas. Isto, por sua vez, permite que a aplicação pareça mais coesa, tornando as experiências mais memoráveis aos olhos dos utilizadores finais. Ao tornar a interface da aplicação mais memorável, os utilizadores finais irão interagir com a aplicação com mais frequência e por períodos mais longos.

O que pode construir em cima do ScrollViewer?

Pode aproveitar a posição de um ScrollViewer para construir várias experiências dinâmicas:

• Parallax – use a posição de um ScrollViewer para mover conteúdo de fundo ou em primeiro plano a uma taxa relativa à posição do scroll.
• StickyHeaders – utiliza a posição de um ScrollViewer para animar e "colar" um cabeçalho a uma posição
• Efeitos Baseados em Entrada – use a posição de um ScrollViewer para animar um efeito de composição, como Desfoque.

De um modo geral, ao referenciar a posição de um ScrollViewer com um ExpressionAnimation, consegues criar uma animação que muda dinamicamente em relação à quantidade de scroll.

Usando ScrollViewerManipulationPropertySet

Para criar estas experiências dinâmicas usando um ScrollViewer XAML, deve ser capaz de referenciar a posição do scroll numa animação. Isto é feito acessando um CompositionPropertySet a partir do ScrollViewer XAML denominado ScrollViewerManipulationPropertySet. O ScrollViewerManipulationPropertySet contém uma única propriedade Vector3 chamada Translação, que dá acesso à posição de rolagem do ScrollViewer. Pode então referir-se a isto como qualquer outro CompositionPropertySet no seu ExpressionAnimation.

Passos gerais para começar:

1. Acede ao ScrollViewerManipulationPropertySet através do ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Crie uma ExpressionAnimation que faça referência à propriedade Translation do PropertySet.
   • Não te esqueças de definir o Parâmetro de Referência!
3. Direcionar a propriedade de um CompositionObject com ExpressionAnimation.

Exemplo

Vamos analisar como a amostra de Parallax mostrada acima está montada. Para referência, todo o código-fonte da aplicação encontra-se no repositório Window UI Dev Labs no GitHub.

A primeira coisa é obter uma referência para o ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

O passo seguinte é criar o ExpressionAnimation que define uma equação que utiliza a posição de scroll do 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))";

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

Por fim, pega nesta animação de expressão e aplica-a ao elemento visual que deseja criar efeito paralaxe. Neste caso, é a imagem de cada um dos itens da lista.

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