Aangepaste manipulatie-ervaringen met InteractionTracker

In dit artikel laten we zien hoe u InteractionTracker kunt gebruiken om aangepaste manipulatie-ervaringen te maken.

Vereiste voorwaarden

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

• Invoergestuurde animaties
• Op relaties gebaseerde animaties

Waarom aangepaste manipulatie-ervaringen maken?

In de meeste gevallen zijn het gebruik van de vooraf gebouwde besturingselementen voor manipulatie voldoende om ui-ervaringen te maken. Maar wat als u onderscheid wilde maken tussen de algemene besturingselementen? Wat moet u doen als u een specifieke ervaring wilt maken op basis van invoer of een gebruikersinterface wilt hebben waarbij een traditionele manipulatiebeweging niet voldoende is? Hier komt het maken van aangepaste ervaringen binnen. Ze stellen app-ontwikkelaars en -ontwerpers in staat om creatiever te zijn, door bewegingservaringen te creëren die hun merkidentiteit en unieke ontwerptaal beter illustreren. Vanaf het begin krijg je toegang tot de juiste set bouwstenen om een interactie-ervaring volledig aan te passen, van hoe beweging zou moeten reageren op aanraking op en buiten het scherm tot vangpunten en invoerkoppelingen.

Hieronder vindt u enkele veelvoorkomende voorbeelden van wanneer u een aangepaste manipulatie-ervaring maakt:

• Een aangepaste veegbeweging toevoegen, gedrag verwijderen/sluiten
• Invoergestuurde effecten (panning zorgt ervoor dat de inhoud vervaagt)
• Aangepaste besturingselementen met aangepaste manipulatiebewegingen (aangepaste ListView, ScrollViewer, enzovoort)

Waarom InteractionTracker gebruiken?

InteractionTracker is beschikbaar in de naamruimte Microsoft.UI.Composition.Interactions voor WinUI- en Windows App SDK-apps. InteractionTracker maakt het volgende mogelijk:

• Volledige flexibiliteit – we willen dat u elk aspect van een manipulatie-ervaring kunt aanpassen en aanpassen; met name de exacte bewegingen die optreden tijdens of in reactie op invoer. Bij het bouwen van een aangepaste manipulatie-ervaring met InteractionTracker zijn alle knoppen die u nodig hebt, tot uw beschikking.
• Smooth Performance : een van de uitdagingen met manipulatieervaringen is dat hun prestaties afhankelijk zijn van de UI-thread. Dit kan negatieve gevolgen hebben voor elke manipulatie-ervaring wanneer de gebruikersinterface bezet is. InteractionTracker is gebouwd om gebruik te maken van de nieuwe animatie-engine die werkt op een onafhankelijke thread op 60 FPS, wat resulteert in vloeiende beweging.

Overzicht: InteractionTracker

Bij het maken van aangepaste manipulatie-ervaringen zijn er twee primaire onderdelen waarmee u communiceert. We bespreken deze eerst:

• InteractionTracker : het kernobject dat een statusmachine onderhoudt waarvan de eigenschappen worden aangestuurd door actieve gebruikersinvoer of directe updates en animaties. Het is de bedoeling om vervolgens een CompositionAnimation te koppelen om de aangepaste manipulatieanimatie te maken.
• VisualInteractionSource : een complementobject dat definieert wanneer en onder welke voorwaarden invoer wordt verzonden naar InteractionTracker. Het definieert zowel de CompositionVisual die wordt gebruikt voor Hit-testing als andere invoerconfiguratie-eigenschappen.

Als statusmachine kunnen eigenschappen van InteractionTracker worden aangestuurd door een van de volgende opties:

• Directe gebruikersinteractie: de eindgebruiker manipuleert direct binnen de VisualInteractionSource hit-testregio.
• Traagheid : van programmatische snelheid of een gebruikersbeweging, eigenschappen van InteractionTracker-animatie onder een traagheidscurve
• CustomAnimation : een aangepaste animatie die rechtstreeks gericht is op een eigenschap van InteractionTracker

InteractionTracker-toestandsmachine

Zoals eerder vermeld, is InteractionTracker een statusmachine met vier statussen, die elk kunnen worden overgestapt op een van de andere vier statussen. (Zie de interactionTracker-klassedocumentatie voor meer informatie over hoe InteractionTracker overgaat tussen deze statussen.)

State	Beschrijving
Idle	Geen actieve, sturende invoer of animaties
Interactie	Actieve gebruikersinvoer gedetecteerd
Traagheid	Actieve beweging als gevolg van actieve invoer of programmatische snelheid
Aangepaste Animatie	Actieve beweging als gevolg van een aangepaste animatie

In elk van de gevallen waarin de status van InteractionTracker verandert, wordt er een gebeurtenis (of callback) gegenereerd waarnaar u kunt luisteren. Als u wilt luisteren naar deze gebeurtenissen, moeten ze de IInteractionTrackerOwner-interface implementeren en hun InteractionTracker-object maken met de methode CreateWithOwner. In het volgende diagram ziet u ook wanneer de verschillende gebeurtenissen worden geactiveerd.

VisualInteractionSource gebruiken

Als InteractionTracker wordt aangestuurd door Input, moet u er een VisualInteractionSource (VIS) aan koppelen. Het VIS wordt gemaakt als een complementobject met behulp van een CompositionVisual om het volgende te definiëren:

1. De hit-testregio waarin de invoer wordt bijgehouden en de coördinaatruimtebewegingen worden gedetecteerd in
2. De configuraties van invoer die worden gedetecteerd en gerouteerd, zijn onder andere:
   • Herkenbare bewegingen: Positie X en Y (horizontaal en verticaal pannen), Schaal (knijp)
   • Traagheid
   • Rails & Koppeling
   • Omleidingsmodi: welke invoergegevens automatisch worden omgeleid naar InteractionTracker

Opmerking

Omdat VisualInteractionSource is gemaakt op basis van de hit-test positie en de coördinatenruimte van een Visual, is het raadzaam geen Visual te gebruiken die in beweging zal zijn of van positie zal veranderen.

Opmerking

U kunt meerdere VisualInteractionSource-exemplaren met dezelfde InteractionTracker gebruiken als er meerdere hit-testregio's zijn. Het meest voorkomende geval is echter om slechts één VIS te gebruiken.

VisualInteractionSource is ook verantwoordelijk voor het beheren wanneer invoergegevens van verschillende modaliteiten (touch, PTP, Pen) worden doorgestuurd naar InteractionTracker. Dit gedrag wordt gedefinieerd door de eigenschap ManipulationRedirectionMode. Standaard worden alle aanwijzer-invoer verzonden naar de UI-thread en de precision touchpad-invoer gaat naar de VisualInteractionSource en InteractionTracker.

Dus als u Touch en Pen (Creators Update) wilt hebben om een manipulatie te stimuleren via een VisualInteractionSource en InteractionTracker, moet u de methode VisualInteractionSource.TryRedirectForManipulation aanroepen. In het onderstaande korte fragment van een XAML-app, wordt de methode aangeroepen wanneer een aanraakactie plaatsvindt bij de bovenste UIElement Grid.

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

Integratie met ExpressionAnimations

Wanneer u InteractionTracker gebruikt om een manipulatie-ervaring te stimuleren, communiceert u voornamelijk met de eigenschappen Schaal en Positie. Net als andere eigenschappen van CompositionObject kunnen deze eigenschappen zowel het doel als de verwijzing naar een CompositionAnimation zijn, meestal ExpressionAnimations.

Als u InteractionTracker binnen een expressie wilt gebruiken, verwijst u naar de eigenschap Position (of Scale) van de tracker, zoals in het onderstaande voorbeeld. Aangezien de eigenschap van InteractionTracker wordt gewijzigd vanwege een van de eerder beschreven voorwaarden, wordt ook de uitvoer van de expressie gewijzigd.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

Opmerking

Wanneer u in een expressie verwijst naar de positie van InteractionTracker, moet u de waarde omkeren zodat de resulterende expressie in de juiste richting beweegt. Dit komt doordat de voortgang van InteractionTracker begint vanaf het oorsprongspunt op een grafiek, waardoor u kunt nadenken over de voortgang van InteractionTracker in 'echte wereld' coördinaten, zoals de afstand tot het oorsprongspunt.

Aan de slag

Om te beginnen met het gebruik van InteractionTracker om aangepaste manipulatie-ervaringen te creëren:

1. Maak uw InteractionTracker-object met behulp van InteractionTracker.Create of InteractionTracker.CreateWithOwner.
   • (Als u CreateWithOwner gebruikt, moet u ervoor zorgen dat u de IInteractionTrackerOwner-interface implementeert.)
2. Stel de positie Min en Max van uw zojuist gemaakte InteractionTracker in.
3. Gebruik een CompositionVisual om uw VisualInteractionSource te maken.
   • Zorg ervoor dat de visual die u doorgeeft een niet-nulgrootte heeft. Anders wordt het niet correct getest.
4. Stel de eigenschappen van visualInteractionSource in.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Rails & koppeling
5. Voeg visualInteractionSource toe aan InteractionTracker met behulp van InteractionTracker.InteractionSources.Add.
6. Instellen van TryRedirectForManipulation voor wanneer touch- en penn-invoer wordt gedetecteerd.
   • Voor XAML wordt dit meestal gedaan op de gebeurtenis PointerPressed van UIElement.
7. Maak een ExpressionAnimation die verwijst naar de positie van InteractionTracker en gericht is op de eigenschap van een CompositionObject.

Hier volgt een kort codefragment met #1 – 5 in actie:

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

Zie de volgende artikelen voor meer geavanceerde gebruiksrechten van InteractionTracker:

• Snappunten maken met InertiaModifiers
• Pull-to-refresh met SourceModifiers