Animace založené na ukazatelích

Tento článek ukazuje, jak pomocí pozice ukazatele v aplikacích WinUI a Windows App SDK vytvořit dynamické prostředí "držet kurzor".

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 zážitky řízené pozicí kurzoru?

V jazyce návrhu Fluent není jediným způsobem interakce s uživatelským rozhraním dotykové ovládání. Vzhledem k tomu, že aplikace WinUI mohou pokrývat různé faktory formy zařízení, koncoví uživatelé interagují s aplikacemi prostřednictvím jiných způsobů vstupu, jako je Myš a Pero. Použití dat pozice z těchto dalších vstupních způsobů poskytuje příležitost, aby koncoví uživatelé cítili ještě více propojené s vaší aplikací.

Prostředí založená na poloze ukazatele umožňují využít pozici ukazatele v režimu zadávání ukazatele k vytvoření dalších prostředí pohybu a uživatelského rozhraní pro vaši aplikaci. Tato prostředí často můžou koncovým uživatelům poskytnout další kontext a zpětnou vazbu o chování a struktuře uživatelského rozhraní. Zážitek již není jednosměrný proud, ale začíná se měnit na obousměrný, kde koncový uživatel poskytuje vstup pomocí metody zadávání a uživatelské rozhraní aplikace může reagovat zpět.

Mezi příklady patří:

• Animace pozice Spotlightu pro sledování kurzoru

  

• Otočení obrázku na základě pozice ukazatele

  

Použití "pointerPositionPropertySet"

Tato prostředí můžete vytvořit pomocí PointerPositionPropertySet. Tato sada vlastností se vytvoří pro UIElement, aby udržovala pozici ukazatele, zatímco je UIElement pozitivně otestovaný. Hodnota pozice je relativní vzhledem ke souřadnici prostoru UIElement (pozice <0,0> je levý horní roh UIElement). Tuto vlastnost pak můžete využít v animaci k řízení pohybu jiné vlastnosti.

Pro každý z různých způsobů zadávání ukazatele existuje několik vstupních stavů, ve kterých může vstup být v místě, kde se změní pozice: najetí myší, stisknuto, stisknuto a přesunuto. PointerPositionPropertySet udržuje pouze pozici ukazatele ve stavech přejetí, stisknutí a stisknutí a posunutí pro myš a pero.

Obecné kroky, které vám pomůžou začít:

1. Identifikujte UIElement, ve kterém chcete sledovat pozici ukazatele.
2. Přístup k PointerPositionPropertySet prostřednictvím ElementCompositionPreview.
   • Předejte UIElement do metody ElementCompositionPreview.GetPointerPositionPropertySet.
3. Vytvořte ExpressionAnimation, která odkazuje na vlastnost Position v PropertySet.
   • Nezapomeňte nastavit referenční parametr.
4. Zacílení na vlastnost CompositionObject pomocí ExpressionAnimation.

Příklad

Podívejme se na příklad, ve kterém využíváme polohu vznášení myši a vstupní režim pera k dynamickému otáčení obrázku.

Obrázek je UIElement, takže nejprve získáme odkaz na PointerPositionPropertySet.

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(element);

V tomto příkladu máte dva výrazy v akci:

• Výraz, ve kterém se obrázek otáčí podle toho, jak daleko je ukazatel od středu obrázku. Čím dál, tím více rotace.
• Výraz, ve kterém se osa otáčení mění na základě pozice ukazatele. Chcete, aby byla osa otáčení kolmá na vektor pozice.

Zde definujete dva výrazy, jeden, který cílí na vlastnost RotationAngle, a druhý na vlastnost RotationAxis. Odkazujete na PointerPositionPropertySet stejně jako na jakýkoli jiný PropertySet.

V tomto příkladu vytváříte výrazy pomocí ExpressionBuilder třídy.

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

Viz také

• Ukázka otočení ukazatele
• PointerPositionPropertySetReferenceNode – třída