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

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

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 criar experiências de manipulação personalizadas?

Na maioria dos casos, utilizar os controlos de manipulação pré-construídos é suficiente para criar experiências de interface. Mas e se quisesses diferenciar dos controlos comuns? E se quisesses criar uma experiência específica guiada por input ou ter uma interface onde um movimento tradicional de manipulação não seja suficiente? É aqui que entra a criação de experiências personalizadas. Permitem que desenvolvedores e designers de aplicações sejam mais criativos – trazendo à vida experiências de movimento que exemplifiquem melhor a sua marca e linguagem de design personalizada. Desde o início, tens acesso ao conjunto certo de blocos de construção para personalizar completamente a experiência de manipulação – desde a forma como o movimento deve responder com o dedo a entrar e sair do ecrã até aos snap points e encadeamento de entradas.

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

• Adicionar um comportamento personalizado de deslizamento, eliminação/descarte
• Efeitos impulsionados pela entrada (deslocamento desfoca o conteúdo)
• Controlos personalizados com movimentos de manipulação personalizados (ListView personalizado, ScrollViewer, etc.)

Por que usar o InteractionTracker?

O InteractionTracker está disponível no espaço de nomes Microsoft.UI.Composition.Interactions para aplicações WinUI e Windows App SDK. O InteractionTracker permite:

• Flexibilidade Completa – queremos que seja capaz de personalizar e adaptar todos os aspetos de uma experiência de manipulação; especificamente, os movimentos exatos que ocorrem durante ou em resposta à entrada. Ao criar uma experiência de manipulação personalizada com o InteractionTracker, todos os botões de que precisa estão ao seu dispor.
• Desempenho Fluido – um dos desafios das experiências de manipulação é que o seu desempenho depende do thread da interface. Isto pode afetar negativamente qualquer experiência de manipulação quando a interface está ocupada. O InteractionTracker foi desenvolvido para utilizar o novo motor de animação que opera num 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 que interage. Vamos discutir estes primeiro:

• InteractionTracker – o objeto central que mantém uma máquina de estados cujas propriedades são impulsionadas por entrada ativa do utilizador ou atualizações e animações diretas. O objetivo é depois ligar a um CompositionAnimation para criar o movimento de manipulação personalizado.
• VisualInteractionSource – um objeto complementar que define quando e em que condições a entrada é enviada para o InteractionTracker. Define tanto o CompositionVisual usado para testes de acerto como outras propriedades de configuração de entrada.

Como máquina de estados, as propriedades do InteractionTracker podem ser controladas por qualquer um dos seguintes dispositivos:

• Interação Direta com o Utilizador – o utilizador final está a manipular diretamente dentro da região de teste de colisão do VisualInteractionSource.
• Inércia – seja por velocidade programática ou por um gesto do utilizador, as propriedades do InteractionTracker animam-se sob uma curva de inércia
• CustomAnimation – uma animação personalizada direcionada diretamente a uma propriedade do InteractionTracker

Máquina de Estado do InteractionTracker

Como mencionado anteriormente, o InteractionTracker é uma máquina de estados com 4 estados – cada um dos quais pode transitar para qualquer um dos outros quatro estados. (Para mais informações sobre como o InteractionTracker transita entre estes estados, consulte a documentação da classe InteractionTracker .)

Em cada um dos casos em que o estado do InteractionTracker muda, é gerado um evento (ou callback) que pode escutar. Para que possa ouvir estes eventos, eles devem implementar a interface IInteractionTrackerOwner e criar o seu objeto InteractionTracker com o método CreateWithOwner. O diagrama seguinte também descreve quando os diferentes eventos são desencadeados.

Usando o VisualInteractionSource

Para que o InteractionTracker seja controlado por Input, é necessário ligar uma VisualInteractionSource (VIS) a ele. O VIS é criado como um objeto complementar usando um CompositionVisual para definir:

1. A região do teste de acerto que a entrada será rastreada, e os gestos do espaço de coordenadas são detetados em
2. As configurações de entrada que serão detetadas e encaminhadas, algumas incluem:
   • Gestos detetáveis: Posição X e Y (panorâmica horizontal e vertical), Escala (beliscão)
   • Inércia
   • Carris e Encadeamento
   • Modos de redirecionamento: que dados de entrada são redirecionados automaticamente para o InteractionTracker

O VisualInteractionSource é também responsável por gerir quando os dados de entrada de diferentes modalidades (toque, PTP, caneta) são encaminhados para o InteractionTracker. Este comportamento é definido pela propriedade ManipulationRedirectionMode. Por defeito, toda a entrada do Pointer é enviada para o thread da interface e a entrada do Precision Touchpad vai para o VisualInteractionSource e para o InteractionTracker.

Assim, se quiser que o Touch e o Pen (Creators Update) conduzam uma manipulação através de um VisualInteractionSource e de um InteractionTracker, deve invocar o método VisualInteractionSource.TryRedirectForManipulation. No pequeno excerto abaixo de uma aplicação XAML, o método é chamado quando ocorre um evento pressionado por toque na grelha UIElement mais alta:

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 o "ExpressionAnimations"

Ao utilizar o InteractionTracker para gerar uma experiência de manipulação, interage principalmente com as propriedades de Escala e Posição. Tal como outras propriedades do CompositionObject, estas propriedades podem ser tanto o alvo como referenciadas numa CompositionAnimation, sendo mais frequentemente expressas através de ExpressionAnimations.

Para usar o InteractionTracker dentro de uma Expressão, consulte a propriedade Posição (ou Escala) do rastreador, como no exemplo abaixo. À medida que a propriedade do 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;

Começar

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

1. Crie o seu objeto InteractionTracker usando InteractionTracker.Create ou InteractionTracker.CreateWithOwner.
   • (Se utilizar o CreateWithOwner, certifique-se de implementar a interface IInteractionTrackerOwner.)
2. Defina a posição Min e Max do seu recém-criado InteractionTracker.
3. Crie o seu VisualInteractionSource com um CompositionVisual.
   • Certifica-te de que o elemento visual que estás a passar tem um tamanho diferente de zero. Caso contrário, não será corretamente avaliado no processo de hit-test.
4. Defina as propriedades do VisualInteractionSource.
   • Fonte de Redirecionamento de Interação Visual
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Carris e Encadeamento
5. Adicione o VisualInteractionSource ao InteractionTracker usando InteractionTracker.InteractionSources.Add.
6. Configurar o TryRedirectForManipulation para quando é detetada entrada de Toque e Caneta.
   • Para XAML, isto é normalmente feito no evento PointerPressed do UIElement.
7. Crie uma ExpressionAnimation que se refira à posição do InteractionTracker e tenha como alvo a propriedade de um CompositionObject.

Aqui está um pequeno excerto de código que mostra os pontos #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 usos mais avançados do InteractionTracker, consulte os seguintes artigos:

• Crie pontos de encaixe com InertiaModifiers
• Atualizar ao puxar com SourceModifiers