Animacje oparte na danych wejściowych

Ten artykuł zawiera wprowadzenie do interfejsu API InputAnimation w aplikacjach WinUI i Zestawu SDK aplikacji systemu Windows oraz zaleca korzystanie z tych typów animacji w interfejsie użytkownika.

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 relacjach

Płynny ruch sterowany interakcjami użytkownika

W języku Fluent Design interakcja między użytkownikami końcowymi i aplikacjami ma największe znaczenie. Aplikacje muszą nie tylko wyglądać, ale także reagować naturalnie i dynamicznie na użytkowników, którzy z nimi korzystają. Oznacza to, że gdy na ekranie znajduje się palec, interfejs użytkownika powinien sprawnie reagować na zmiany stopnia danych wejściowych; przewijanie powinno być płynne i śledzić ruch palca przesuwającego się po ekranie.

Tworzenie interfejsu użytkownika, który dynamicznie i płynnie reaguje na dane wejściowe użytkownika, powoduje większe zaangażowanie użytkowników — ruch teraz nie tylko wygląda dobrze, ale czuje się dobrze i naturalnie, gdy użytkownicy wchodzą w interakcję z różnymi środowiskami interfejsu użytkownika. Dzięki temu użytkownicy końcowi mogą łatwiej łączyć się z aplikacją, co sprawia, że doświadczenie jest bardziej niezapomniane i przyjemne.

Rozszerzanie wykraczające poza sam dotyk

Chociaż dotyk jest jednym z bardziej typowych interfejsów, których użytkownicy końcowi używają do manipulowania zawartością interfejsu użytkownika, będą również używać różnych innych modalności danych wejściowych, takich jak mysz i pióro. W takich przypadkach ważne jest, aby użytkownicy końcowi postrzegali, że interfejs użytkownika reaguje dynamicznie na swoje dane wejściowe, niezależnie od tego, jakiej modalności danych wejściowych zdecydują się używać. Podczas projektowania doświadczeń ruchowych opartych na danych wejściowych należy uwzględniać różne sposoby wprowadzania danych.

Różne doświadczenia ruchowe Input-Driven

Przestrzeń InputAnimation zapewnia kilka różnych doświadczeń, które umożliwiają dynamicznie reagujące ruchy. Podobnie jak pozostała część systemu animacji kompozycyjnej Windows App SDK, te animacje sterowane danymi wejściowymi działają na niezależnym wątku, co przyczynia się do dynamicznego wrażenia ruchu. Jednak w niektórych przypadkach, gdy doświadczenie użytkownika korzysta z istniejących kontrolek i składników XAML, części tych doświadczeń są nadal powiązane z wątkiem interfejsu użytkownika.

Istnieją trzy podstawowe środowiska tworzone podczas tworzenia dynamicznych animacji ruchu opartego na danych wejściowych:

1. Ulepszanie istniejących środowisk ScrollView — umożliwia pozycję narzędzia XAML ScrollViewer do sterowania dynamicznymi animacjami.
2. Położenie sterowane wskaźnikiem — wykorzystanie pozycji kursora na przetestowanym elemencie interfejsu użytkownika do tworzenia dynamicznych doświadczeń animacji.
3. Niestandardowe środowiska manipulowania za pomocą elementu InteractionTracker — umożliwiają tworzenie w pełni dostosowanych środowisk manipulowania poza wątkami za pomocą rozwiązania InteractionTracker (na przykład kanwy przewijania/powiększania).

Ulepszanie istniejących doświadczeń ScrollViewer

Jednym z typowych sposobów tworzenia bardziej dynamicznych środowisk jest oparcie o istniejącą kontrolkę XAML ScrollViewer. W takich sytuacjach możesz wykorzystać pozycję przewijania w ScrollViewer, aby tworzyć dodatkowe elementy interfejsu użytkownika, które sprawiają, że proste doświadczenie przewijania jest bardziej dynamiczne. Niektóre przykłady to przyklejone/pływające nagłówki (Sticky/Shy Headers) i efekt paralaksy (Parallax).

Podczas tworzenia tych typów środowisk istnieje ogólna formuła do naśladowania:

1. Uzyskaj dostęp do zestawu właściwości ScrollManipulationPropertySet z kontrolki XAML ScrollViewer, którą chcesz wykorzystać do animacji.
   • Realizowane za pomocą interfejsu API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(element UIElement)
   • Zwraca właściwość CompositionPropertySet zawierającą właściwość o nazwie Translation
2. Utwórz Composition ExpressionAnimation z równaniem odwołującym się do właściwości Translation.
3. Rozpocznij animację we właściwości CompositionObject.

Aby uzyskać więcej informacji na temat tworzenia tych środowisk, zobacz Ulepszanie istniejących środowisk programu ScrollViewer.

Doświadczenia sterowane pozycją wskaźnika

Innym typowym środowiskiem dynamicznym obejmującym dane wejściowe jest prowadzenie animacji na podstawie położenia wskaźnika, takiego jak kursor myszy. W takich sytuacjach deweloperzy korzystają z lokalizacji kursora, gdy trafienie jest testowane w elemecie UIElement XAML, dzięki czemu środowiska takie jak Spotlight Reveal są możliwe do utworzenia.

Podczas tworzenia tych typów środowisk istnieje ogólna formuła do naśladowania:

1. Uzyskaj dostęp do klasy PointerPositionPropertySet z UIElement XAML, dla którego chcesz znać położenie kursora, gdy jest testowany pod kątem trafienia.
   • Wykonane za pomocą interfejsu API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element)
   • Zwraca właściwość CompositionPropertySet zawierającą właściwość o nazwie Position
2. Utwórz obiekt CompositionExpressionAnimation, który zawiera równanie odwołujące się do właściwości Position.
3. Rozpocznij animację na właściwości obiektu CompositionObject.

Niestandardowe doświadczenia manipulowania za pomocą elementu InteractionTracker

Jednym z wyzwań związanych z użyciem programu XAML ScrollViewer jest to, że jest on powiązany z wątkiem interfejsu użytkownika. W rezultacie doświadczenie przewijania i powiększania może często opóźniać się i zacinać, gdy wątek interfejsu użytkownika jest zajęty, co prowadzi do nieprzyjemnego doświadczenia. Ponadto nie można dostosować wielu aspektów środowiska ScrollViewer. Funkcja InteractionTracker została utworzona w celu rozwiązania obu problemów, udostępniając zestaw bloków konstrukcyjnych w celu utworzenia niestandardowych środowisk manipulowania uruchamianych w niezależnym wątku.

Podczas tworzenia środowisk z funkcją InteractionTracker istnieje ogólna formuła do naśladowania:

1. Utwórz obiekt InteractionTracker i zdefiniuj jego właściwości.
2. Utwórz VisualInteractionSources dla dowolnego elementu CompositionVisual, które powinny przechwytywać dane wejściowe dla InteractionTracker do przetwarzania.
3. Utwórz Composition ExpressionAnimation z równaniem odwołującym się do właściwości Position elementu InteractionTracker.
4. Rozpocznij animację na właściwości obiektu Composition Visual, którą chcesz kontrolować za pomocą elementu InteractionTracker.