Pekarbaserade animeringar

Den här artikeln visar hur du använder positionen för en pekare i WinUI- och Windows App SDK-appar för att skapa dynamiska funktioner för att hålla sig till markören.

Förutsättningar

Här förutsätter vi att du är bekant med de begrepp som beskrivs i dessa artiklar:

• Indatadrivna animeringar
• Relationsbaserade animeringar

Varför skapa upplevelser som styrs av pekarens position?

På designspråket Fluent är touch inte det enda sättet att interagera med användargränssnittet. Eftersom WinUI-appar kan sträcka sig över flera enhetsformfaktorer interagerar slutanvändarna med appar med andra indatamodaliteter som Mus och Penna. Genom att använda positionsdata från dessa andra indatamodaliteter kan slutanvändarna känna sig ännu mer anslutna till din app.

Med pekarlägesdrivna upplevelser kan du använda positionen på skärmen för en pekarindatamodalitet för att skapa ytterligare rörelse- och användargränssnittsupplevelser för din app. Dessa upplevelser kan ofta ge ytterligare kontext och feedback till slutanvändare om användargränssnittets beteende och struktur. Upplevelsen är inte längre en enkelriktad ström, utan börjar snarare bli en dubbelriktad ström där slutanvändaren tillhandahåller indata med sin indatamodalitet och appgränssnittet kan svara tillbaka.

Vissa exempel inkluderar:

• Animera positionen för en Spotlight för att följa markören

  

• Rotera en bild baserat på pekarens position

  

Använda PointerPositionPropertySet

Du kan skapa dessa upplevelser med hjälp av PointerPositionPropertySet. Den här egenskapsuppsättningen skapas för ett UIElement för att behålla pekarens position när UIElementen träffas korrekt. Positionsvärdet är relativt koordinatsystemet för UIElement (en position av <0,0> är det övre vänstra hörnet för UIElement). Du kan sedan använda den här egenskapsuppsättningen i en Animation för att driva rörelsen av en annan egenskap.

För varje pekarinmatningsmodalitet finns det flera inmatningstillstånd som positionen kan vara i där den ändras: Hovra, Tryckt, Tryckt och flyttat. PointerPositionPropertySet behåller bara pekarens position i hovrings-, nedtryckt och nedtryckt och flyttat tillstånd för mus och penna.

Allmänna steg för att komma igång:

1. Identifiera UIElement. Du vill att pekarens position ska spåras.
2. Åtkomst till PointerPositionPropertySet via ElementCompositionPreview.
   • Skicka UIElement till metoden ElementCompositionPreview.GetPointerPositionPropertySet .
3. Skapa en ExpressionAnimation som refererar till egenskapen Position i egenskapen PropertySet.
   • Glöm inte att ange referensparametern!
4. Rikta mot en egenskap hos CompositionObject med ExpressionAnimation.

Exempel

Nu ska vi ta en titt på ett exempel där vi använder hovringspositionen för en mus- och penninmatningsmodalitet för att dynamiskt rotera en bild.

Avbildningen är ett UIElement, så vi ska först hämta en referens till PointerPositionPropertySet

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(element);

I det här exemplet har du två uttryck som används:

• Ett uttryck där bilden roterar beroende på hur långt pekaren är från bildens mitt. Ju längre bort, desto mer rotation.
• Ett uttryck där rotationsaxeln ändras baserat på pekarens position. Du vill att rotationsaxeln ska vara vinkelrät mot positionens vektor.

Här definierar du de två uttrycken, ett som riktar sig mot egenskapen RotationAngle och den andra egenskapen RotationAxis. Du refererar till PointerPositionPropertySet som vilken annan egenskapsuppsättning som helst.

I det här exemplet skapar du uttryck med hjälp av ExpressionBuilder-klasserna .

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

Se även

• Exempel på rotation av pekare
• PointerPositionPropertySetReferenceNode klass