Dela via

Anpassade manipulationsupplevelser med InteractionTracker

I den här artikeln visar vi hur du använder InteractionTracker för att skapa anpassade manipulationsupplevelser.

Förutsättningar

Här förutsätter vi att du är bekant med de begrepp som beskrivs i dessa artiklar:

Varför skapa anpassade manipulationsupplevelser?

I de flesta fall är det tillräckligt bra att använda de fördefinierade manipuleringskontrollerna för att skapa användargränssnittsupplevelser. Men vad händer om du vill skilja från de gemensamma kontrollerna? Vad händer om du vill skapa en specifik upplevelse som drivs av indata eller har ett användargränssnitt där en traditionell manipulationsrörelse inte räcker? Det är här du skapar anpassade upplevelser. De gör det möjligt för apputvecklare och designers att vara mer kreativa – att levandegöra rörelseupplevelser som bättre exemplifierar deras varumärke och unika designspråk. Från grunden får du tillgång till rätt uppsättning byggstenar för att helt anpassa en manipulationsupplevelse – från hur rörelse ska svara med fingret på och utanför skärmen till fästpunkter och indatalänkning.

Nedan följer några vanliga exempel på när du skapar en anpassad manipulationsupplevelse:

  • Lägga till ett anpassat svep, ta bort/avvisa beteende
  • Indatadrivna effekter (panorering gör att innehållet blir suddigt)
  • Anpassade kontroller med skräddarsydda manipuleringsrörelser (anpassad ListView, ScrollViewer osv.)

Exempel på sveprullare

Dra för att animera exempel

Varför ska jag använda InteractionTracker?

InteractionTracker är tillgängligt i namnområdet Microsoft.UI.Composition.Interactions för WinUI- och Windows App SDK-appar. InteractionTracker aktiverar:

  • Fullständig flexibilitet – vi vill att du ska kunna anpassa och skräddarsy varje aspekt av en manipulationsupplevelse. specifikt de exakta rörelser som inträffar under, eller som svar på, indata. När du skapar en anpassad manipulationsupplevelse med InteractionTracker står alla rattar du behöver till ditt förfogande.
  • Smooth Performance – en av utmaningarna med manipuleringsupplevelser är att deras prestanda är beroende av användargränssnittstråden. Detta kan påverka alla manipulationsupplevelser negativt när användargränssnittet är upptaget. InteractionTracker skapades för att använda den nya animationsmotorn som körs på en oberoende tråd på 60 FPS, vilket resulterar i smidig rörelse.

Översikt: InteractionTracker

När du skapar anpassade manipulationsupplevelser finns det två primära komponenter som du interagerar med. Vi diskuterar följande först:

  • InteractionTracker – kärnobjektet som underhåller en tillståndsdator vars egenskaper styrs av aktiva användarindata eller direkta uppdateringar och animeringar. Den är avsedd att sedan kopplas till en CompositionAnimation för att skapa den anpassade manipulationsrörelsen.
  • VisualInteractionSource – ett komplementobjekt som definierar när och under vilka villkor indata skickas till InteractionTracker. Den definierar både CompositionVisual som används för Hit-testing och andra egenskaper för indatakonfiguration.

Som tillståndsdator kan egenskaperna för InteractionTracker styras av något av följande:

  • Direkt användarinteraktion – slutanvändaren manipulerar direkt i hittestregionen VisualInteractionSource
  • Tröghet – antingen från programmatisk hastighet eller en användarens gest, egenskaperna för InteractionTracker animeras under en tröghetskurva.
  • CustomAnimation – en anpassad animering som riktar sig direkt mot en egenskap för InteractionTracker

InteractionTracker-tillståndsmaskin

Som tidigare nämnts är InteractionTracker en tillståndsdator med 4 tillstånd – som var och en kan övergå till något av de övriga fyra tillstånden. (Mer information om hur InteractionTracker övergår mellan dessa tillstånd finns i dokumentationen om Klassen InteractionTracker .)

Tillstånd Beskrivning
Idle Inga aktiva, drivande indata eller animeringar
Interagera Aktiva användarindata har identifierats
Tröghet Aktiv rörelse till följd av aktiv indata eller programmatisk hastighet
Anpassad animation Aktiv rörelse som är resultatet av en anpassad animering

I vart och ett av de fall där tillståndet för InteractionTracker ändras genereras en händelse (eller återanrop) som du kan lyssna efter. För att du ska kunna lyssna efter dessa händelser måste de implementera gränssnittet IInteractionTrackerOwner och skapa sitt InteractionTracker-objekt med metoden CreateWithOwner. Följande diagram beskriver också när de olika händelserna utlöses.

InteractionTracker-tillståndsdator

Använda VisualInteractionSource

För att InteractionTracker ska drivas av indata måste du ansluta en VisualInteractionSource (VIS) till den. VIS skapas som ett komplementobjekt med hjälp av en CompositionVisual för att definiera:

  1. Den träfftestregion där indata kommer att spåras, och där gester identifieras i koordinatsystemet
  2. Indatakonfigurationer som upptäcks och dirigeras inkluderar bland annat följande:
    • Detekterbara gester: Position X och Y (vågrät och lodrät panorering), Skala (nypning)
    • Tröghet
    • Räcken och kedja
    • Omdirigeringslägen: vilka indata omdirigeras automatiskt till InteractionTracker

Anmärkning

Eftersom VisualInteractionSource skapas baserat på träfftestpositionen och koordinatutrymmet för ett visuellt objekt rekommenderar vi att du inte använder ett visuellt objekt som kommer att vara i rörelse eller ändra position.

Anmärkning

Du kan använda flera VisualInteractionSource-instanser med samma InteractionTracker om det finns flera träfftestregioner. Det vanligaste fallet är dock att endast använda en VIS.

VisualInteractionSource ansvarar också för att hantera när indata från olika metoder (touch, PTP, Pen) dirigeras till InteractionTracker. Det här beteendet definieras av egenskapen ManipulationRedirectionMode. Som standard skickas alla pekarindata till användargränssnittstråden och Precision Touchpad-indata går till VisualInteractionSource och InteractionTracker.

Om du vill ha Touch and Pen (Creators Update) för att köra en manipulering via en VisualInteractionSource och InteractionTracker måste du anropa metoden VisualInteractionSource.TryRedirectForManipulation. I det korta kodfragmentet nedan från en XAML-app anropas metoden när en trycktryckt händelse inträffar högst upp i UIElement Grid:

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

Koppla in med ExpressionAnimations

När du använder InteractionTracker för att skapa en manipulationsupplevelse interagerar du främst med egenskaperna Skala och Position. Precis som andra CompositionObject-egenskaper kan dessa egenskaper vara både målet och refereras i en CompositionAnimation, oftast ExpressionAnimations.

Om du vill använda InteractionTracker i ett uttryck refererar du till trackerns position (eller skala) egenskap som i exemplet nedan. Eftersom egenskapen hos InteractionTracker ändras beroende på något av de tidigare beskrivna villkoren, förändras även uttryckets utdata.

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

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

Anmärkning

När du refererar till InteractionTracker-positionen i ett uttryck måste du negera värdet för det resulterande uttrycket för att kunna röra sig i rätt riktning. Detta beror på att InteractionTrackers förflyttning från en punkt i en graf gör det möjligt för dig att tänka på dess rörelse i "verkliga" koordinater, såsom avstånd från dess ursprung.

Get Started

Så här kommer du igång med att använda InteractionTracker för att skapa anpassade manipulationsupplevelser:

  1. Skapa ditt InteractionTracker-objekt med Hjälp av InteractionTracker.Create eller InteractionTracker.CreateWithOwner.
    • (Om du använder CreateWithOwner kontrollerar du att du implementerar gränssnittet IInteractionTrackerOwner.)
  2. Ange positionen Min och Max för din nyligen skapade InteractionTracker.
  3. Skapa din VisualInteractionSource med en CompositionVisual.
    • Se till att det visuella objekt som du skickar in har en storlek som inte är noll. Annars kommer den inte bli träfftestad korrekt.
  4. Ange egenskaperna för VisualInteractionSource.
    • VisualInteractionSourceRedirectionMode
    • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
    • Räcken och kedja
  5. Lägg till VisualInteractionSource i InteractionTracker genom att använda InteractionTracker.InteractionSources.Add.
  6. Konfigurera TryRedirectForManipulation när Pek- och Pennainmatning identifieras.
    • För XAML görs detta vanligtvis på UIElements PointerPressed-händelse.
  7. Skapa en ExpressionAnimation som refererar till InteractionTracker’s position och riktar in sig på en egenskap hos ett CompositionObject.

Här är ett kort kodfragment som visar #1–5 i praktiken:

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

Mer avancerade användningar av InteractionTracker finns i följande artiklar:

  • Last updated on