Condividi tramite

Animazioni basate su puntatore

Questo articolo illustra come usare la posizione di un puntatore nelle app WinUI e Windows App SDK per creare esperienze dinamiche "stick to the cursor".

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

Perché creare esperienze basate sulla posizione del puntatore?

Nel linguaggio di progettazione Fluent, il tocco non è l'unico modo per interagire con l'interfaccia utente. Poiché le app WinUI possono estendersi su più fattori di forma del dispositivo, gli utenti finali interagiscono con le app con altre modalità di input, ad esempio Mouse e Penna. L'uso dei dati sulla posizione di queste altre modalità di input offre un'opportunità per rendere gli utenti finali ancora più connessi all'app.

Le esperienze basate sulla posizione del puntatore consentono di sfruttare la posizione sullo schermo di una modalità di input del puntatore per creare altre esperienze di movimento e interfaccia utente per la tua app. Queste esperienze spesso possono fornire contesto e feedback aggiuntivi agli utenti finali sul comportamento e sulla struttura dell'interfaccia utente. L'esperienza non è più un flusso unidirezionale, ma diventa piuttosto un flusso bidirezionale in cui l'utente finale fornisce input con la propria modalità di input e l'interfaccia utente dell'app può rispondere.

Alcuni esempi includono:

  • Animazione della posizione di un Spotlight per seguire il cursore

    Esempio di evidenziazione del puntatore

  • Rotazione di un'immagine in base alla posizione di un puntatore

    Esempio di rotazione del puntatore

Uso di PointerPositionPropertySet

È possibile creare queste esperienze usando PointerPositionPropertySet. Questo PropertySet viene creato per un UIElement per mantenere la posizione del puntatore mentre l'UIElement supera positivamente il test di hit. Il valore della posizione è relativo allo spazio delle coordinate di UIElement (una posizione pari <a 0,0> è l'angolo superiore sinistro di UIElement). Puoi quindi sfruttare questa proprietà impostata in un'animazione per guidare il movimento di un'altra proprietà.

Per ciascuna delle diverse modalità di input del puntatore, esistono vari stati in cui la posizione può cambiare: Sospeso, Premuto, Premuto e Spostato. PointerPositionPropertySet mantiene solo la posizione del puntatore negli stati Hover, Pressed e Moved per Mouse e Penna.

Passaggi generali per iniziare:

  1. Identificare l'UIElement in cui desideri tenere traccia della posizione del puntatore.
  2. Accedere a PointerPositionPropertySet tramite ElementCompositionPreview.
  3. Creare un oggetto ExpressionAnimation che fa riferimento alla proprietà Position in PropertySet.
    • Non dimenticare di impostare il parametro di riferimento.
  4. Impostare come destinazione la proprietà di compositionObject con ExpressionAnimation.

Annotazioni

È consigliabile assegnare propertySet restituito dal metodo GetPointerPositionPropertySet a una variabile di classe. In questo modo si garantisce che il set di proprietà non venga pulito da Garbage Collection e pertanto non abbia alcun effetto sulla ExpressionAnimation a cui si fa riferimento. ExpressionAnimations non mantiene un riferimento sicuro a nessuno degli oggetti utilizzati nell'equazione.

Esempio

Diamo un'occhiata a un esempio in cui sfruttiamo la posizione Hover della modalità di input Mouse e Penna per ruotare dinamicamente un'immagine.

Esempio di rotazione del puntatore

L'immagine è un oggetto UIElement, quindi si otterrà prima di tutto un riferimento a PointerPositionPropertySet

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element);

In questo esempio sono in gioco due espressioni:

  • Un'espressione in cui l'immagine ruota in base a quanto lontano il puntatore si trova dal centro dell'immagine. Più lontano, più rotazione.
  • Espressione in cui l'asse di rotazione cambia in base alla posizione del puntatore. Si vuole che l'asse di rotazione sia perpendicolare al vettore della posizione.

In questo caso si definiscono le due espressioni, una destinata alla proprietà RotationAngle e all'altra la proprietà RotationAxis. Si fa riferimento a PointerPositionPropertySet come qualsiasi altro PropertySet.

In questo esempio si compilano espressioni usando le classi 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);

Vedere anche

  • Last updated on