Esperienze di manipolazione personalizzate con InteractionTracker

In questo articolo viene illustrato come usare InteractionTracker per creare esperienze di manipolazione personalizzate.

Prerequisiti

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

• Animazioni basate su input
• Animazioni basate sulle relazioni

Perché creare esperienze di manipolazione personalizzate?

Nella maggior parte dei casi, l'uso dei controlli di manipolazione predefiniti è sufficiente per creare esperienze dell'interfaccia utente. Ma cosa succede se si vuole distinguere dai controlli comuni? Cosa accade se si vuole creare un'esperienza specifica basata sull'input o un'interfaccia utente in cui un movimento di manipolazione tradizionale non è sufficiente? Questo è il momento in cui viene creata un'esperienza personalizzata. Consentono agli sviluppatori e ai progettisti di app di essere più creativi: danno vita a esperienze di movimento che esemplificano meglio la loro identità di marca e il linguaggio di design personalizzato. Dalla base, si ha accesso al set corretto di blocchi predefiniti per personalizzare completamente un'esperienza di manipolazione, dal modo in cui il movimento deve rispondere con il dito sullo schermo e fuori da esso ai punti di aggancio e al concatenamento degli input.

Di seguito sono riportati alcuni esempi comuni di quando si crea un'esperienza di manipolazione personalizzata:

• Aggiunta di un comportamento personalizzato di scorrimento rapido e eliminazione/scomparsa.
• Effetti basati sull'input (la panoramica causa la sfocatura del contenuto)
• Controlli personalizzati con movimenti di manipolazione personalizzati (ListView personalizzato, ScrollViewer e così via)

Perché usare InteractionTracker?

InteractionTracker è disponibile nello spazio dei nomi Microsoft.UI.Composition.Interactions per le app WinUI e Windows App SDK. InteractionTracker abilita:

• Completa flessibilità : vogliamo che tu sia in grado di personalizzare e personalizzare ogni aspetto di un'esperienza di manipolazione; in particolare, i movimenti esatti che si verificano durante, o in risposta a, input. Quando si crea un'esperienza di manipolazione personalizzata con InteractionTracker, tutte le manopole necessarie sono a vostra disposizione.
• Prestazioni fluide : una delle sfide legate alle esperienze di manipolazione è che le prestazioni dipendono dal thread dell'interfaccia utente. Ciò può influire negativamente su qualsiasi esperienza di manipolazione quando l'interfaccia utente è occupata. InteractionTracker è stato creato per utilizzare il nuovo motore di animazione che opera su un thread indipendente a 60 FPS, ottenendo un movimento uniforme.

Panoramica: InteractionTracker

Quando si creano esperienze di manipolazione personalizzate, esistono due componenti principali con cui si interagisce. Verranno illustrati per primi questi elementi:

• InteractionTracker : l'oggetto principale che gestisce una macchina a stati le cui proprietà sono guidate dall'input dell'utente attivo o da aggiornamenti e animazioni dirette. L'obiettivo è quindi quello di collegare a un CompositionAnimation per creare il movimento di manipolazione personalizzato.
• VisualInteractionSource : oggetto complemento che definisce quando e in quali condizioni viene inviato l'input a InteractionTracker. Definisce sia CompositionVisual usato per hit testing che altre proprietà di configurazione di input.

Come macchina a stati, le proprietà di InteractionTracker possono essere guidate da uno dei seguenti elementi:

• Interazione diretta dell'utente: l'utente finale sta manipolando direttamente all'interno dell'area di hit test di VisualInteractionSource
• Le proprietà di InteractionTracker si animano secondo una curva di inerzia, sia a causa della velocità programmatica sia di un gesto dell'utente.
• CustomAnimation: un'animazione personalizzata destinata direttamente a una proprietà di InteractionTracker

Macchina a stati del Tracciatore d'interazione

Come accennato in precedenza, InteractionTracker è una macchina a stati con 4 stati, ognuno dei quali può passare a uno degli altri quattro stati. Per altre informazioni sulla transizione di InteractionTracker tra questi stati, vedi la documentazione della classe InteractionTracker .

In ognuno dei casi in cui lo stato di InteractionTracker cambia, viene generato un evento (o callback) che è possibile ascoltare. Per poter ascoltare questi eventi, è necessario implementare l'interfaccia IInteractionTrackerOwner e creare il relativo oggetto InteractionTracker con il metodo CreateWithOwner. Il diagramma seguente illustra anche quando vengono attivati i diversi eventi.

Uso di VisualInteractionSource

Per consentire a InteractionTracker di essere guidato da Input, è necessario connettersi a un oggetto VisualInteractionSource (VIS). Il vis viene creato come oggetto complemento usando compositionVisual per definire:

1. L'area di test di collisione dove verrà tracciato l'input e in cui vengono rilevati i gesti nello spazio delle coordinate
2. Le configurazioni di input che verranno rilevate e indirizzate, tra cui:
   • Gesti rilevabili: Posizione X e Y (scorrimento orizzontale e verticale), Scala (pinch, zoom con le dita)
   • Inerzia
   • Guide e concatenamento
   • Modalità di reindirizzamento: quali dati di input vengono reindirizzati automaticamente a InteractionTracker

VisualInteractionSource è anche responsabile della gestione del momento in cui i dati di input da diverse modalità (tocco, PTP, pen) vengono inoltrati a InteractionTracker. Questo comportamento è definito dalla proprietà ManipulationRedirectionMode. Per impostazione predefinita, tutti gli input del puntatore vengono inviati al thread dell'interfaccia utente, mentre l'input del Precision Touchpad viene inviato a VisualInteractionSource e InteractionTracker.

Pertanto, se vuoi utilizzare Touch e Pen (Creators Update) per guidare una manipolazione tramite VisualInteractionSource e InteractionTracker, devi chiamare il metodo VisualInteractionSource.TryRedirectForManipulation. Nel breve frammento di codice seguente da un'app XAML, il metodo viene chiamato quando si verifica un evento di pressione del tocco più in alto nella griglia UIElement.

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

Collegamento con ExpressionAnimations

Quando si usa InteractionTracker per guidare un'esperienza di manipolazione, si interagisce principalmente con le proprietà Scale e Position. Analogamente ad altre proprietà di un CompositionObject, queste proprietà possono essere sia la destinazione che i riferimenti in una CompositionAnimation, più spesso in ExpressionAnimations.

Per usare InteractionTracker all'interno di un'espressione, fare riferimento alla proprietà Position (o Scale) del tracker, come nell'esempio seguente. Poiché la proprietà di InteractionTracker viene modificata a causa di una delle condizioni descritte in precedenza, anche l'output dell'espressione cambia.

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

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

Get Started

Per iniziare a usare InteractionTracker per creare esperienze di manipolazione personalizzate:

1. Creare l'oggetto InteractionTracker usando InteractionTracker.Create o InteractionTracker.CreateWithOwner.
   • Se si usa CreateWithOwner, assicurarsi di implementare l'interfaccia IInteractionTrackerOwner.
2. Impostare la posizione Min e Max di InteractionTracker appena creata.
3. Crea il tuo VisualInteractionSource con un CompositionVisual.
   • Assicurarsi che l'oggetto visivo che stai passando abbia una dimensione diversa da zero. In caso contrario, non verrà sottoposto a hit test correttamente.
4. Impostare le proprietà di VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Binari e concatenamento
5. Aggiungere VisualInteractionSource a InteractionTracker usando InteractionTracker.InteractionSources.Add.
6. Configurare TryRedirectForManipulation per quando viene rilevato l'input da tocco e da penna.
   • Per XAML, questa operazione viene in genere eseguita sull'evento PointerPressed di UIElement.
7. Creare un'ExpressionAnimation che faccia riferimento alla posizione di InteractionTracker e che miri alla proprietà di un CompositionObject.

Ecco un breve frammento di codice che mostra #1 - 5 in azione:

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

Per utilizzi più avanzati di InteractionTracker, vedere gli articoli seguenti:

• Creare punti di ancoraggio con InertiaModifiers
• Aggiornamento tramite trascinamento verso il basso con SourceModifiers