Criar pontos de encaixe com modificadores de inércia

Neste artigo, aprofundamos como usar um recurso InertiaModifier do InteractionTracker para criar experiências de movimento que se ajustem a um ponto especificado em um aplicativo WinUI.

Em aplicativos WinUI, InteractionTracker e os tipos de modificador de inércia relacionados estão no Microsoft.UI.Composition.Interactions namespace.

Pré-requisitos

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

• Animações controladas por entrada
• Experiências de manipulação personalizadas com o InteractionTracker
• Animações baseadas em relação

O que são pontos de ajuste e por que eles são úteis?

Ao criar experiências de manipulação personalizadas, às vezes é útil criar pontos de posição especializados dentro da tela rolável/zoomável nos quais o InteractionTracker sempre atingirá repouso. Geralmente, eles são chamados de pontos de encaixe.

Observe no exemplo a seguir como a rolagem pode deixar a interface do usuário em uma posição estranha entre as diferentes imagens:

Se você adicionar pontos de ajuste, quando você parar de rolar entre as imagens, elas "ajustarão" a uma posição especificada. Com pontos de ajuste, torna a experiência de rolar pelas imagens muito mais limpa e mais responsiva.

InteractionTracker e InertiaModifiers

Ao criar experiências de manipulação personalizadas com o InteractionTracker, você pode criar experiências de movimento de ponto de encaixe utilizando modificadores de inércia. InertiaModifiers são essencialmente uma maneira de definir onde ou como o InteractionTracker atinge seu destino ao entrar no estado de Inércia. Você pode aplicar InertiaModifiers para afetar a posição X ou Y ou as propriedades Escala do InteractionTracker.

Há três tipos de InertiaModifiers:

• InteractionTrackerInertiaRestingValue – uma maneira de modificar a posição final de descanso após uma interação ou velocidade programada. Um movimento predefinido levará InteractionTracker para essa posição.
• InteractionTrackerInertiaMotion – uma maneira de definir um movimento específico que InteractionTracker executará após uma interação ou velocidade programática. A posição final será derivada desse movimento.
• InteractionTrackerInertiaNaturalMotion – uma maneira de definir a posição de descanso final após uma interação ou velocidade programática, mas com uma animação baseada em física (NaturalMotionAnimation).

Ao inserir inércia, o InteractionTracker avalia cada um dos InertiaModifiers atribuídos a ele e determina se algum deles se aplica. Isso significa que você pode criar e atribuir vários InertiaModifiers a um InteractionTracker. Mas, ao definir cada um, você precisa fazer o seguinte:

1. Definir a condição – uma expressão que define a instrução condicional quando esse InertiaModifier específico deve ocorrer. Isso geralmente requer examinar o NaturalRestingPosition do InteractionTracker (destino considerando a inércia padrão).
2. Defina o RestingValue/Motion/NaturalMotion – defina a expressão real de valor de repouso, expressão de movimento ou NaturalMotionAnimation que ocorre quando a condição é atendida.

Observação

O aspecto de condição dos InertiaModifiers é avaliado apenas uma vez, quando o InteractionTracker entra em estado de inércia. No entanto, apenas para o InertiaMotion, a expressão de movimento é avaliada a cada quadro para o modificador cuja condição é verdadeira.

Exemplo

Agora vamos examinar como você pode usar InertiaModifiers para criar algumas experiências de ponto de ajuste para recriar a tela de rolagem de imagens. Neste exemplo, cada manipulação tem o propósito de, de maneira potencial, mover-se através de uma única imagem – isso é frequentemente referido como Pontos de Ajuste (snap points) Únicos Obrigatórios.

Vamos começar configurando InteractionTracker, o VisualInteractionSource e a Expressão que aproveitará a posição do InteractionTracker.

private void SetupInput()
{
    _tracker = InteractionTracker.Create(_compositor);
    _tracker.MinPosition = new Vector3(0f);
    _tracker.MaxPosition = new Vector3(3000f);

    _source = VisualInteractionSource.Create(_root);
    _source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    _source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
    _tracker.InteractionSources.Add(_source);

    var scrollExp = _compositor.CreateExpressionAnimation("-tracker.Position.Y");
    scrollExp.SetReferenceParameter("tracker", _tracker);
    ElementCompositionPreview.GetElementVisual(scrollPanel).StartAnimation("Offset.Y", scrollExp);
}

Em seguida, como um comportamento de Ponto de Ancoragem Obrigatório moverá o conteúdo para cima ou para baixo, você precisará de dois modificadores de inércia distintos: um que mova o conteúdo rolável para cima e outro que o mova para baixo.

// Snap-Point to move the content up
var snapUpModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);
// Snap-Point to move the content down
var snapDownModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);

Se o ajuste para cima ou para baixo é determinado com base em onde InteractionTracker naturalmente pousaria em relação à distância de ajuste – a distância entre os locais de ajuste. Se passar do meio do caminho, então recolha rapidamente para baixo, caso contrário, recolha rapidamente para cima. (Neste exemplo, você armazena a distância de encaixe em um PropertySet)

// Is NaturalRestingPosition less than the halfway point between Snap Points?
snapUpModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y < (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapUpModifier.Condition.SetReferenceParameter("prop", _propSet);
// Is NaturalRestingPosition greater than the halfway point between Snap Points?
snapDownModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y >= (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapDownModifier.Condition.SetReferenceParameter("prop", _propSet);

Este diagrama fornece uma descrição visual para a lógica que está acontecendo:

Agora você só precisa definir os Valores de Repouso para cada InertiaModifier: você pode mover a posição do InteractionTracker para a posição de ajuste anterior ou para a próxima.

snapUpModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue - mod(this.StartingValue, prop.snapDistance)");
snapUpModifier.RestingValue.SetReferenceParameter("prop", _propSet);
snapDownModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue + prop.snapDistance - mod(this.StartingValue, " + 
"prop.snapDistance)");
snapDownModifier.RestingValue.SetReferenceParameter("prop", _propSet);

Por fim, adicione o InertiaModifiers ao InteractionTracker. Agora, quando o InteractionTracker entrar em seu estado de inércia, ele verificará as condições dos seus modificadores de inércia para ver se sua posição deve ser modificada.

var modifiers = new InteractionTrackerInertiaRestingValue[] { 
snapUpModifier, snapDownModifier };
_tracker.ConfigurePositionYInertiaModifiers(modifiers);