Vlastní manipulativní zážitky s využitím InteractionTrackeru

V tomto článku si ukážeme, jak používat InteractionTracker k vytváření vlastních prostředí pro manipulaci.

Předpoklady

Tady předpokládáme, že znáte koncepty, které jsou popsány v těchto článcích:

• Animace řízené vstupem
• Animace založené na relacích

Proč vytvářet vlastní prostředí pro manipulaci?

Ve většině případů je použití předdefinovaných ovládacích prvků pro manipulaci dostačující k vytvoření uživatelského rozhraní. Ale co kdybyste chtěli odlišit ty běžné ovládací prvky? Co když chcete vytvořit konkrétní prostředí řízené vstupem nebo mít uživatelské rozhraní, kde tradiční pohyb manipulace nestačí? Právě zde přichází vytváření vlastních zážitků. Umožňují vývojářům aplikací a návrhářům být kreativní – přinášejí do života pohybové prostředí, které lépe ilustrují jejich branding a vlastní jazyk návrhu. Od základů máte přístup ke správné sadě stavebních bloků, abyste zcela přizpůsobili manipulaci – od toho, jak by měl pohyb reagovat prstem na obrazovce i mimo obrazovku, až po přichytávací body a vstupní řetězení.

Tady je několik běžných příkladů, kdy byste vytvořili vlastní prostředí pro manipulaci:

• Přidání vlastního chování při potáhnutí prstem, odstranění nebo odmítnutí
• Efekty řízené vstupem (posouvání způsobuje rozostření obsahu)
• Vlastní ovládací prvky s přizpůsobenými pohyby manipulace (vlastní ListView, ScrollViewer atd.)

Proč používat InteractionTracker?

InteractionTracker je k dispozici v oboru názvů Microsoft.UI.Composition.Interactions pro aplikace WinUI a Windows App SDK. InteractionTracker umožňuje:

• Úplná flexibilita – chceme, abyste mohli upravit a přizpůsobit každý aspekt uživatelské manipulace; konkrétně přesné pohyby, ke kterým dochází během uživatelského vstupu nebo v reakci na něj. Při vytváření vlastního prostředí pro manipulaci s InteractionTrackerem jsou k dispozici všechny potřebné uzly.
• Hladký výkon – jedním z problémů s manipulačními interakcemi je, že jejich výkon závisí na vlákně uživatelského rozhraní. To může mít negativní vliv na veškeré možnosti manipulace, když je uživatelské rozhraní zaneprázdněné. InteractionTracker byl vytvořen tak, aby využíval nový animační modul, který pracuje na nezávislém vlákně při 60 FPS, což vede k hladkému pohybu.

Přehled: InteractionTracker

Při vytváření vlastních prostředí pro manipulaci existují dvě primární komponenty, se kterými komunikujete. Nejprve probereme tyto informace:

• InteractionTracker – základní objekt udržuje stavový počítač, jehož vlastnosti jsou řízeny aktivním uživatelským vstupem nebo přímými aktualizacemi a animacemi. Účelem je pak napojit na CompositionAnimation pro vytvoření vlastní animační manipulace.
• VisualInteractionSource – doplněk objektu, který definuje, kdy a za jakých podmínek se vstup odešle do InteractionTrackeru. Definuje jak CompositionVisual používaný pro zásahové testování, tak i další vlastnosti konfigurace vstupů.

Jako stavový počítač mohou být vlastnosti InteractionTracker řízeny některou z následujících možností:

• Přímá interakce uživatele – koncový uživatel přímo manipuluje v rámci oblasti hit-test VisualInteractionSource.
• Inerciální pohyb – ať už z programové rychlosti nebo gesta uživatele, vlastnosti InteractionTracker se animují pod inertní křivkou.
• CustomAnimation – vlastní animace přímo cílící na vlastnost InteractionTracker

Počítač stavu InteractionTracker

Jak už bylo zmíněno dříve, InteractionTracker je stavový počítač se 4 stavy – každý z nich může přejít na kterýkoli z ostatních čtyř stavů. (Další informace o tom, jak InteractionTracker přechází mezi těmito stavy, najdete v dokumentaci ke třídě InteractionTracker .)

Kraj	Description
Idle	Žádné aktivní řídicí vstupy ani animace
Interakce	Byl zjištěn aktivní vstup uživatele.
Setrvačnost	Aktivní pohyb vyplývající z aktivního vstupu nebo programové rychlosti
CustomAnimation	Aktivní pohyb vyplývající z vlastní animace

V každém z případů, kdy se stav InteractionTrackeru změní, se vygeneruje událost (nebo zpětné volání), kterou můžete naslouchat. Aby bylo možné naslouchat těmto událostem, musí implementovat IInteractionTrackerOwner rozhraní a vytvořit jejich InteractionTracker objekt pomocí CreateWithOwner metoda. Následující diagram také popisuje, kdy se aktivují různé události.

Použití VisualInteractionSource

Aby byl InteractionTracker řízen vstupem, musíte k němu připojit VisualInteractionSource (VIS). VIS je vytvořen jako doplněk objektu pomocí CompositionVisual k definování:

1. Oblast hit-test, ve které bude sledován vstup, a kde jsou detekována gesta v souřadnicovém prostoru.
2. Mezi konfigurace vstupů, které budou zjištěny a směrovány, patří například:
   • Detekovatelná gesta: Poloha X a Y (vodorovné a svislé posouvání), Měřítko (sevření)
   • Setrvačnost
   • Kolejnice a řetězení
   • Režimy přesměrování: Jaká vstupní data se automaticky přesměrují na InteractionTracker

Poznámka:

Vzhledem k tomu, že VisualInteractionSource je vytvořen na základě pozice testu zásahu a souřadnicového prostoru vizuálu, nedoporučuje se používat vizuál, který bude v pohybu nebo měnit svou pozici.

Poznámka:

Pokud existuje více oblastí hit-test, můžete použít více instancí VisualInteractionSource se stejným InteractionTrackerem. Nejběžnějším případem je však použití pouze jednoho VIS.

VisualInteractionSource také zodpovídá za správu, když se vstupní data z různých způsobů (touch, PTP, Pen) směrují do InteractionTrackeru. Toto chování je definováno vlastností ManipulationRedirectionMode. Ve výchozím nastavení jsou všechny vstupy Pointer odesílány do vlákna uživatelského rozhraní a vstup z Precision Touchpad směřuje k systémům VisualInteractionSource a InteractionTracker.

Proto pokud chcete pomocí VisualInteractionSource a InteractionTracker ovládat manipulaci prostřednictvím Touch and Pen (Creators Update), musíte zavolat metodu VisualInteractionSource.TryRedirectForManipulation. V krátkém fragmentu kódu níže z aplikace XAML se metoda volá, když dojde k události stisknutí dotykem na nejvyšším prvku UIElement Grid.

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

Napojení na ExpressionAnimations

Při využití InteractionTrackeru ke řízení manipulace se zaměřujete především na vlastnosti Měřítko a Pozice. Stejně jako jiné vlastnosti CompositionObject mohou být tyto vlastnosti jak cílem, tak odkazovány v CompositionAnimation, nejčastěji ExpressionAnimations.

Chcete-li použít InteractionTracker v rámci výrazu, odkazujte na vlastnost Position (nebo Scale) trackeru, jako je v příkladu níže. Když je vlastnost InteractionTracker upravena z některé z podmínek uvedených výše, výstup výrazu se také změní.

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

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

Poznámka:

Při odkazování na pozici InteractionTracker ve Výrazu je třeba negovat hodnotu výsledného Výrazu, aby se pohybovala správným směrem. Je to proto, že vývoj systému InteractionTracker od jeho počátku na grafu vám umožňuje zamyslet se nad jeho průběhem v souřadnicích „skutečného světa“, jako je vzdálenost od jeho původu.

Začínáme

Začínáme s používáním InteractionTrackeru k vytváření vlastních prostředí pro manipulaci:

1. Vytvořte objekt InteractionTracker pomocí InteractionTracker.Create nebo InteractionTracker.CreateWithOwner.
   • (Pokud používáte CreateWithOwner, ujistěte se, že implementujete rozhraní IInteractionTrackerOwner.)
2. Nastavte minimální a maximální pozici nově vytvořeného InteractionTrackeru.
3. Vytvořte VisualInteractionSource pomocí compositionVisual.
   • Ujistěte se, že vizuál, který předáváte, má nenulovou velikost. Jinak se správně neotestuje.
4. Nastavte vlastnosti VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Kolejnice a propojení
5. Přidejte VisualInteractionSource do InteractionTracker pomocí InteractionTracker.InteractionSources.Add.
6. Nastavte TryRedirectForManipulation, když je zjištěn dotykový a perový vstup.
   • Pro XAML se to obvykle provádí pro událost UIElement PointerPressed.
7. Vytvořte ExpressionAnimation, která odkazuje na umístění InteractionTracker a cílí na vlastnost CompositionObject.

Tady je krátký fragment kódu, který zobrazuje #1 – 5 v akci:

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

Pokročilejší využití InteractionTrackeru najdete v následujících článcích:

• Vytváření bodů přichycení pomocí inertiaModifiers
• Aktualizace na vyžádání pomocí zdrojovýchmodifikátorů