Animazioni basate sul tempo per

Quando un componente in o un'intera esperienza utente cambia, gli utenti finali lo osservano spesso in due modi: nel tempo o istantaneamente. Nella piattaforma Windows, il primo è preferibile rispetto a quest'ultimo: le esperienze utente che cambiano istantaneamente spesso confondono e sorprendeno gli utenti finali perché non sono in grado di seguire ciò che è successo. L'utente finale percepisce quindi l'esperienza come innaturale e insoddisabile.

In alternativa, è possibile modificare l'interfaccia utente nel tempo per guidare l'utente finale tramite o notificare le modifiche all'esperienza. Nella piattaforma Windows questa operazione viene eseguita usando animazioni basate sul tempo, note anche come KeyFrameAnimations. KeyFrameAnimations consente di modificare un'interfaccia utente nel tempo e di controllare ogni aspetto dell'animazione, inclusa la modalità e l'avvio e il modo in cui raggiunge lo stato finale. Ad esempio, l'animazione di un oggetto in una nuova posizione superiore a 300 millisecondi è più piacevole rispetto al "teletrasportamento" immediato. Quando si usano animazioni invece di modifiche istantanee, il risultato netto è un'esperienza più piacevole e accattivante.

Tipi di animazioni basate sul tempo

Esistono due categorie di animazioni basate sul tempo che è possibile usare per creare esperienze utente accattivanti in Windows:

Animazioni esplicite : come indica il nome, si avvia in modo esplicito l'animazione per eseguire gli aggiornamenti. Animazioni implicite : queste animazioni vengono attivate dal sistema per conto dell'utente quando viene soddisfatta una condizione.

Per questo articolo verrà illustrato come creare e usare animazioni esplicite basate sul tempo con KeyFrameAnimations.

Per le animazioni basate sul tempo esplicite e implicite, esistono tipi diversi, corrispondenti ai diversi tipi di proprietà di CompositionObjects che è possibile animare.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Creare animazioni basate sul tempo con KeyFrameAnimations

Prima di descrivere come creare animazioni esplicite basate sul tempo con KeyFrameAnimations, esaminiamo alcuni concetti.

• Fotogrammi chiave: si tratta delle singole "istantanee" attraverso cui un'animazione si muove.
  • Definito come coppie chiave e valore. La chiave rappresenta lo stato di avanzamento compreso tra 0 e 1, ovvero dove nella durata dell'animazione si verifica questo "snapshot". L'altro parametro rappresenta il valore della proprietà in questo momento.
• Proprietà KeyFrameAnimation: opzioni di personalizzazione che è possibile applicare per soddisfare le esigenze dell'interfaccia utente.
  • DelayTime: tempo prima dell'avvio di un'animazione dopo la chiamata di StartAnimation.
  • Durata: durata dell'animazione.
  • IterationBehavior: conteggio o comportamento di ripetizione infinito per un'animazione.
  • IterationCount: numero finito di volte in cui un'animazione KeyFrame verrà ripetuta.
  • Conteggio fotogrammi chiave: consente di leggere il numero di fotogrammi chiave in una particolare animazione basata su fotogrammi chiave.
  • StopBehavior: specifica il comportamento di un valore della proprietà di animazione quando viene chiamato StopAnimation.
  • Direzione: specifica la direzione dell'animazione per la riproduzione.
• Gruppo di animazioni: avvio di più animazioni contemporaneamente.
  • Spesso usato quando si desidera animare più proprietà contemporaneamente.

Per altre info, vedi CompositionAnimationGroup.

Tenendo presenti questi concetti, esaminiamo la formula generale per costruire un KeyFrameAnimation:

1. Identifica il CompositionObject e la rispettiva proprietà che devi animare.
2. Creare un modello KeyFrameAnimation Type del compositor che corrisponde al tipo di proprietà da animare.
3. Usando il modello di animazione, iniziare ad aggiungere KeyFrames e definire le proprietà dell'animazione.
   • È necessario almeno un fotogramma chiave (il fotogramma chiave al 100% o 1f).
   • È consigliabile definire anche una durata.
4. Quando sei pronto per eseguire questa animazione, chiama StartAnimation(...) in CompositionObject, che punta alla proprietà che vuoi animare. In particolare:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Se hai un'animazione in esecuzione e vuoi arrestare l'animazione o il gruppo di animazioni, puoi usare queste API:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Esaminiamo un esempio per vedere questa formula in azione.

Esempio

In questo esempio si vuole animare l'offset di un oggetto visivo compreso tra <0,0,0> e <200,0,0> oltre 1 secondo. Inoltre, si vuole visualizzare l'animazione visiva tra queste posizioni 10 volte.

Per iniziare, identificare l'oggetto CompositionObject e la proprietà da animare. In questo caso, il quadrato rosso è rappresentato da un oggetto visivo di composizione denominato redVisual. Avvia l'animazione da questo oggetto.

Successivamente, poiché si vuole animare la proprietà Offset, è necessario creare un Vector3KeyFrameAnimation (Offset è di tipo Vector3). È anche possibile definire i KeyFrames corrispondenti per KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Quindi definisci le proprietà di KeyFrameAnimation per descriverne la durata insieme al comportamento da animare tra le due posizioni (corrente e <200,0,0>) 10 volte.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Infine, per eseguire un'animazione, è necessario avviarla su una proprietà di compositionObject.

redVisual.StartAnimation("Offset", animation);

Ecco il codice completo.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}