Crie pontos de ajuste 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.

Pré-requisitos

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

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

O que são pontos de encaixe 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 em que o InteractionTracker sempre vai parar. Geralmente, eles são chamados pontos de alinhamento.

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.

Rastreador de Interação e Modificadores de Inércia

Ao criar experiências de manipulação personalizadas com o InteractionTracker, você pode criar experiências de movimento com pontos 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 a propriedade Scale do InteractionTracker.

Há três tipos de InertiaModifiers:

• InteractionTrackerInertiaRestingValue – uma maneira de modificar a posição de descanso final após uma interação ou velocidade definida por programação. 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 entrar em Inertia, 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 sobre quando este InertiaModifier específico deve ser aplicado. Isso geralmente requer examinar a posição natural de repouso (NaturalRestingPosition) do InteractionTracker (destino dado à inércia padrão).
2. Defina o RestingValue/Motion/NaturalMotion – defina a expressão real de Valor de Repouso, expressão de Movimento ou Animação NaturalMotion que ocorre quando a condição é atendida.

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 destina-se a potencialmente mover-se através de uma única imagem – isso geralmente é chamado de Pontos de Ajuste Ú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, já que um comportamento de Ponto de Ajuste Obrigatório único move o conteúdo para cima ou para baixo, você precisará de dois modificadores de inércia diferentes: um que move o conteúdo rolável para cima e outro que o move 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 no local em que o InteractionTracker naturalmente pousaria em relação à distância de ajuste – a distância entre os locais de ajuste. Se passar da metade do caminho, desloque rapidamente para baixo; caso contrário, desloque rapidamente para cima. (Neste exemplo, você armazena a distância de ajuste em um conjunto de propriedades (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: mova a posição do InteractionTracker para a posição de ajuste anterior ou 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 entra em seu InertiaState, ele verificará as condições de seus InertiaModifiers para ver se sua posição deve ser modificada.

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