Niestandardowe doświadczenia manipulowania za pomocą elementu InteractionTracker

W tym artykule pokazano, jak używać rozwiązania InteractionTracker do tworzenia niestandardowych środowisk manipulowania.

Wymagania wstępne

W tym miejscu przyjęto założenie, że znasz pojęcia omówione w następujących artykułach:

• Animacje oparte na danych wejściowych
• Animacje oparte na relacjach

Dlaczego tworzyć niestandardowe możliwości manipulacji?

W większości przypadków użycie wstępnie zaprojektowanych kontrolek sterowania wystarcza do tworzenia doświadczeń użytkownika interfejsu. Ale co zrobić, jeśli chcesz się odróżnić od popularnych kontrolek? Co zrobić, jeśli chcesz utworzyć określone środowisko oparte na danych wejściowych lub mieć interfejs użytkownika, w którym tradycyjny ruch manipulacji nie jest wystarczający? W tym miejscu tworzenie niestandardowych doświadczeń wchodzi w grę. Umożliwiają one deweloperom aplikacji i projektantom bardziej kreatywne podejście – ożywiają doświadczenia związane z animacjami, które lepiej ilustrują ich wizję brandingową i niestandardowy język projektowania. Od podstaw uzyskujesz dostęp do odpowiedniego zestawu bloków konstrukcyjnych, aby całkowicie dostosować doświadczenie manipulacji — od tego, jak ruch powinien reagować na dotyk palca, zarówno na ekranie, jak i poza nim, po punkty przyciągania i łańcuchy wejściowe.

Poniżej przedstawiono kilka typowych przykładów tworzenia niestandardowego środowiska manipulowania:

• Dodawanie niestandardowych gestów przesunięcia oraz zachowań usuwania/odrzucania
• Efekty sterowane danymi wejściowymi (przesuwanie powoduje rozmycie zawartości)
• Kontrolki niestandardowe z dostosowanymi ruchami manipulacji (niestandardowy ListView, ScrollViewer itp.)

Dlaczego warto używać rozwiązania InteractionTracker?

Element InteractionTracker jest dostępny w przestrzeni nazw Microsoft.UI.Composition.Interactions dla aplikacji WinUI i Windows App SDK. Funkcja InteractionTracker umożliwia:

• Pełna elastyczność — chcemy, aby można było dostosować i personalizować każdy aspekt doświadczenia manipulacji; w szczególności dokładne ruchy występujące podczas, lub w odpowiedzi na, dane wejściowe. Podczas tworzenia niestandardowego środowiska manipulowania za pomocą InteractionTracker wszystkie potrzebne pokrętła są do dyspozycji.
• Smooth Performance — jednym z wyzwań związanych z manipulowaniem środowiskami jest to, że ich wydajność zależy od wątku interfejsu użytkownika. Może to negatywnie wpłynąć na doświadczenie manipulowania, gdy interfejs użytkownika jest zajęty. InteractionTracker został zbudowany, aby korzystać z nowego silnika animacji, który działa na niezależnym wątku z szybkością 60 FPS, zapewniając płynny ruch.

Omówienie: InteractionTracker

Podczas tworzenia niestandardowych środowisk manipulowania istnieją dwa podstawowe składniki, z którymi pracujesz. Najpierw omówimy następujące kwestie:

• InteractionTracker — podstawowy obiekt utrzymujący maszynę stanu, której właściwości są oparte na aktywnych danych wejściowych użytkownika lub bezpośrednich aktualizacjach i animacjach. Ma następnie wiązać się z KompozycjąAnimation w celu utworzenia niestandardowego ruchu manipulowania.
• VisualInteractionSource — obiekt uzupełniający, który definiuje, kiedy i w jakich warunkach dane wejściowe są wysyłane do elementu InteractionTracker. Definiuje ona zarówno element CompositionVisual używany do testowania trafień, jak i inne właściwości konfiguracji danych wejściowych.

Jako maszyna stanu właściwości InteractionTracker mogą być sterowane przez dowolnego z następujących elementów:

• Bezpośrednia interakcja z użytkownikiem — użytkownik końcowy bezpośrednio manipuluje w regionie testowym elementu VisualInteractionSource
• Inercja – zarówno z prędkości programowej, jak i gestu użytkownika, właściwości InteractionTracker animują się pod krzywą inercji.
• CustomAnimation — niestandardowa animacja przeznaczona bezpośrednio dla właściwości InteractionTracker

Maszyna Stanów InteractionTracker

Jak wspomniano wcześniej, InteractionTracker jest maszyną stanu z 4 stanami — każdy z nich może przejść do dowolnego z pozostałych czterech stanów. (Aby uzyskać więcej informacji na temat sposobu przechodzenia rozwiązania InteractionTracker między tymi stanami, zobacz dokumentację klasy InteractionTracker ).

State	Opis
Idle	Brak aktywnych, sterujących danych wejściowych ani animacji
Interakcja	Wykryto aktywne wejście użytkownika
Bezwładność	Ruch aktywny wynikający z aktywnej prędkości wejściowej lub programowej
AnimacjaNiestandardowa	Ruch aktywny wynikający z animacji niestandardowej

W każdym z przypadków, w których stan elementu InteractionTracker zmienia się, generowane jest zdarzenie (lub wywołanie zwrotne), które można nasłuchiwać. Aby nasłuchiwać tych zdarzeń, musisz zaimplementować interfejs IInteractionTrackerOwner i utworzyć swój obiekt InteractionTracker za pomocą metody CreateWithOwner. Na poniższym diagramie przedstawiono również momenty, w których różne zdarzenia zostają wyzwolone.

Korzystanie z elementu VisualInteractionSource

Aby element InteractionTracker był sterowany przez dane wejściowe, należy połączyć z nim element VisualInteractionSource (VIS). VIS jest tworzony jako obiekt uzupełniający przy użyciu CompositionVisual do zdefiniowania:

1. Obszar testu trafień, w którym wejście będzie śledzone, oraz przestrzeń współrzędnych, w której wykrywane są gesty.
2. Konfiguracje danych wejściowych, które zostaną wykryte i kierowane, obejmują następujące elementy:
   • Gesty wykrywalne: położenie X i Y (poziome i pionowe przesuwanie), skalowanie (szczypta)
   • Bezwładność
   • Szyny i łańcuchy
   • Tryby przekierowania: jakie dane wejściowe są automatycznie przekierowywane do elementu InteractionTracker

Uwaga / Notatka

Ponieważ element VisualInteractionSource jest tworzony na podstawie położenia testu trafienia i przestrzeni współrzędnych obiektu wizualnego, zaleca się, aby nie używać obiektu wizualnego będącego w ruchu lub zmieniającego położenie.

Uwaga / Notatka

Możesz użyć wielu wystąpień visualInteractionSource z tym samym elementem InteractionTracker, jeśli istnieje wiele regionów testu trafień. Jednak najczęściej używa się tylko jednego VIS.

Obiekt VisualInteractionSource jest również odpowiedzialny za zarządzanie momentem, w którym dane wejściowe z różnych modalności (touch, PTP, Pen) są kierowane do elementu InteractionTracker. To zachowanie jest definiowane przez właściwość ManipulationRedirectionMode. Domyślnie wszystkie sygnały wskaźnika są kierowane do wątku interfejsu użytkownika, a sygnały z Precision Touchpad są przesyłane do VisualInteractionSource i InteractionTracker.

W związku z tym, jeśli chcesz używać Touch and Pen (Aktualizacja dla twórców) do manipulacji za pomocą VisualInteractionSource i InteractionTracker, musisz wywołać metodę VisualInteractionSource.TryRedirectForManipulation. W krótkim fragmencie kodu poniżej z aplikacji XAML metoda jest wywoływana, gdy w górnej części siatki elementu UIElement występuje zdarzenie naciśnięcia dotykowego:

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

Powiązanie z animacjami wyrażeń

Korzystając z elementu InteractionTracker do obsługi manipulacji, należy wchodzić w interakcje przede wszystkim z właściwościami skalowania i położenia. Podobnie jak inne właściwości CompositionObject, te właściwości mogą być zarówno celem, jak i przywoływane w animacjach CompositionAnimation, najczęściej w ExpressionAnimations.

Aby użyć elementu InteractionTracker w wyrażeniu, odwołaj się do właściwości Położenie (lub skala) trackera, jak w poniższym przykładzie. Ponieważ właściwość InteractionTracker jest modyfikowana z powodu któregokolwiek z opisanych wcześniej warunków, dane wyjściowe wyrażenia również zmieniają się.

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

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

Uwaga / Notatka

W przypadku odwoływania się do pozycji InteractionTracker w wyrażeniu należy negować wartość wynikowego wyrażenia, aby przejść we właściwym kierunku. Wynika to z faktu, że postęp InteractionTracker z punktu początkowego na wykresie pozwala myśleć o postępie InteractionTracker we współrzędnych "świata rzeczywistego", takich jak odległość od punktu początkowego.

Rozpocznij

Aby rozpocząć korzystanie z InteractionTracker w celu utworzenia niestandardowych środowisk interakcji:

1. Utwórz obiekt InteractionTracker przy użyciu elementu InteractionTracker.Create lub InteractionTracker.CreateWithOwner.
   • (Jeśli używasz funkcji CreateWithOwner, upewnij się, że zaimplementowasz interfejs IInteractionTrackerOwner).
2. Ustaw minimalną i maksymalną pozycję nowo utworzonego elementu InteractionTracker.
3. Utwórz element VisualInteractionSource przy użyciu elementu CompositionVisual.
   • Upewnij się, że przekazana wizualizacja ma rozmiar inny niż zero. W przeciwnym razie nie zostanie prawidłowo przetestowany.
4. Ustaw właściwości elementu VisualInteractionSource.
   • VisualInteractionSourceRedirectionMode (tryb przekierowania źródła interakcji wizualnej)
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • Szyny i łańcuchy
5. Dodaj element VisualInteractionSource do elementu InteractionTracker przy użyciu elementu InteractionTracker.InteractionSources.Add.
6. Skonfiguruj parametr TryRedirectForManipulation w przypadku wykrycia wejść dotykowych i piórem.
   • W XAML zazwyczaj odbywa się to poprzez zdarzenie PointerPressed elementu UIElement.
7. Utwórz element ExpressionAnimation, który odwołuje się do pozycji InteractionTracker i określa właściwość CompositionObject.

Oto krótki fragment kodu, który pokazuje #1 – 5 w akcji:

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

Aby uzyskać bardziej zaawansowane zastosowania rozwiązania InteractionTracker, zobacz następujące artykuły:

• Twórz punkty przyciągania za pomocą InertiaModifiers
• Pull-to-refresh przy użyciu modułów SourceModifiers