Megosztás a következőn keresztül:

Mutatóalapú animációk

Ez a cikk bemutatja, hogyan használhatja a mutató pozícióját a WinUI- és a Windows App SDK-alkalmazásokban dinamikus "kurzorhoz ragaszkodó" élmények létrehozásához.

Előfeltételek

Feltételezzük, hogy ismeri az alábbi cikkekben tárgyalt fogalmakat:

Miért érdemes kurzorpozíció-alapú élményeket létrehozni?

A fluent tervezési nyelven nem az érintés az egyetlen módja a felhasználói felülettel való interakciónak. Mivel a WinUI-alkalmazások több eszközforma-tényezőre is kiterjedhetnek, a végfelhasználók más beviteli módokkal, például egérrel és tollal is kommunikálhatnak az alkalmazásokkal. A többi bemeneti mód pozícióadatainak használata lehetőséget ad arra, hogy a végfelhasználók úgy érezzék, még jobban kapcsolódnak az alkalmazáshoz.

A mutató pozícióalapú felületei lehetővé teszik, hogy a mutató bemeneti modalitásának képernyőbeli pozícióját kihasználva további mozgási és felhasználói felületi élményeket hozzon létre az alkalmazás számára. Ezek a szolgáltatások gyakran további kontextust és visszajelzést adhatnak a végfelhasználóknak a felhasználói felület viselkedéséről és szerkezetéről. A felhasználói élmény már nem egyirányú stream, hanem egy kétirányú streamgé válik, ahol a végfelhasználó bemenetet biztosít a bemeneti móddal, és az alkalmazás felhasználói felülete válaszolhat.

Néhány példa:

  • Reflektorfény pozíciójának animálása a kurzor követéséhez

    Mutató kiemelésének példája

  • Kép elforgatása egy mutató pozíciója alapján

    Példa mutatóforgatásra

A PointerPositionPropertySet használata

Ezeket a szolgáltatásokat a PointerPositionPropertySet használatával hozhatja létre. Ez a PropertySet egy UIElement számára jön létre, hogy fenntartsa az egérmutató pozícióját, miközben a UIElement pozitívan van tesztelve. A pozíció értéke az UIElement koordináta-területéhez viszonyítva (a 0,0< pozíció >az UIElement bal felső sarkában található). Ezután az animációban beállított tulajdonságot használhatja egy másik tulajdonság mozgásának mozgatásához.

A mutató különböző beviteli módjainak mindegyikéhez számos bemeneti állapot tartozik, amelyekben a bemenet olyan helyzetben van, ahol a pozíció változhat: Helyezés, Lenyomva, Lenyomva és Áthelyezve. A PointerPositionPropertySet csak az egér és a toll rámutatási, lenyomott és áthelyezett állapotában tartja fenn a mutató pozícióját.

Az első lépések általános lépései:

  1. Határozza meg azt a UIElement elemet, amelyben szeretné nyomon követni a mutató pozícióját.
  2. A PointerPositionPropertySet elemcsoport elérése az ElementCompositionPreview segítségével.
  3. Hozzon létre egy ExpressionAnimation tulajdonságot, amely a PropertySet Pozíció tulajdonságára hivatkozik.
    • Ne felejtse el beállítani a referenciaparamétert!
  4. Egy CompositionObject tulajdonság megcélzása a ExpressionAnimation használatával.

Megjegyzés:

Javasoljuk, hogy a GetPointerPositionPropertySet metódusból visszaadott PropertySet tulajdonsághalmazt rendelje hozzá egy osztályváltozóhoz. Ez biztosítja, hogy a tulajdonságkészletet ne tisztítsa meg a Szemétgyűjtés, így nincs hatással a hivatkozott Kifejezésanimációra. Az ExpressionAnimations nem tart fenn erős hivatkozást az egyenletben használt objektumokra.

Example

Vegyünk egy példát, ahol az egér és a toll bemeneti modalitásának lebegő pozícióját használjuk egy kép dinamikus elforgatására.

Példa mutatóforgatásra

A kép egy UIElement, ezért először szerezzünk egy hivatkozást a PointerPositionPropertySet-re.

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element);

Ebben a mintában két kifejezés van érvényben.

  • Olyan kifejezés, amelyben a kép a mutató távolsága alapján forog a kép közepétől. Minél távolabb, annál nagyobb a forgatási szög.
  • Olyan kifejezés, amelyben a forgatási tengely a mutató pozíciója alapján változik. Azt szeretné, hogy a forgatási tengely merőleges legyen a pozíció vektorára.

Itt meghatározhatja a két kifejezést: az egyiket a Forgásszög tulajdonságra, a másikat pedig a Forgástengely tulajdonságra. A PointerPositionPropertySet-re úgy hivatkozik, mint bármely más PropertySetre.

Ebben a példában kifejezéseket készít a ExpressionBuilder osztályokkal.

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

Lásd még

  • Last updated on