Esercitazione: utilizzare animazioni con e senza continuità
Se più sequenze temporali di animazione applicano contemporaneamente un'animazione alla stessa proprietà, il comportamento di transizione varia a seconda che sull'indicatore del secondo 0 sia registrato o meno un fotogramma chiave. Nella procedura seguente vengono fornite istruzioni utili per comprendere il funzionamento delle animazioni con e senza continuità.
Per confrontare animazioni con e senza continuità
In Microsoft Expression Blend aprire un progetto o crearne uno nuovo. Per ulteriori informazioni, vedere Creare un nuovo documento o un nuovo progetto.
Premere F6 per passare all'area di lavoro Animazione F6 consente di passare dall'area di lavoro Progettazione all'area di lavoro Animazione e viceversa. Nell'area di lavoro Animazione il pannello Interazione si trova sotto la tavola da disegno.
Fare clic sul pulsante Chiude lo storyboard
.png "Cc295058.4c066464-3a41-452d-b2e9-e95f6c5659ff(it-it,Expression.10).png")
in Oggetti e sequenza temporale..gif "Suggerimento")
Suggerimento:Quando è presente uno storyboard aperto, ogni volta che si modifica una proprietà viene automaticamente registrato un fotogramma chiave nella sequenza temporale dello storyboard.
Selezionare lo strumento Ellipse
.png "Cc295058.8938cfdf-9b75-4a33-bc88-b0636e114a0d(it-it,Expression.10).png")
nella casella degli strumenti. Disegnare un cerchio al centro della tavola da disegno. Per fare in modo che l'ellisse sia un cerchio perfetto, è possibile utilizzare le proprietà Height e Width nella categoria Layout del pannello Proprietà. Se si nota che sono stati eseguiti ritagli, modificare i valori della proprietà Margin.In Oggetti e sequenza temporale fare clic su Nuovo
.png "Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(it-it,Expression.10).png")
.Verrà visualizzata la finestra di dialogo Crea risorsa Storyboard.
Nel campo Nome (chiave) immettere il nome Doppia e quindi fare clic su OK.
Verrà attivata la modalità di registrazione della sequenza temporale con l'indicatore di riproduzione
.png "Cc295058.5626c9eb-40bb-450a-9ca1-3678e5abe429(it-it,Expression.10).png")
in corrispondenza dell'indicatore del secondo 0. In modalità registrazione qualsiasi proprietà impostata registrerà in modo automatico un fotogramma chiave nella sequenza temporale.Non impostare alcun fotogramma chiave in corrispondenza dell'indicatore del secondo 0. Trascinare, invece, l'indicatore di riproduzione in corrispondenza del secondo 1.
Fare clic sullo strumento Selezione
.png "Cc295058.2ff91340-477e-4efa-a0f7-af20851e4daa(it-it,Expression.10).png")
nella casella degli strumenti quindi, tenendo premuto il tasto ALT, trascinare il punto di controllo della larghezza dell'ellisse fino a quando la larghezza dell'ellisse non risulterà raddoppiata.Verrà automaticamente impostato un fotogramma chiave in corrispondenza dell'indicatore del secondo 1 per la proprietà ScaleX.
Suggerimento:Tenere premuto il tasto ALT mentre si ridimensiona un oggetto nella tavola di disegno consente di mantenere inalterato il punto centrale.
In Oggetti e sequenza temporale, espandere i nodi dell'ellisse fino a quando non viene visualizzato il nodo ScaleX. Fare clic con il pulsante destro del mouse sul nodo ScaleX o sulla barra grigia che rappresenta l'intervallo di tempo e quindi fare clic su Modifica conteggio ripetizioni.
Verrà visualizzata la finestra di dialogo Modifica ripetizioni.
Per impostare la ripetizione continua della sequenza temporale, fare clic sul pulsante Imposta ripetizione continua
.png "Cc295058.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(it-it,Expression.10).png")
e quindi fare clic su OK.In Oggetti e sequenza temporale fare clic su Nuovo
.Verrà visualizzata la finestra di dialogo Crea risorsa Storyboard.
Nel campo Nome (chiave) immettere il nome Quadrupla e quindi fare clic su OK.
Verrà attivata la modalità registrazione della seconda sequenza temporale, che inizia dalle dimensioni originali dell'ellisse.
Come in precedenza, non impostare alcun fotogramma chiave in corrispondenza dell'indicatore del secondo 0. Trascinare, invece, l'indicatore di riproduzione in corrispondenza del secondo 1.
Fare clic sullo strumento Selezione nella casella degli strumenti quindi, tenendo premuto il tasto ALT, trascinare il punto di controllo della larghezza dell'ellisse fino a quando la larghezza dell'ellisse non risulterà quadruplicata.
Verrà automaticamente impostato un fotogramma chiave in corrispondenza dell'indicatore del secondo 1 per la proprietà ScaleX.
Fare clic con il pulsante destro del mouse sul nodo ScaleX o sulla barra grigia che rappresenta l'intervallo di tempo, scegliere Modifica conteggio ripetizioni, fare clic sul pulsante Imposta ripetizione continua e quindi scegliere OK.
A questo punto è possibile impostare i trigger per le animazioni. Per impostazione predefinita, qualsiasi nuova sequenza temporale creata nell'elemento principale del documento determinerà l'aggiunta di un trigger di evento in Trigger per l'evento Window.Loaded. È possibile mantenere tale trigger per la sequenza temporale Doppia e aggiungerne un altro per la sequenza temporale Quadrupla.
In Trigger selezionare il trigger Window.Loaded. Le azioni per il trigger vengono visualizzate in Quando viene generato Window.Loaded. Fare clic sul segno meno accanto a Quadrupla.Begin per eliminare tale azione. In questo modo, all'avvio dell'applicazione verrà eseguita l'animazione Doppia ma non l'animazione Quadrupla.
Suggerimento:Per visualizzare la sezione Proprietà per stato attivo, potrebbe essere necessario modificare le dimensioni del riquadro Trigger. A tale scopo, fare clic sui bordi del riquadro e sul bordo all'interno del riquadro, quindi trascinare.
Per aggiungere il trigger relativo all'animazione Quadrupla, fare clic sul pulsante Aggiungi trigger evento
.png "Cc295058.671c69bb-32e9-4ef9-9837-29403524abd0(it-it,Expression.10).png")
nel riquadro Trigger.Verrà creato un nuovo trigger Window.Loaded.
Selezionare l'ellisse in Oggetti e sequenza temporale e quindi, in Trigger, utilizzare gli elenchi a discesa per modificare il nuovo trigger da Quando viene generato Window.Loaded a Quando viene generato ellipse.MouseEnter.
Fare clic sul pulsante Aggiungi nuova azione
.png "Cc295058.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(it-it,Expression.10).png")
accanto a Quando viene generato ellipse.MouseEnter e quindi utilizzare gli elenchi a discesa per impostare la nuova azione su Quadrupla.Begin.In questo modo, se si sposta il puntatore del mouse sull'ellisse l'animazione Quadrupla interromperà l'animazione Doppia.
Aggiungere un nuovo trigger di evento, modificarlo in Quando viene generato ellipse.MouseLeave e aggiungere una nuova azione per Doppia.Begin.
Quando il puntatore del mouse viene spostato all'esterno dell'ellisse, l'animazione Doppia interromperà l'animazione Quadrupla.
Per vedere il comportamento della sequenza temporale dell'animazione e del trigger creato, eseguire un test della scena scegliendo Test Progetto dal menu Progetto.
In nessuna delle due animazioni sono impostati fotogrammi chiave in corrispondenza dell'indicatore del secondo 0. La transizione così ottenuta è denominata continuità tra animazioni. Quando si interrompe un'animazione con l'altra, avviene una transazione uniforme dalla larghezza al momento dell'interruzione al primo fotogramma chiave dell'animazione successiva. Se si posiziona il puntatore del mouse all'interno dell'ellisse alla fine dell'animazione Doppia, il punto di inizio dell'animazione Quadrupla non sarà la dimensione originale dell'ellisse ma la larghezza dell'ellisse al momento in cui i mouse è stato spostato. Quando si posiziona il mouse al di fuori dell'ellisse, l'animazione Doppia è invertita rispetto all'animazione Quadrupla, a causa della transizione in corso tra le due.
Uscire dall'applicazione per tornare a Expression Blend.
In Oggetti e sequenza temporale selezionare il nodo ScaleX dell'ellisse, selezionare la sequenza temporale Quadrupla, spostare l'indicatore di riproduzione in corrispondenza dell'indicatore del secondo 0 e quindi fare clic sul pulsante Registra fotogramma chiave.
Ripetere il test dell'animazione. Il comportamento di transizione risulterà diverso. Se si sposta il mouse all'interno dell'ellisse, l'animazione Quadrupla inizierà dalla larghezza originale dell'ellisse.
Per esaminare anche altri comportamenti di transizione, è possibile aggiungere un fotogramma chiave in corrispondenza dell'indicatore del secondo 0 dell'animazione Doppia e ripetere il test, quindi eliminare il fotogramma chiave sul secondo 0 dell'animazione Quadrupla ed eseguire un altro test.