Animazioni basate sul tempo

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

L'alternativa è modificare l'interfaccia utente nel tempo per accompagnare l'utente finale o notificarlo delle modifiche. Nella piattaforma Windows questa operazione viene eseguita usando animazioni basate sul tempo, note anche come KeyFrameAnimation. Le KeyFrameAnimation consentono di modificare un'interfaccia utente nel tempo e di controllare ogni aspetto dell'animazione, inclusa la modalità di avvio, il tempo di avvio e il modo in cui raggiunge lo stato finale. Ad esempio, l'animazione di un oggetto in una nuova posizione in un tempo superiore a 300 millisecondi è più piacevole rispetto al suo immediato "teletrasporto". 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.

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

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

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

Creare animazioni basate sul tempo con KeyFrameAnimation

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

• Fotogrammi chiave: si tratta di singoli "snapshot" che un'animazione attraverserà.
  • Definiti come coppie di chiave e valore &. La chiave rappresenta lo stato di avanzamento compreso tra 0 e 1, ovvero il punto in cui 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.
  • Duration: durata dell'animazione.
  • IterationBehavior: conteggio o comportamento di ripetizione infinito per un'animazione.
  • IterationCount: numero di volte in cui un'animazione basata su fotogrammi chiave verrà ripetuta.
  • KeyFrame Count: 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.
  • Direction: specifica la direzione dell'animazione per la riproduzione.
• Animation Group: avvio di più animazioni contemporaneamente.
  • Spesso usato quando si desidera animare più proprietà contemporaneamente.

Per altre info, vedere CompositionAnimationGroup.

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

1. Identificare CompositionObject e la rispettiva proprietà da animare.
2. Creare un modello di tipo KeyFrameAnimation del compositor che corrisponde al tipo di proprietà da animare.
3. Usando il modello di animazione, iniziare ad aggiungere fotogrammi chiave e definire le proprietà dell'animazione.
   • È necessario almeno un fotogramma chiave (il fotogramma chiave 100% o 1f).
   • È consigliabile definire anche una durata.
4. Quando si è pronti a eseguire questa animazione, chiamare StartAnimation(...) in CompositionObject, che punta alla proprietà che si desidera animare. In particolare:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Se si ha un'animazione in esecuzione e si desidera arrestare l'animazione o il gruppo di animazioni, è possibile usare queste API:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Esaminiamo un esempio per vedere questa formula in azione.

Esempio

In questo esempio si desidera animare l'offset di un oggetto visivo compreso tra <0,0,0> e <200,0,0> oltre 1 secondo. Inoltre, si desidera 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. Avviare l'animazione da questo oggetto.

Successivamente, poiché si desidera animare la proprietà Offset, è necessario creare un Vector3KeyFrameAnimation (Offset è di tipo Vector3). È anche possibile definire i fotogrammi chiave 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 = Windows.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);

Di seguito è riportato 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 = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}