Panoramica dello storyboard
Questa panoramica è incentrata sul modo in cui le transizioni e gli storyboard vengono usati nell'animazione di Windows. Per una panoramica dei componenti dell'animazione di Windows, vedi Cenni preliminari sull'animazione di Windows.
Questo argomento include le sezioni seguenti:
Transizioni
Una transizione definisce il modo in cui una singola variabile di animazione cambia in un intervallo di tempo specifico. L'animazione di Windows include una libreria di transizioni comuni che gli sviluppatori possono applicare a una o più variabili di animazione. Diversi tipi di transizioni hanno set diversi di parametri, che possono includere il valore della variabile al termine della transizione, la durata della transizione o le quantità univoche per la funzione matematica sottostante, ad esempio accelerazione o intervallo di oscillazioni.
Tutte le transizioni condividono due parametri impliciti: il valore iniziale e la velocità iniziale (pendenza) della funzione matematica. Questi valori possono essere specificati in modo esplicito dall'applicazione, ma vengono in genere impostati dal gestore animazioni sul valore e sulla velocità della variabile di animazione all'inizio della transizione.
Libreria di transizione
Le transizioni seguenti sono attualmente fornite dalla libreria di transizione. Se un'applicazione richiede un effetto che non può essere specificato tramite la libreria di transizione, gli sviluppatori possono creare altri tipi di transizioni implementando un interpolatore personalizzato per l'applicazione o usando una libreria di transizione da terze parti.
| Nome transizione | Descrizione |
|---|---|
| accelerazione decelerazione |
La variabile di animazione accelera e quindi rallenta per una determinata durata. |
| constant |
La variabile di animazione rimane al valore iniziale durante la transizione. |
| cubico |
La variabile di animazione passa dal valore iniziale a un valore finale specificato, con una velocità finale specificata, per una determinata durata. |
| separato |
La variabile di animazione rimane al valore iniziale per un tempo di ritardo specificato, quindi passa immediatamente a un valore finale specificato e rimane in corrispondenza di tale valore per un determinato periodo di attesa. |
| istantaneo |
La variabile di animazione cambia immediatamente dal valore corrente a un valore finale specificato. |
| lineare |
La variabile di animazione passa in modo lineare dal valore iniziale a un valore finale specificato per una determinata durata. |
| lineare dalla velocità |
La variabile di animazione passa in modo lineare dal valore iniziale a un valore finale specificato con una velocità specificata. |
| parabolico dall'accelerazione |
La variabile di animazione passa dal valore iniziale a un valore finale specificato, con una velocità finale specificata, modificandone la velocità con un'accelerazione specificata. |
| inversione |
La variabile cambia direzione per una determinata durata. Il valore finale sarà uguale al valore iniziale e la velocità finale sarà quella negativa della velocità iniziale. |
| sinusoidale dall'intervallo |
La variabile oscilla all'interno di un determinato intervallo di valori, con un periodo specificato di oscillazione, per una determinata durata. |
| sinusoidale dalla velocità |
La variabile oscilla con un periodo di oscillazione specificato, per una determinata durata. L'ampiezza dell'oscillazione è determinata dalla velocità iniziale della variabile. |
| stop liscio |
La variabile di animazione viene interrotta senza problemi in corrispondenza di un valore finale specificato, entro una durata massima di tempo. |
La tabella seguente contiene illustrazioni per ognuna di queste transizioni.
| Illustrazioni |
|---|
     |
   |
   |
 |
Transizioni personalizzate
Un interpolatore definisce la funzione matematica che determina il modo in cui una variabile di animazione cambia nel tempo man mano che procede dal valore iniziale a un valore finale. Ogni transizione nella libreria di transizione ha un oggetto interpolatore associato fornito dal sistema e implementa la funzione interpolatore. Se un'applicazione richiede un effetto che non può essere specificato tramite la libreria di transizione, può implementare una o più transizioni personalizzate implementando un oggetto interpolatore per ogni nuova transizione. Gli oggetti interpolatori non possono essere usati direttamente dalle applicazioni e devono invece essere inclusi in una transizione associata. Una factory di transizione viene usata per generare transizioni da un oggetto interpolatore. Per altri dettagli, vedere IUIAnimationInterpolator e IUIAnimationTransitionFactory.
Si noti che la maggior parte delle applicazioni avrà tutte le transizioni necessarie usando la libreria di transizione e pertanto non sarebbe necessario implementare un interpolatore.
Storyboard
Uno storyboard è una raccolta di transizioni applicate a una o più variabili di animazione nel tempo. Le transizioni in uno storyboard rimangono sincronizzate l'una rispetto all'altra e lo storyboard viene pianificato o annullato come unità. Dopo aver creato le transizioni desiderate, un'applicazione crea uno storyboard usando la gestione animazioni, aggiunge le transizioni allo storyboard, configura lo storyboard in modo appropriato e lo pianifica per la riproduzione il prima possibile. Il gestore di animazioni determina l'ora di inizio effettiva dello storyboard, perché potrebbe esserci contesa con altri storyboard che attualmente animano le stesse variabili.
La durata complessiva di uno storyboard dipende dalle durate delle transizioni all'interno dello storyboard. La durata di una transizione non deve essere fissa; può essere determinato dal valore e dalla velocità delle variabili animate all'inizio della transizione. Quindi, la durata di uno storyboard può anche dipendere dallo stato delle variabili animate.
Gli esempi seguenti presuppongono che sia stato creato un gestore di animazioni, una libreria di transizione e un timer. Per altre informazioni, vedere Creare gli oggetti animazione principali. Gli esempi presuppongono anche che l'applicazione abbia creato tre variabili di animazione (X, Y e Z) usando il metodo IUIAnimationManager::CreateAnimationVariable e cinque transizioni (T1, T2, T3, T4 e T5) usando uno dei metodi dell'interfaccia IUIAnimationTransitionLibrary.
- Creazione di uno storyboard semplice
- Uso di una durata sensibile al contesto
- Creazione di uno storyboard più complesso
- Uso dei fotogrammi chiave
- Mantenimento delle variabili
- Pianificazione di uno storyboard
Creazione di uno storyboard semplice
Per creare uno storyboard semplice, usare il metodo IUIAnimationManager::CreateStoryboard per creare un nuovo storyboard, il metodo IUIAnimationTransitionLibrary::CreateLinearTransition per creare una transizione lineare, T1 e il metodo IUIAnimationStoryboard::AddTransition per applicare la transizione T1 alla variabile X e aggiungere la transizione risultante allo storyboard.
Questo processo produce uno storyboard semplice, come illustrato nella figura seguente. Lo storyboard contiene una transizione, T1, in modo che il valore della variabile X cambi in modo lineare in un periodo di tempo fisso.
Si noti che per uno scenario così semplice, un'opzione alternativa consiste nell'usare il metodo IUIAnimationManager::ScheduleTransition.
Uso di una durata sensibile al contesto
Mentre alcune transizioni hanno una durata fissa, la durata di altre dipende dal valore iniziale o dalla velocità della variabile animata all'inizio della transizione. Ad esempio, il metodo IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed crea una transizione con una durata proporzionale alla differenza tra il valore iniziale della variabile di animazione e il valore finale specificato. In questa illustrazione e le altre illustrazioni, tali transizioni con durate arbitrarie vengono visualizzate con un punto interrogativo (?) e le relative durate effettive vengono determinate quando viene riprodotto lo storyboard.
Creazione di uno storyboard più complesso
Dopo aver creato uno storyboard e aggiunto una singola transizione, T1, è possibile aggiungere una seconda transizione per la variabile X chiamando di nuovo il metodo IUIAnimationStoryboard::AddTransition , ma con T2 anziché T1.
Supponendo che la transizione T2 abbia una durata sensibile al contesto, lo storyboard ora contiene due transizioni back-to-back di durata arbitraria che influiscono sulla variabile X.
La chiamata di nuovo a AddTransition con la variabile Y e la transizione T3 aggiunge una terza transizione all'inizio dello storyboard. A seconda dei valori di X e Y quando lo storyboard viene riprodotto, T3 può terminare dopo T1 o anche dopo T2.
Uso dei fotogrammi chiave
Per aggiungere una transizione in corrispondenza di un offset dall'inizio dello storyboard, è prima necessario aggiungere un fotogramma chiave. I fotogrammi chiave rappresentano istantanee nel tempo e da soli non hanno alcun effetto sul comportamento dello storyboard. Ogni storyboard ha un fotogramma chiave implicito che rappresenta l'inizio dello storyboard, UI_ANIMATION_KEYFRAME_STORYBOARD_START. È possibile aggiungere nuovi fotogrammi chiave in corrispondenza degli offset dall'inizio chiamando il metodo IUIAnimationStoryboard::AddKeyframeAtOffset con UI_ANIMATION_KEYFRAME_STORYBOARD_START.
L'offset in corrispondenza del quale si aggiunge un fotogramma chiave è sempre relativo a un altro fotogramma chiave. Il diagramma seguente mostra il risultato dell'aggiunta di keyframe1 e della transizione T4, applicata alla variabile Z, allineata con keyframe1 e creata con una durata fissa. Naturalmente, poiché le durate delle altre transizioni non sono ancora note, T4 potrebbe non essere l'ultima transizione alla fine.
I fotogrammi chiave possono anche essere posizionati alle estremità delle transizioni, usando il metodo IUIAnimationStoryboard::AddKeyframeAfterTransition. Il diagramma seguente mostra il risultato dell'aggiunta di keyframe2 dopo T1 e keyframe3 dopo T2.
Poiché le durate di T1 e T2 non sono note fino alla riproduzione dello storyboard, gli offset di keyframe2 e keyframe3 non vengono determinati fino a allora. Di conseguenza, keyframe2 e anche keyframe3 possono verificarsi prima di keyframe1.
Sia l'inizio che la fine di una transizione possono essere allineati con i fotogrammi chiave usando il metodo IUIAnimationStoryboard::AddTransitionBetweenKeyframes. Il diagramma seguente mostra il risultato dell'aggiunta di una quinta transizione, T5, nella variabile Y, tra keyframe2 e fotogrammi chiave3. Ciò modifica la durata di T5, rendendola più lunga o più breve a seconda degli offset relativi di fotogrammi chiave2 e fotogrammi chiave3.
Mantenimento delle variabili
Se T4 termina dopo T2 e T5, lo storyboard smette di animare le variabili X e Y, rendendole disponibili per gli altri storyboard da animare. Tuttavia, l'applicazione può chiamare il metodo IUIAnimationStoryboard::HoldVariable per richiedere che lo storyboard contenga alcune o tutte le variabili che anima ai valori finali fino al completamento dello storyboard. Il diagramma seguente mostra il risultato della conservazione di X e Z al termine del T4. Si noti che lo storyboard contiene X al valore finale fino al completamento dello storyboard. Il blocco non ha alcun effetto sulla Z perché lo storyboard termina al termine del T4.
Anche se Y non è tenuto da questo storyboard, il suo valore non cambia dopo il completamento di T5, a meno che un altro storyboard non lo anima. Poiché Y non viene mantenuto, qualsiasi altro storyboard, indipendentemente dalla priorità, può animare Y al termine del T5. Al contrario, poiché X è mantenuto, uno storyboard con priorità inferiore non può animare X fino al termine di questo storyboard.
Tutte queste illustrazioni hanno assunto un set arbitrario di valori correnti per le variabili all'inizio della riproduzione dello storyboard. Se vengono rilevati altri valori, è probabile che le durate delle transizioni sensibili al contesto siano diverse, come illustrato nella figura seguente.
In questo scenario, T5 inizia prima del completamento di T3 e T3 viene quindi tagliato. Poiché T4 termina prima di T2 e T5, il valore di Z viene mantenuto fino alla fine dello storyboard. In generale, i valori e le velocità delle variabili quando inizia la riproduzione di uno storyboard possono influire sull'ordinamento dei fotogrammi chiave e sulla lunghezza complessiva e sulla forma dello storyboard.
Pianificazione di uno storyboard
Quando si pianifica uno storyboard, l'ora di inizio è determinata dalla struttura e dai contorni degli storyboard attualmente inclusi nella pianificazione. In particolare, il primo e l'ultimo momento in cui lo storyboard anima ogni singola variabile determina se e quando due storyboard si scontrano, ma i dettagli interni delle transizioni all'interno non sono importanti.
La figura seguente mostra la struttura di uno storyboard con cinque transizioni che animano tre variabili.
Un elemento fondamentale della piattaforma animazione Di Windows è il supporto per consentire il completamento di un'animazione prima dell'inizio di un'altra, quando necessario. Anche se questo elimina molti problemi logici, introduce anche una latenza arbitraria nell'interfaccia utente. Per risolvere questo problema, le applicazioni possono specificare il ritardo accettabile più lungo per l'avvio di uno storyboard, usando il metodo IUIAnimationStoryboard::SetLongestAcceptableDelay e lo strumento di gestione animazioni usa queste informazioni per pianificare lo storyboard prima della scadenza del periodo di latenza specificato. Quando uno storyboard è pianificato, il gestore di animazioni determina se gli altri storyboard devono prima essere annullati, ritagliati, conclusi e/o compressi.
Un'applicazione può registrare un gestore che verrà chiamato quando lo stato di uno storyboard cambia. Ciò consente all'applicazione di rispondere quando lo storyboard inizia a giocare, viene eseguito fino al completamento, viene rimosso completamente dalla pianificazione o viene impedito il completamento a causa di un'interruzione da uno storyboard con priorità più alta. Per identificare gli storyboard passati ai gestori eventi dello storyboard (o confronti di priorità), un'applicazione può usare il metodo IUIAnimationStoryboard::SetTag per applicare tag agli storyboard, simili a quelli che possono essere usati per identificare le variabili. Come per la ripetizione dello storyboard, gli sviluppatori devono prestare attenzione quando si usano tag per identificare gli storyboard e assicurarsi che le ambiguità non si verifichino quando le azioni dell'utente comportano la coda di molti storyboard.
Negli esempi seguenti vengono illustrate due varianti di un tentativo di pianificare lo storyboard compilato nelle sezioni precedenti di questo argomento.
In questo scenario, sei storyboard, da A a F, sono già stati pianificati per animare le variabili W, X, Y e Z, ma solo A e B hanno iniziato a giocare. Il nuovo storyboard, etichettato G, ha un ritardo accettabile più lungo impostato sulla durata illustrata nella figura seguente.
L'applicazione ha registrato confronti di priorità che includono la logica seguente:
- G può annullare solo C ed E e solo per evitare errori.
- G può tagliare solo A, C, E e F e solo per evitare errori.
- Qualsiasi storyboard può comprimere qualsiasi altro storyboard (la compressione viene sempre eseguita solo per evitare errori).
Nota
Il qualificatore "solo per impedire l'errore" indica che i confronti di priorità registrati restituiscono S_OK solo quando il parametro priorityEffect è UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Per informazioni dettagliate, vedere il metodo IUIAnimationPriorityComparison::HasPriority.
Per iniziare G prima che sia trascorso il ritardo accettabile più lungo, la gestione animazioni deve eseguire le operazioni seguenti:
- Taglia F
- Annulla E
Quando E viene annullato, D e F vengono scoperti e ripristinati i contorni originali:
Il gestore di animazioni non deve annullare o tagliare C per pianificare prima che sia trascorso il ritardo accettabile più lungo, quindi la riunione di C e G determina all'avvio di G.
Dopo che G è stato pianificato correttamente, è possibile determinare le durate delle transizioni e il resto della struttura è quindi noto. Tuttavia, la struttura può cambiare se un altro storyboard viene successivamente rimosso dalla pianificazione.
Come secondo esempio, si consideri uno scenario simile a quello precedente, ma con un ritardo accettabile più lungo più breve specificato per G.
In questo caso vengono eseguite le azioni seguenti:
- Taglia F
- Annulla E
- Annulla C
Inoltre, la gestione animazione deve comprimere D in base alla quantità mostrata per consentire l'avvio di G dopo il ritardo accettabile più lungo e non in un secondo momento.
Per mantenere la tempistica relativa, vengono compressi anche A, B e F.
Tuttavia, gli storyboard sulle variabili non correlate (non visualizzate) non vengono compressi.
Ancora una volta, la struttura di G è ora nota ed è diversa dal risultato nel primo scenario perché le variabili hanno valori diversi all'inizio di G.