Aprimorar as experiências existentes do ScrollViewer

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

Pré-requisitos

Aqui, presumimos que você esteja familiarizado com os conceitos abordados neste artigo:

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

Por que construir em cima do ScrollViewer?

Normalmente, você usa o ScrollViewer XAML existente para criar uma superfície rolável e ampliável para o conteúdo do aplicativo. Com a introdução da linguagem Fluent Design, agora você também deve se concentrar em como usar o ato de rolar ou ampliar uma superfície para gerar outras experiências de movimento. Por exemplo, usar a rolagem para conduzir uma animação de desfoque de um plano de fundo ou direcionar a posição de um "cabeçalho fixo".

Nesses cenários, você está aproveitando as experiências de comportamento ou manipulação, como rolagem e zoom, para tornar outras partes do seu aplicativo mais dinâmicas. Isso, por sua vez, permite que o aplicativo pareça mais coeso, tornando as experiências mais memoráveis aos olhos dos usuários finais. Ao tornar a interface do usuário do aplicativo mais memorável, os usuários finais interagirão com o aplicativo com mais frequência e por períodos mais longos.

O que você pode construir em cima do ScrollViewer?

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

• Paralaxe – use a posição de um ScrollViewer para mover o conteúdo em segundo plano ou em primeiro plano a uma taxa relativa à posição de rolagem.
• StickyHeaders – use a posição de um ScrollViewer para animar e "colar" um cabeçalho em uma posição
• Efeitos orientados por entrada – use a posição de um Scrollviewer para animar um efeito de composição, como Desfoque.

Em geral, referenciando a posição de um ScrollViewer com um ExpressionAnimation, você pode criar uma animação que altera dinamicamente em relação à quantidade de rolagem.

Usando ScrollViewerManipulationPropertySet

Para criar essas experiências dinâmicas usando um ScrollViewer XAML, você deve ser capaz de fazer referência à posição de rolagem em uma animação. Isso é feito acessando um CompositionPropertySet fora do ScrollViewer XAML chamado ScrollViewerManipulationPropertySet. O ScrollViewerManipulationPropertySet contém uma única propriedade Vector3 chamada Translation que fornece acesso à posição de rolagem do ScrollViewer. Em seguida, você pode fazer referência a isso como qualquer outro CompositionPropertySet em seu ExpressionAnimation.

Etapas gerais para começar:

1. Acesse o ScrollViewerManipulationPropertySet por meio de ElementCompositionPreview.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(ScrollViewer scroller)
2. Crie um ExpressionAnimation que faça referência à propriedade Translation do PropertySet.
   • Não se esqueça de definir o Parâmetro de Referência!
3. Direcione a propriedade de um CompositionObject com o ExpressionAnimation.

Observação

É recomendável que você atribua o PropertySet retornado do método GetScrollViewerManipulationPropertySet a uma variável de classe. Isso garante que o conjunto de propriedades não seja limpo pela Coleta de lixo e, portanto, não tenha nenhum efeito sobre a ExpressionAnimation em que ele é referenciado. ExpressionAnimations não mantém uma referência forte a nenhum dos objetos usados na equação.

Exemplo

Vamos dar uma olhada em como o exemplo de paralaxe mostrado acima é montado. Para referência, todo o código-fonte do aplicativo é encontrado no repositório do Windows UI Dev Labs no GitHub.

A primeira coisa é obter uma referência ao ScrollViewerManipulationPropertySet.

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

A próxima etapa é criar o ExpressionAnimation que define uma equação que utiliza a posição de rolagem 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))";

Observação

Você também pode utilizar classes auxiliares do ExpressionBuilder para construir essa mesma expressão sem a necessidade de cadeias de caracteres:

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

Por fim, você pega esse ExpressionAnimation e direciona o Visual que deseja paralaxe. Nesse caso, é a imagem de cada um dos itens da lista.

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