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

Neste artigo, mostramos como usar o InteractionTracker para criar experiências de manipulação personalizadas.

Pré-requisitos

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

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

Por que criar experiências de manipulação personalizadas?

Na maioria dos casos, utilizar os controles de manipulação pré-criados é bom o suficiente para criar experiências de interface do usuário. E se você quisesse se diferenciar dos controles comuns? E se você quisesse criar uma experiência específica orientada pela entrada ou ter uma interface do usuário em que um movimento de manipulação tradicional não fosse suficiente? É aí que entra a criação de experiências personalizadas. Eles permitem que desenvolvedores e designers de aplicativos sejam mais criativos – tragam à vida experiências de movimento que exemplificem melhor sua identidade visual e linguagem de design personalizada. Desde o início, você recebe acesso ao conjunto certo de blocos de construção para personalizar completamente uma experiência de manipulação – desde como o movimento deve responder com o dedo na tela e fora dela até pontos de encaixe e encadeamento de inputs.

Abaixo estão alguns exemplos comuns de quando você criaria uma experiência de manipulação personalizada:

• Adicionando um comportamento personalizado de deslizar e excluir/ignorar.
• Efeitos controlados por entrada (o movimento panorâmico faz com que o conteúdo desfoque)
• Controles personalizados com movimentos de manipulação personalizados (ListView personalizado, ScrollViewer etc.)

Por que usar InteractionTracker?

O InteractionTracker está disponível no namespace Microsoft.UI.Composition.Interactions para aplicativos WinUI e SDK de Aplicativos do Windows. O InteractionTracker habilita:

• Flexibilidade completa – queremos que você possa personalizar e ajustar todos os aspectos de uma experiência de manipulação; especificamente, os movimentos exatos que ocorrem durante ou em resposta à entrada de dados. Ao criar uma experiência de manipulação personalizada com o InteractionTracker, todos os botões necessários estão à sua disposição.
• Desempenho suave – um dos desafios com experiências de manipulação é que seu desempenho depende do thread da interface do usuário. Isso pode afetar negativamente qualquer experiência de manipulação quando a interface do usuário estiver ocupada. O InteractionTracker foi criado para utilizar o novo mecanismo de animação que opera em um thread independente a 60 FPS, resultando em movimento suave.

Visão geral: InteractionTracker

Ao criar experiências de manipulação personalizadas, há dois componentes principais com os quais você interage. Discutiremos estes primeiro:

• InteractionTracker – o objeto principal que mantém um computador de estado cujas propriedades são controladas por entradas de usuário ativas ou atualizações e animações diretas. Está previsto que então se vincule a um CompositionAnimation para criar o movimento de manipulação personalizado.
• VisualInteractionSource – um objeto complementar que define quando e sob quais condições a entrada é enviada ao InteractionTracker. Ele define tanto o CompositionVisual usado para detecção de colisão quanto outras propriedades de configuração de entrada.

Como um computador de estado, as propriedades do InteractionTracker podem ser controladas por qualquer um dos seguintes:

• Interação direta do usuário – o usuário final está manipulando diretamente dentro da região de teste de ocorrência do VisualInteractionSource
• Inércia – seja da velocidade programática ou de um gesto do usuário, as propriedades do InteractionTracker são animadas conforme uma curva de inércia
• CustomAnimation – uma animação personalizada direcionada diretamente a uma propriedade do InteractionTracker

Computador de Estado InteractionTracker

Conforme mencionado anteriormente, InteractionTracker é um computador de estado com 4 estados – cada um deles pode fazer a transição para qualquer um dos outros quatro estados. (Para obter mais informações sobre como o InteractionTracker faz a transição entre esses estados, consulte a documentação da classe InteractionTracker .)

State	Descrição
Inativo	Sem entradas de controle ativas ou animações
Interação	Entrada de usuário ativa detectada
Inércia	Movimento ativo resultante da entrada ativa ou da velocidade programática
AnimaçãoPersonalizada	Movimento ativo resultante de uma animação personalizada

Em cada um dos casos em que o estado do InteractionTracker é alterado, um evento (ou retorno de chamada) é gerado que você pode escutar. Para que você ouça esses eventos, eles devem implementar a interface IInteractionTrackerOwner e criar o objeto InteractionTracker com o método CreateWithOwner. O diagrama a seguir também descreve quando os diferentes eventos são disparados.

Usando o VisualInteractionSource

Para que o InteractionTracker seja controlado pela Entrada, você precisa conectar um VIS (VisualInteractionSource) a ele. O VIS é criado como um objeto complementar usando um CompositionVisual para definir:

1. A região de teste de colisão em que a entrada será rastreada, e onde os gestos no espaço de coordenadas são detectados.
2. As configurações de entrada que serão detectadas e roteadas, entre outras estão:
   • Gestos detectáveis: Posição X e Y (movimento horizontal e vertical), Escala (gesto de pinça)
   • Inércia
   • Trilhos & Encadeamento
   • Modos de redirecionamento: quais dados de entrada são redirecionados automaticamente para InteractionTracker

Observação

Como o VisualInteractionSource é criado com base na posição de teste de colisão e no espaço de coordenadas de um Visual, é recomendável não usar um Visual que esteja em movimento ou mudando de posição.

Observação

Você pode usar várias instâncias do VisualInteractionSource com o mesmo InteractionTracker se houver várias regiões de teste de ocorrência. No entanto, o caso mais comum é usar apenas um VIS.

O VisualInteractionSource também é responsável por gerenciar quando dados de entrada de diferentes modalidades (touch, PTP, Pen) são roteados para InteractionTracker. Esse comportamento é definido pela propriedade ManipulationRedirectionMode. Por padrão, todas as entradas de ponteiro são enviadas para o thread de interface do usuário e a entrada do Precision Touchpad vai para o VisualInteractionSource e InteractionTracker.

Portanto, se você quiser ter Touch e Pen (Atualização de Criadores) para conduzir uma manipulação por meio de um VisualInteractionSource e InteractionTracker, você deve chamar o método VisualInteractionSource.TryRedirectForManipulation. No snippet curto abaixo de um aplicativo XAML, o método é chamado quando um evento pressionado por toque ocorre na parte superior da Grade UIElement:

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Integração com ExpressionAnimations

Ao utilizar o InteractionTracker para conduzir uma experiência de manipulação, você interage principalmente com as propriedades Escala e Posição. Assim como outras propriedades do Objeto de Composição, essas propriedades podem ser tanto o destino quanto a referência em uma Animação de Composição, mais comumente Animações de Expressão.

Para usar InteractionTracker em uma expressão, faça referência à propriedade Position (ou Scale) do rastreador, como no exemplo abaixo. Como a propriedade de InteractionTracker é modificada devido a qualquer uma das condições descritas anteriormente, a saída da Expressão também muda.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Observação

Ao referenciar a posição do InteractionTracker em uma Expressão, você deve negar o valor para que a Expressão resultante se mova na direção correta. Isso ocorre porque a progressão do InteractionTracker a partir de sua origem em um grafo permite que você pense na progressão do InteractionTracker em coordenadas do "mundo real", como a distância de sua origem.

Introdução

Para começar a usar o InteractionTracker para criar experiências de manipulação personalizadas:

1. Crie seu objeto InteractionTracker usando InteractionTracker.Create ou InteractionTracker.CreateWithOwner.
   • (Se você usar CreateWithOwner, certifique-se de implementar a interface IInteractionTrackerOwner.)
2. Defina a posição Min e Max do InteractionTracker recém-criado.
3. Crie o VisualInteractionSource com um CompositionVisual.
   • Verifique se o elemento visual que você passa tem um tamanho não nulo. Caso contrário, ele não passará pelo teste de colisão corretamente.
4. Defina as propriedades do VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Trilhos &Encadeamento
5. Adicione o VisualInteractionSource ao InteractionTracker usando InteractionTracker.InteractionSources.Add.
6. Configure TryRedirectForManipulation para quando for detectada a entrada de toque e caneta.
   • Para XAML, isso normalmente é feito no evento PointerPressed do UIElement.
7. Crie um ExpressionAnimation que faz referência à posição do InteractionTracker e almeje uma propriedade de um CompositionObject.

Aqui está um snippet de código curto que mostra o número 1 – 5 em ação:

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

Para obter usos mais avançados do InteractionTracker, consulte os seguintes artigos:

• Criar pontos de ajuste com InertiaModifiers
• Pull-to-refresh com SourceModifiers