Egyéni manipulációs műveletek az InteractionTrackerrel

Ebben a cikkben bemutatjuk, hogyan hozhat létre egyéni manipulációs szolgáltatásokat az InteractionTracker használatával.

Előfeltételek

Feltételezzük, hogy ismeri az alábbi cikkekben tárgyalt fogalmakat:

• Bemenetalapú animációk
• Relációs animációk

Miért érdemes egyéni manipulációs élményeket létrehozni?

A legtöbb esetben az előre összeállított manipulációs vezérlők használata elegendő a felhasználói felületi élmények létrehozásához. De mi van, ha meg szeretné különböztetni az általános vezérlőktől? Mi a teendő, ha egy adott, bemeneten alapuló élményt szeretne létrehozni, vagy olyan felhasználói felülettel rendelkezik, ahol a hagyományos manipulációs mozgás nem elegendő? Itt jön létre az egyéni élmények létrehozása. Lehetővé teszik az alkalmazásfejlesztők és tervezők számára, hogy kreatívabbak legyenek – olyan mozgásélményeket keltenek, amelyek jobban példázzák a márkaépítést és az egyéni tervezési nyelvet. Az alapoktól fogva hozzáférést kap a megfelelő építőelemekhez, amelyekkel teljesen testre szabhatja az interakciós élményt – az ujj képernyővel való érintkezésére adott mozgásreakciótól kezdve a rögzítési pontokig és a bemenetek láncolásának lehetőségéig.

Az alábbiakban néhány gyakori példát láthat arra, hogy mikor hoz létre egyéni manipulációs felületet:

• Egyéni húzási, törlési/elutasítási viselkedés hozzáadása
• Bemenetalapú effektusok (a pásztázás miatt a tartalom elmosódik)
• Egyéni vezérlők személyre szabott manipulációs mozgásokkal (egyéni ListView, ScrollViewer stb.)

Miért érdemes az InteractionTrackert használni?

Az InteractionTracker a WinUI- és Windows App SDK-alkalmazások Microsoft.UI.Composition.Interactions névterében érhető el. Az InteractionTracker a következőket teszi lehetővé:

• Teljes rugalmasság – azt szeretnénk, hogy testre szabhassa a manipulációs élmény minden aspektusát; konkrétan azokat a pontos mozgásokat, amelyek a bemenet során vagy annak reakciójaként fordulnak elő. Az InteractionTracker egyéni manipulációs élményének létrehozásakor minden szükséges gomb a rendelkezésére áll.
• Sima teljesítmény – a manipulációs élmények egyik kihívása, hogy teljesítményük a felhasználói felület szálától függ. Ez negatívan befolyásolhatja a felhasználói felület foglaltsága esetén a manipulációs élményt. Az InteractionTracker úgy lett kialakítva, hogy az új animációs motort használja, amely független szálon működik 60 FPS-en, ami zökkenőmentes mozgást eredményez.

Áttekintés: InteractionTracker

Egyéni manipulációs élmények létrehozásakor két elsődleges összetevővel lép kölcsönhatásba. Először a következőkről lesz szó:

• InteractionTracker – az állapotgépet karbantartó alapvető objektum, amelynek tulajdonságait aktív felhasználói bemenet vagy közvetlen frissítések és animációk vezérlik. Ezt követően egy CompositionAnimation-hez kell kötni, hogy létrehozhassa az egyéni manipulációs mozgást.
• VisualInteractionSource – egy kiegészítő objektum, amely meghatározza, hogy mikor és milyen feltételek mellett küldi el a bemenetet az InteractionTrackernek. Meghatározza a Hit-teszteléshez használt CompositionVisual-t, valamint az egyéb bemeneti konfigurációs tulajdonságokat.

Állapotgépként az InteractionTracker tulajdonságait az alábbiak bármelyike vezérelheti:

• Közvetlen felhasználói interakció – a végfelhasználó közvetlenül módosítja a VisualInteractionSource találat-teszt régióját
• Tehetetlenség – programozott sebességből vagy felhasználói kézmozdulatból az InteractionTracker tulajdonságai animálhatók egy tehetetlenségi görbe alatt
• CustomAnimation – egy egyéni animáció, amely közvetlenül az InteractionTracker tulajdonságát célozza

Az InteractionTracker állapotgép

Ahogy korábban említettük, az InteractionTracker egy 4 állapottal rendelkező állapotgép, amelyek mindegyike áttérhet a másik négy állapot bármelyikére. (További információ arról, hogy az InteractionTracker hogyan vált át ezek között az állapotok között, tekintse meg az InteractionTracker osztály dokumentációját.)

Állam	Leírás
Idle	Nincsenek aktív, vezetői bemenetek vagy animációk
Kapcsolatba lépni	Aktív felhasználói bevitel észlelhető
Tehetetlenség	Aktív bemenetből vagy programozott sebességből eredő aktív mozgás
Egyedi Animáció	Egyéni animációból származó aktív mozgás

Minden olyan esetben, amikor az InteractionTracker állapota megváltozik, létrejön egy esemény (vagy visszahívás), amelyet figyelhet. Ahhoz, hogy meghallgathassa ezeket az eseményeket, implementálnia kell az IInteractionTrackerOwner felületet, és létre kell hoznia az InteractionTracker objektumot a CreateWithOwner metódussal. Az alábbi ábra azt is ismerteti, hogy mikor aktiválódnak a különböző események.

A VisualInteractionSource használata

Ahhoz, hogy az InteractionTrackert bemenet vezérelje, hozzá kell csatlakoztatnia egy VisualInteractionSource-t (VIS). A VIS komplement objektumként jön létre egy CompositionVisual használatával a következők definiálásához:

1. A bemenő találati teszt régiója nyomon lesz követve, és a koordinátatér-kézmozdulatok a következő helyen lesznek észlelhetők:
2. A bemeneti konfigurációk, amelyek észlelve és irányítva lesznek, többek között a következők:
   • Észlelhető kézmozdulatok: X és Y pozíció (vízszintes és függőleges pásztázás), Nagyítás/kicsinyítés (csippentés)
   • Tehetetlenség
   • Sínek és láncolás
   • Átirányítási módok: milyen bemeneti adatok lesznek automatikusan átirányítva az InteractionTrackerbe

Megjegyzés:

Mivel a VisualInteractionSource a vizualizáció találattesztelési pozíciója és koordinátaterülete alapján jön létre, javasolt, hogy ne használjon mozgásban vagy változó helyzetben lévő vizualizációt.

Megjegyzés:

Több VisualInteractionSource-példányt is használhat ugyanazzal az InteractionTrackerrel, ha több találattesztelési régió van. A leggyakoribb eset azonban az, hogy csak egy VIS-t használ.

A VisualInteractionSource felelős a különböző modalitásokból (érintés, PTP, toll) származó bemeneti adatokNak az InteractionTrackerhez való átirányításakor is. Ezt a viselkedést a ManipulationRedirectionMode tulajdonság határozza meg. Alapértelmezés szerint az összes mutatóbemenet a felhasználói felületi szálra kerül, a Precision Touchpad bemenet pedig a VisualInteractionSource-ba és az InteractionTrackerbe kerül.

Így ha a VisualInteractionSource és az InteractionTracker használatával szeretné vezérelni az érintést és a tollat (Creators Update), akkor a VisualInteractionSource.TryRedirectForManipulation metódust kell meghívnia. Egy XAML-alkalmazás alábbi rövid kódrészletében a metódus akkor lesz meghívva, ha egy érintéssel lenyomott esemény történik a legfelső UIElement Gridben:

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

Az ExpressionAnimations összekapcsolása

Amikor az InteractionTrackert használja a manipulációs élmény eléréséhez, elsősorban a méretezési és pozíciótulajdonságokkal kell interakcióba lépnie. A CompositionObject egyéb tulajdonságaihoz hasonlóan ezek a tulajdonságok lehetnek a cél és a hivatkozás is a CompositionAnimation( leggyakrabban ExpressionAnimations) kifejezésekben.

Az InteractionTracker egy kifejezésben történő használatakor hivatkozzon az InteractionTracker Pozíció (vagy Méretezés) tulajdonságára, ahogy az alábbi példában látható. Mivel az InteractionTracker tulajdonsága a korábban ismertetett feltételek bármelyike miatt módosul, a Kifejezés kimenete is megváltozik.

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

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

Megjegyzés:

Amikor egy kifejezésben az InteractionTracker pozíciójára hivatkozik, akkor a kapott kifejezés értékét meg kell tagadni, hogy a megfelelő irányba mozduljon. Ennek az az oka, hogy az InteractionTracker fejlődése a kiindulási ponttól egy grafikonon úgy van alakítva, hogy lehetővé tegye az InteractionTracker előrehaladásának mérését "valós világ" koordinátákban, például a kiindulási ponttól való távolságra.

Első lépések

Az InteractionTracker egyéni manipulációs szolgáltatások létrehozásához való használatának első lépései:

1. Hozza létre Az InteractionTracker objektumot az InteractionTracker.Create vagy az InteractionTracker.CreateWithOwner használatával.
   • (Ha a CreateWithOwnert használja, győződjön meg arról, hogy implementálja az IInteractionTrackerOwner felületet.)
2. Állítsa be az újonnan létrehozott InteractionTracker minimális és maximális pozícióját.
3. Hozza létre a VisualInteractionSource-t egy CompositionVisual használatával.
   • Győződjön meg arról, hogy az átadott vizualizáció mérete nem nulla. Ellenkező esetben nem lesz megfelelően tesztelve.
4. Adja meg a VisualInteractionSource tulajdonságait.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Sínek és láncolás
5. Adja hozzá a VisualInteractionSource-t az InteractionTrackerhez az InteractionTracker.InteractionSources.Add használatával.
6. A TryRedirectForManipulation beállítása érintés vagy tollbemenet érzékelésekor.
   • XAML esetén ez általában a UIElement PointerPressed eseményén történik.
7. Hozzon létre egy ExpressionAnimationt, amely az InteractionTracker pozíciójára hivatkozik, és megcélozza a CompositionObject tulajdonságát.

Íme egy rövid kódrészlet, amely az 1– 5. műveletet jeleníti meg:

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

Az InteractionTracker speciálisabb használati módjaiért tekintse meg az alábbi cikkeket:

• Kapcsolási pontok létrehozása az InertiaModifiers használatával
• Húzással történő frissítés a SourceModifiers használatával