Maak snap-punten met inertiemodifiers

In dit artikel verdiepen we ons in hoe je de InertiaModifier-functie van InteractionTracker gebruikt om bewegingservaringen te creëren die vastklikken op een bepaald punt.

Vereiste voorwaarden

Hier gaan we ervan uit dat u bekend bent met de concepten die in deze artikelen worden besproken:

• invoergestuurde animaties
• Aangepaste manipulatie-ervaringen met InteractionTracker
• op relaties gebaseerde animaties

Wat zijn uitlijnpunten en waarom zijn ze nuttig?

Bij het bouwen van aangepaste manipulatie-ervaringen is het soms handig om gespecialiseerde positiepunten te maken binnen het schuifbare/zoombare canvas waar InteractionTracker altijd tot stilstand komt. Deze worden vaak snappuntengenoemd.

In het volgende voorbeeld ziet u hoe de gebruikersinterface met schuiven in een onhandige positie tussen de verschillende afbeeldingen kan blijven:

Als u snap-punten toevoegt en u stopt met scrollen tussen de afbeeldingen, verspringen ze naar een opgegeven positie. Met snappunten maakt het de ervaring van het bladeren door afbeeldingen veel schoner en responsief.

InteractieTracker en InertieModificatoren

Wanneer u aangepaste manipulatie-ervaringen bouwt met InteractionTracker, kunt u snap point motion-ervaringen maken door gebruik te maken van InertiaModifiers. InertiaModifiers zijn in wezen een manier om te definiëren waar of hoe InteractionTracker de bestemming bereikt bij het invoeren van de status Inertia. U kunt InertiaModifiers toepassen om de X- of Y-positie of schaaleigenschappen van InteractionTracker te beïnvloeden.

Er zijn 3 soorten InertiaModifiers:

• InteractionTrackerInertiaRestingValue – een manier om de uiteindelijke rustpositie na een interactie of programmatische snelheid te wijzigen. Een vooraf gedefinieerde beweging brengt InteractionTracker naar die positie.
• InteractionTrackerInertiaMotion – een manier om een specifieke beweging van InteractionTracker te definiëren die zal worden uitgevoerd na een interactie of programmatische snelheid. De definitieve positie wordt afgeleid van deze motie.
• InteractionTrackerInertiaNaturalMotion – een manier om de uiteindelijke rustpositie na een interactie of programmatische snelheid te definiëren, maar met een op fysica gebaseerde animatie (NaturalMotionAnimation).

Bij het invoeren van Inertia evalueert InteractionTracker elk van de InertiaModifiers die eraan zijn toegewezen en bepaalt of een van deze van toepassing is. Dit betekent dat u meerdere InertiaModifiers kunt maken en toewijzen aan een InteractionTracker, maar wanneer u deze definieert, moet u het volgende doen:

1. Definieer de voorwaarde: een expressie die de voorwaardelijke instructie definieert wanneer deze specifieke InertiaModifier moet plaatsvinden. Dit vereist vaak dat je kijkt naar de NaturalRestingPosition van de InteractionTracker (de bestemming ingesteld door de standaard Inertia).
2. Definieer de RestingValue/Motion/NaturalMotion – specifiek de werkelijke Resting Value Expression, Motion Expression of NaturalMotionAnimation die optreedt wanneer aan de voorwaarde wordt voldaan.

Opmerking

Het voorwaardeaspect van de InertiaModifiers wordt slechts één keer geëvalueerd wanneer InteractionTracker Inertia binnenkomt. Voor InertiaMotion wordt de bewegingsexpressie echter alleen geëvalueerd voor elk frame voor de modifier waarvan de voorwaarde waar is.

Voorbeeld

Laten we nu eens kijken hoe u InertiaModifiers kunt gebruiken om een aantal snappuntervaringen te maken om het scrollende canvas van afbeeldingen opnieuw te maken. In dit voorbeeld is elke manipulatie bedoeld om door één afbeelding te navigeren. Dit wordt vaak aangeduid als Single Mandatory Snap Points.

Laten we beginnen met het instellen van InteractionTracker, VisualInteractionSource en de expressie die de positie van InteractionTracker gebruikt.

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

Vervolgens, omdat een enkel verplicht uitlijnpuntgedrag de inhoud omhoog of omlaag verplaatst, hebt u twee verschillende traagheidsaanpassingen nodig: een die de schuifbare inhoud omhoog verplaatst en een die de inhoud omlaag verplaatst.

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

Of u omhoog of omlaag wilt uitlijnen, wordt bepaald op basis van waar InteractionTracker op natuurlijke wijze binnen landt ten opzichte van de uitlijnafstand: de afstand tussen de uitlijnlocaties. Als u voorbij het middenpunt bent, naar beneden haken, anders naar boven haken. (In dit voorbeeld slaat u de uitlijnafstand op in een 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);

Dit diagram geeft een visuele beschrijving van de logica die zich voordoet:

Nu hoeft u alleen de rustwaarden voor elke InertiaModifier te definiëren: verplaats de positie van InteractionTracker naar de vorige of volgende uitlijnpositie.

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

Voeg tot slot de InertiaModifiers toe aan InteractionTracker. Wanneer InteractionTracker nu InertiaState binnenkomt, controleert het de voorwaarden van uw InertiaModifiers om te zien of de positie ervan moet worden gewijzigd.

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