Creare punti di ancoraggio con modificatori di inerzia

Questo articolo illustra in modo più approfondito come usare la funzionalità InertiaModifier di InteractionTracker per creare esperienze di movimento che si aggancino a un punto specificato in un'app WinUI.

Nelle app WinUI InteractionTracker e i tipi di modificatore di inerzia correlati si trovano nello spazio dei nomi Microsoft.UI.Composition.Interactions.

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

• Animazioni basate su input
• Esperienze di manipolazione personalizzate con InteractionTracker
• Animazioni basate sulle relazioni

Quali sono i punti di ancoraggio e perché sono utili?

Quando si creano esperienze di manipolazione personalizzate, a volte è utile creare punti di posizione specializzati all'interno dell'area di lavoro scorrevole/zoomabile dove InteractionTracker si fermerà sempre. Questi sono spesso chiamati punti di ancoraggio.

Si noti nell'esempio seguente come lo scorrimento può lasciare l'interfaccia utente in una posizione imbarazzante tra le diverse immagini:

Se si aggiungono punti di scatto, quando si ferma lo scorrimento tra le immagini, vengono "agganciati" a una posizione specificata. Con i punti di scatto, l'esperienza di scorrimento delle immagini diventa molto più pulita e reattiva.

InteractionTracker e InertiaModifiers

Quando si creano esperienze di manipolazione personalizzate con InteractionTracker, è possibile creare esperienze di movimento dei punti di ancoraggio usando InertiaModifiers. Gli inertiaModifiers sono essenzialmente un modo per definire dove o come InteractionTracker raggiunge la destinazione quando entra nello stato inerzia. È possibile applicare InertiaModifiers per influire sulla posizione X o Y o sulle proprietà Scale di InteractionTracker.

Esistono 3 tipi di InertiaModifiers:

• InteractionTrackerInertiaRestingValue: un modo per modificare la posizione di riposo finale dopo un'interazione o una velocità programmatica. Un movimento predefinito porterà InteractionTracker a tale posizione.
• InteractionTrackerInertiaMotion – un modo per definire un movimento specifico che l'InteractionTracker eseguirà dopo un'interazione o una velocità definita tramite programmazione. La posizione finale sarà derivata da questo movimento.
• InteractionTrackerInertiaNaturalMotion: un modo per definire la posizione finale di riposo dopo un'interazione o una velocità programmatica, ma con un'animazione basata sulla fisica (NaturalMotionAnimation).

Quando si entra in Inertia, InteractionTracker valuta ciascuno dei modificatori di inerzia assegnati e determina se uno di essi è applicabile. Ciò significa che è possibile creare e assegnare più inertiaModifier a un InteractionTracker. Tuttavia, quando si definiscono ognuna di esse, è necessario eseguire le operazioni seguenti:

1. Definire la condizione: un'Espressione che definisce l'istruzione condizionale quando deve essere applicato questo specifico InertiaModifier. Questo spesso richiede di esaminare la NaturalRestingPosition di InteractionTracker (destinazione data l'inerzia di default).
2. Definire RestingValue/Motion/NaturalMotion: definire l'espressione effettiva di valore di riposo, l'espressione di movimento o NaturalMotionAnimation che si esegue quando la condizione è soddisfatta.

Annotazioni

L'aspetto della condizione degli InertiaModifiers viene valutato una sola volta quando InteractionTracker entra in inerzia. Tuttavia, solo per InertiaMotion, l'espressione del movimento viene valutata ogni fotogramma per il modificatore la cui condizione è vera.

Esempio

Si esaminerà ora come usare InertiaModifiers per creare alcune esperienze di punto di ancoraggio per ricreare l'area di disegno di scorrimento delle immagini. In questo esempio, ogni manipolazione è destinata a spostarsi potenzialmente attraverso una singola immagine, che viene spesso definita punti di ancoraggio obbligatori singoli.

Iniziamo configurando InteractionTracker, VisualInteractionSource e l'Expression che sfrutterà la posizione di 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);
}

Successivamente, poiché un singolo comportamento di punto di ancoraggio obbligatorio sposterà il contenuto verso l'alto o verso il basso, saranno necessari due modificatori di inerzia diversi: uno che sposta il contenuto scorrevole verso l'alto e uno che lo sposta verso il basso.

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

L'allineamento verso l'alto o verso il basso viene determinato in base alla posizione in cui InteractionTracker atterrerebbe naturalmente rispetto alla distanza di allineamento, ovvero la distanza tra le posizioni di ancoraggio. Se supera il punto intermedio, quindi blocca verso il basso; in caso contrario, blocca. In questo esempio si archivia la distanza di ancoraggio in un oggetto 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);

Questo diagramma fornisce una descrizione visiva alla logica in corso:

A questo punto è sufficiente definire i valori di riposo per ogni InertiaModifier: spostare la posizione di InteractionTracker nella posizione di ancoraggio precedente o quella successiva.

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);

Infine, aggiungere InertiaModifiers a InteractionTracker. Ora, quando InteractionTracker entra in InertiaState, controlla le condizioni dei tuoi InertiaModifier per verificare se la posizione deve essere modificata.

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