Compartilhar via

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 orientadas por entrada.

Pré-requisitos

Aqui, presumimos que você esteja familiarizado com os conceitos discutidos nestes artigos:

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

Por que criar em cima do ScrollViewer?

Normalmente, você usa o ScrollViewer XAML existente para criar uma superfície rolável e zoomá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 impulsionar outras experiências de movimento. Por exemplo, usar a rolagem para conduzir uma animação de desfoque de fundo ou conduzir 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 aplicativo mais dinâmicas. Isso, por sua vez, permite que o aplicativo se sinta 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 se envolverão com o aplicativo com mais frequência e por períodos mais longos.

O que você pode criar com base no ScrollViewer?

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

  • Parallax – use a posição de rolagem do ScrollViewer para mover o conteúdo em primeiro plano ou em segundo plano a uma taxa relativa à posição de rolagem.
  • StickyHeaders – utilize a posição de um ScrollViewer para animar e fixar um cabeçalho em uma determinada posição
  • efeitos Input-Driven – use a posição de um Scrollviewer para animar um efeito de composição, como Desfoque.

Em geral, ao fazer referência à posição de um ScrollViewer com uma ExpressionAnimation, você pode criar uma animação que muda dinamicamente em relação à quantidade de rolagem.

Visão de lista com paralaxe

Um cabeçalho tímido

Usando ScrollViewerManipulationPropertySet

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

Etapas gerais para começar:

  1. Acesse o ScrollViewerManipulationPropertySet via 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 eliminado pelo coletor de lixo e, assim, não tenha efeito algum sobre a ExpressionAnimation na qual é referenciado. ExpressionAnimations não mantém uma referência forte a nenhum dos objetos usados na equação.

Exemplo

Vamos ver como o exemplo de Parallax mostrado acima é montado. Para referência, todo o código-fonte do aplicativo é encontrado no repositório Dev Labs da interface do usuário da janela no GitHub.

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

_scrollProperties =
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(myScrollViewer);

A próxima etapa é criar a 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ê usa essa ExpressionAnimation e a direciona ao Visual que deseja aplicar a paralaxe. Nesse caso, é a imagem de cada um dos itens na lista.

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