Animacje oparte na wskaźniku

W tym artykule pokazano, jak używać pozycji wskaźnika w aplikacjach WinUI i Zestaw SDK do aplikacji systemu Windows, aby utworzyć dynamiczne środowiska "trzymaj się kursora".

Wymagania wstępne

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

Dlaczego warto tworzyć środowiska wskaźników opartych na pozycji?

W języku projektowania Fluent dotyk nie jest jedynym sposobem interakcji z interfejsem użytkownika. Ponieważ aplikacje WinUI mogą obejmować wiele formatów urządzeń, użytkownicy końcowi korzystają z aplikacji za pomocą innych metod wprowadzania, takich jak mysz i pióro. Korzystanie z danych pozycji z tych innych modalności wejściowych umożliwia użytkownikom końcowym jeszcze większe połączenie z aplikacją.

Środowiska oparte na pozycji wskaźnika umożliwiają wykorzystanie położenia na ekranie modalności wejściowej wskaźnika w celu utworzenia dodatkowych środowisk ruchu i interfejsu użytkownika dla aplikacji. Te doświadczenia często mogą zapewniać użytkownikom końcowym dodatkowy kontekst i informacje zwrotne dotyczące zachowania i struktury interfejsu użytkownika. Doświadczenie nie jest już strumieniem jednokierunkowym, lecz zaczyna się stawać strumieniem dwukierunkowym, w którym użytkownik końcowy dostarcza dane przy użyciu swojego sposobu wprowadzania, a interfejs użytkownika aplikacji może odpowiednio reagować.

Oto kilka przykładów:

  • Animowanie położenia Spotlight tak, aby podążał za kursorem

    Przykład wskaźnika w centrum uwagi

  • Obracanie obrazu na podstawie położenia wskaźnika

    Przykład rotacji wskaźnika

Korzystanie z PointerPositionPropertySet

Możesz tworzyć te doświadczenia za pomocą zestawu właściwości PointerPositionPropertySet. Ten zestaw właściwości jest tworzony dla elementu UIElement w celu zachowania pozycji wskaźnika, podczas gdy element UIElement jest pozytywnie testowany. Wartość pozycji jest względna względem przestrzeni współrzędnej elementu UIElement (pozycja <0,0> to lewy górny róg elementu UIElement). Następnie możesz użyć tego zestawu właściwości w animacji, aby napędzać ruch innej właściwości.

Dla każdej z różnych metod wprowadzania wskaźnika istnieją stany wejściowe, w których pozycja może się zmieniać: nawis, naciśnięty, naciśnięty i przeniesiony. Właściwość PointerPositionPropertySet zachowuje tylko pozycję wskaźnika w stanach zawieszenia, naciśnięcia oraz naciśnięcia i przesunięcia dla myszy i pióra.

Ogólne kroki umożliwiające rozpoczęcie pracy:

  1. Zidentyfikuj element UIElement, w którym ma być śledzona pozycja wskaźnika.
  2. Uzyskaj dostęp do PointerPositionPropertySet za pośrednictwem ElementCompositionPreview.
  3. Utwórz element ExpressionAnimation odwołujący się do właściwości Position w elemencie PropertySet.
    • Nie zapomnij ustawić parametru referencyjnego!
  4. Ustal właściwość CompositionObject za pomocą ExpressionAnimation.

Uwaga / Notatka

Zaleca się przypisanie obiektu PropertySet zwróconego przez metodę GetPointerPositionPropertySet do zmiennej klasy. Gwarantuje to, że zestaw właściwości nie zostanie wyczyszczony przez Garbage Collection i w związku z tym nie będzie miał żadnego wpływu na ExpressionAnimation, do którego się odnosi. WyrażeniaAnimacje nie utrzymują silnego odwołania do żadnego z obiektów używanych w równaniu.

Przykład

Przyjrzyjmy się przykładowi, w którym wykorzystujemy pozycję najechania myszy i pióra jako metody wprowadzania, aby dynamicznie obracać obraz.

Przykład rotacji wskaźnika

Obraz jest UIElementem, więc najpierw uzyskajmy odwołanie do zestawu PointerPositionPropertySet

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(element);

W tym przykładzie są dostępne dwa wyrażenia:

  • Obraz obraca się w zależności od tego, jak daleko wskaźnik znajduje się od środka obrazu. Tym dalej, tym więcej rotacji.
  • Wyrażenie, w którym oś obrotu zmienia się na podstawie położenia wskaźnika. Oś obrotu ma być prostopadła do wektora położenia.

W tym miejscu zdefiniujesz dwa wyrażenia, które są przeznaczone dla właściwości RotationAngle i drugiej właściwości RotationAxis. Odwołujesz się do elementu PointerPositionPropertySet, podobnie jak w przypadku każdego innego zestawu właściwości.

W tym przykładzie kompilujesz wyrażenia przy użyciu klas ExpressionBuilder .

// using EF = ExpressionBuilder.ExpressionFunctions;
// || DEFINE THE EXPRESSION FOR THE ROTATION ANGLE ||
var hoverPosition = _pointerPositionPropSet.GetSpecializedReference
<PointerPositionPropertySetReferenceNode>().Position;
var angleExpressionNode =
EF.Conditional(
 hoverPosition == new Vector3(0, 0, 0),
 ExpressionValues.CurrentValue.CreateScalarCurrentValue(),
 35 * ((EF.Clamp(EF.Distance(center, hoverPosition), 0, distanceToCenter) % distanceToCenter) / distanceToCenter));
_tiltVisual.StartAnimation("RotationAngleInDegrees", angleExpressionNode);

// || DEFINE THE EXPRESSION FOR THE ROTATION AXIS ||
var axisAngleExpressionNode = EF.Vector3(
-(hoverPosition.Y - center.Y) * EF.Conditional(hoverPosition.Y == center.Y, 0, 1),
 (hoverPosition.X - center.X) * EF.Conditional(hoverPosition.X == center.X, 0, 1),
 0);
_tiltVisual.StartAnimation("RotationAxis", axisAngleExpressionNode);

Zobacz także

  • Last updated on