Animações orientadas por entrada

Este artigo fornece uma introdução à API InputAnimation nas aplicações WinUI e Windows App SDK, e recomenda como usar este tipo de animações na sua interface.

Pré-requisitos

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

• Animações baseadas em relações

Movimento suave impulsionado pelas interações com o utilizador

Na linguagem Fluent Design, a interação entre os utilizadores finais e as aplicações é de extrema importância. As aplicações não só têm de ter o aspeto adequado, mas também responder de forma natural e dinâmica aos utilizadores que interagem com elas. Isto significa que, quando um dedo é colocado no ecrã, a UI deve reagir graciosamente às variações nos graus de entrada; o scroll deve ser suave e acompanhar o movimento de um dedo a deslizar pelo ecrã.

Construir uma interface que responda de forma dinâmica e fluida às entradas do utilizador resulta num maior envolvimento – o Motion agora não só tem bom aspeto, como também se sente bem e natural quando os utilizadores interagem com as diferentes experiências de interface. Isto permite que os utilizadores finais se conectem mais facilmente com a sua aplicação, tornando a experiência mais memorável e agradável.

Expandindo para além do simples toque

Embora o toque seja uma das interfaces mais comuns que os utilizadores finais usam para manipular o conteúdo da interface, também utilizam várias outras modalidades de entrada, como rato e caneta. Nestes casos, é importante que os utilizadores finais percebam que a sua interface responde dinamicamente à sua entrada, independentemente da modalidade de entrada que escolham usar. Deves estar atento às diferentes modalidades de input ao desenhar experiências de movimento orientadas por input.

Diferentes Experiências de Movimento Baseadas em Input

O espaço InputAnimation oferece várias experiências diferentes para criar movimentos que respondem dinamicamente. Tal como o resto do sistema Windows App SDK Composition Animation, estas animações orientadas por inputs funcionam num thread independente, o que contribui para a experiência dinâmica de movimento. No entanto, em alguns casos em que a experiência aproveita controlos e componentes XAML existentes, partes dessas experiências continuam ligadas ao thread da interface.

Existem três experiências principais que cria ao criar animações dinâmicas de movimento baseadas em inputs:

1. Melhorar as Experiências Existentes no ScrollView – permitir que a posição de um ScrollViewer XAML impulsione experiências de animação dinâmicas.
2. Experiências orientadas pela posição do ponteiro – utilize a posição de um cursor num UIElement testado para impulsionar experiências dinâmicas de animação.
3. Experiências de manipulação personalizadas com o InteractionTracker – crie experiências de manipulação totalmente personalizadas, fora do fio, com o InteractionTracker (como uma tela de scroll/zoom).

Melhoria das Experiências Existentes no ScrollViewer

Uma das formas comuns de criar experiências mais dinâmicas é construir sobre um controlo XAML ScrollViewer existente. Nestas situações, aproveita a posição de scroll de um ScrollViewer para criar componentes adicionais de interface que tornam uma experiência simples de scroll mais dinâmica. Alguns exemplos incluem cabeçalhos Sticky/Shy e Parallax.

Ao criar este tipo de experiências, existe uma fórmula geral a seguir:

1. Aceda ao ScrollManipulationPropertySet do ScrollViewer XAML que pretende usar para conduzir uma animação.
   • Feito através da API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element)
   • Devolve um CompositionPropertySet contendo uma propriedade chamada Translação
2. Crie uma Composition ExpressionAnimation com uma equação que faça referência à propriedade de Translação.
3. Inicia a animação numa propriedade do CompositionObject.

Para mais informações sobre como construir estas experiências, consulte Melhorar experiências existentes no ScrollViewer.

Experiências baseadas na posição do ponteiro

Outra experiência dinâmica comum que envolve input é conduzir uma animação baseada na posição de um apontador, como um cursor de rato. Nestas situações, os programadores aproveitam a localização de um cursor quando testados dentro de um UIElement XAML, o que torna possível criar experiências como o Spotlight Rivel.

Ao criar este tipo de experiências, existe uma fórmula geral a seguir:

1. Aceda ao PointerPositionPropertySet de um UIElement XAML que deseja saber a posição do cursor quando se realiza o teste de colisão.
   • Feito através da API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element)
   • Devolve um CompositionPropertySet contendo uma propriedade chamada Posição
2. Crie uma CompositionExpressionAnimation com uma equação que faça referência à propriedade Position.
3. Inicia a animação numa propriedade do CompositionObject.

Experiências de manipulação personalizada com o InteractionTracker

Um dos desafios ao utilizar um ScrollViewer XAML é que está ligado ao thread da interface. Como resultado, a experiência de scroll e zoom pode muitas vezes atrasar e tremer se a thread da interface ficar ocupada e resultar numa experiência pouco apelativa. Além disso, não é possível personalizar muitos aspetos da experiência ScrollViewer. O InteractionTracker foi criado para resolver ambos os problemas, fornecendo um conjunto de blocos de construção para criar experiências de manipulação personalizadas que são executadas num thread independente.

Ao criar experiências com o InteractionTracker, existe uma fórmula geral a seguir:

1. Crie o seu objeto InteractionTracker e defina as suas propriedades.
2. Crie VisualInteractionSources para qualquer CompositionVisual que deva captar entrada para o InteractionTracker processar.
3. Crie uma Composition ExpressionAnimation com uma equação que faça referência à propriedade Position do InteractionTracker.
4. Inicie a animação numa propriedade do Composition Visual que pretende ser controlada pelo InteractionTracker.