Condividi tramite

Animazioni basate sulle relazioni

Questo articolo offre una breve panoramica di come creare animazioni basate sulle relazioni usando Composition ExpressionAnimations.

Esperienze basate sulle relazioni dinamiche

Quando si creano esperienze di movimento in un'app, in alcuni casi il movimento non è basato sul tempo, ma dipende piuttosto da una proprietà su un altro oggetto. KeyFrameAnimations non sono in grado di esprimere questi tipi di esperienze di movimento molto facilmente. In questi casi specifici, il movimento non deve più essere discreto e predefinito. Il movimento può invece adattarsi dinamicamente in base alla relazione con altre proprietà dell'oggetto. Ad esempio, è possibile animare l'opacità di un oggetto in base alla posizione orizzontale. Altri esempi includono esperienze di movimento come intestazioni adesive e effetto parallasse.

Questi tipi di esperienze di movimento consentono di creare un'interfaccia utente più connessa, invece di sentirsi singolare e indipendente. Per l'utente, questo dà l'impressione di un'esperienza di interfaccia utente dinamica.

Cerchio orbitante

Visualizzazione elenco con parallasse

Utilizzo delle ExpressionAnimations

Per creare esperienze di movimento basate sulle relazioni, usare il tipo ExpressionAnimation. ExpressionAnimations (o Espressioni per brevità), sono un nuovo tipo di animazione che consente di esprimere una relazione matematica, ovvero una relazione usata dal sistema per calcolare il valore di una proprietà di animazione a ogni fotogramma. In un altro modo, le espressioni sono semplicemente un'equazione matematica che definisce il valore desiderato di una proprietà di animazione per fotogramma. Le espressioni sono un componente molto versatile che può essere usato in un'ampia gamma di scenari, tra cui:

Quando si lavora con ExpressionAnimations, esistono due aspetti che vale la pena menzionare in anticipo:

  • Never Ending: a differenza del suo elemento di pari livello KeyFrameAnimation, le espressioni non hanno una durata limitata. Poiché le espressioni sono relazioni matematiche, sono animazioni che sono costantemente "in esecuzione". Se si sceglie, è possibile arrestare queste animazioni.
  • Esecuzione, ma non sempre valutazione: le prestazioni sono sempre un problema con le animazioni in esecuzione costantemente. Non è tuttavia necessario preoccuparsi, il sistema è abbastanza intelligente che l'espressione rivaluta solo se uno dei relativi input o parametri è stato modificato.
  • Risoluzione del tipo di oggetto corretto: poiché le espressioni sono relazioni matematiche, è importante assicurarsi che l'equazione che definisce l'espressione venga risolta nello stesso tipo della proprietà di destinazione dell'animazione. Ad esempio, se si anima Offset, l'espressione deve risolversi in un tipo Vector3.

Componenti di un'espressione

Quando si compila la relazione matematica di un'espressione, esistono diversi componenti principali:

  • Parametri: valori che rappresentano valori costanti o riferimenti ad altri oggetti Composition.
  • Operatori matematici: gli operatori matematici tipici plus(+), minus(-), multiply(*), divide(/) che uniscono i parametri per formare un'equazione. Sono inclusi anche operatori condizionali come greater than(>), equal(==), operatore ternario (condizione ? ifTrue : ifFalse) e così via.
  • Funzioni matematiche: funzioni matematiche/collegamenti basati su System.Numerics. Per un elenco completo delle funzioni supportate, vedere ExpressionAnimation.

Le espressioni supportano anche un set di parole chiave: frasi speciali che hanno un significato distinto solo all'interno del sistema ExpressionAnimation. Questi sono elencati (insieme all'elenco completo delle funzioni matematiche) nella documentazione di ExpressionAnimation .

Creazione di espressioni con ExpressionBuilder

Sono disponibili due opzioni per la compilazione di espressioni nell'app WinUI:

  1. Compilare l'equazione come stringa tramite l'API pubblica ufficiale.
  2. Compilare l'equazione in un modello a oggetti type-safe tramite lo strumento ExpressionBuilder incluso nel Windows Community Toolkit.

Ai fini di questo documento, verranno definite le espressioni usando ExpressionBuilder.

Parametri

I parametri costituiscono il nucleo di un'espressione. Esistono due tipi di parametri:

  • Costanti: si tratta di parametri che rappresentano variabili tipizzate di System.Numeric. Questi parametri ottengono i valori assegnati una volta all'avvio dell'animazione.
  • Riferimenti: si tratta di parametri che rappresentano riferimenti a CompositionObjects. Questi parametri ottengono continuamente i relativi valori aggiornati dopo l'avvio di un'animazione.

In generale, i riferimenti sono l'aspetto principale per il modo in cui l'output di un'espressione può cambiare dinamicamente. Quando questi riferimenti cambiano, l'output dell'espressione cambia di conseguenza. Se si crea l'espressione con stringhe o le si usa in uno scenario di creazione modelli (usando l'espressione per definire più oggetti CompositionObject), è necessario assegnare un nome e impostare i valori dei parametri. Per altre informazioni, vedi la sezione Esempio.

Uso di KeyFrameAnimations

Le espressioni possono essere usate anche con KeyFrameAnimations. In questi casi, si desidera utilizzare un'Expression per definire il valore di un fotogramma chiave in un determinato momento. Questi tipi di fotogrammi chiave sono denominati ExpressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Tuttavia, a differenza di ExpressionAnimations, ExpressionKeyFrames viene valutato solo una volta quando viene avviato KeyFrameAnimation. Tenere presente che non si passa "ExpressionAnimation" come valore del fotogramma chiave, ma piuttosto una stringa (o un "ExpressionNode", se si utilizza ExpressionBuilder).

Esempio

Verrà ora illustrato un esempio di uso di espressioni, in particolare l'esempio PropertySet della raccolta di esempi dell'interfaccia utente di Windows. Si esaminerà l'espressione che gestisce il comportamento del movimento orbita della palla blu.

Cerchio orbitante

Esistono tre componenti in gioco per l'esperienza totale:

  1. Una KeyFrameAnimation, che anima l'offset Y della palla rossa.
  2. Un PropertySet con una proprietà Rotation che aiuta a guidare l'orbita, animata da un'altra KeyFrameAnimation.
  3. ExpressionAnimation che gestisce l'offset della palla blu, facendo riferimento all'offset della palla rossa e alla proprietà di rotazione per mantenere un'orbita perfetta.

Ci concentreremo sull'ExpressionAnimation definita al punto #3. Verranno inoltre usati le classi ExpressionBuilder per costruire questa espressione. Alla fine viene elencata una copia del codice usato per compilare questa esperienza tramite stringhe.

In questa equazione sono presenti due proprietà a cui è necessario fare riferimento da PropertySet; uno è un offset del punto centrale e l'altro è la rotazione.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Successivamente, è necessario definire il componente Vector3 che rappresenta la rotazione orbitante effettiva.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Annotazioni

EF è una notazione abbreviata "using" per definire ExpressionFunctions dalla libreria del generatore di espressioni WinUI.

Infine, combinare questi componenti e fare riferimento alla posizione della palla rossa per definire la relazione matematica.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

In una situazione ipotetica, cosa accade se si vuole usare questa stessa espressione ma con altri due oggetti visivi, vale a dire 2 set di cerchi orbitanti. Con CompositionAnimations, puoi riutilizzare l'animazione e scegliere come destinazione più CompositionObject. L'unica cosa da modificare quando si usa questa Expression per il caso di orbita aggiuntiva è il riferimento al Visual. Chiamiamo questo processo "templating".

In questo caso, si modifica l'espressione creata in precedenza. Invece di "ottenere" un riferimento a CompositionObject, si crea un riferimento con un nome e quindi si assegnano valori diversi:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Di seguito è riportato il codice se è stata definita l'espressione con stringhe tramite l'API pubblica.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);
  • Last updated on