Esercitazione: creare animazioni sovrapposte
La struttura della sequenza temporale di Expression Blend consente di eseguire contemporaneamente più sequenze temporali di animazioni nell'applicazione. Nella procedura seguente viene illustrato come creare l'animazione di una farfalla che si muove continuamente in cerchio e sbatte le ali quando viene attraversata dal mouse.
Per creare animazioni sovrapposte
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 "Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(it-it,Expression.10).png")
in Oggetti e sequenza temporale.[!NOTA]
Tutte le volte che si seleziona una sequenza temporale diversa da quella Predefinita, qualsiasi modifica di proprietà apportata registrerà automaticamente un fotogramma chiave nella sequenza specifica.
Selezionare lo strumento Ellisse
.png "Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(it-it,Expression.10).png")
nella casella degli strumenti. Disegnare due piccoli cerchi sul lato destro della tavola da disegno. Per fare in modo che le ellissi siano cerchi perfetti, è possibile assegnare lo stesso valore alle proprietà Height e Width nella categoria Layout del pannello Proprietà. Se si nota che sono stati eseguiti ritagli, modificare i valori della proprietà Margin.Selezionare lo strumento Selezione
.png "Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(it-it,Expression.10).png")
nella casella degli strumenti e avvicinare i cerchi, come illustrato nell'immagine seguente:Due cerchi disegnati nella tavola da disegno
.png "Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(it-it,Expression.10).png")
Per utilizzare i due cerchi contemporaneamente, selezionarne uno in Oggetti e sequenza temporale, tenere premuto il tasto CTRL in modo da poter selezionare anche l'altro, fare clic con il pulsante destro del mouse sui cerchi selezionati, scegliere Raggruppa e quindi fare clic su Grid.
In Oggetti e sequenza temporale verrà visualizzato un nuovo pannello Grid contenente entrambi i cerchi.
Rinominare il pannello Grid facendo clic con il pulsante destro del mouse su di esso e scegliendo Rinomina. Modificare il nome digitando Farfalla.
Per creare l'animazione circolare, è possibile utilizzare lo strumento Converti in tracciato di movimento, che consente di generare una sequenza temporale di un'animazione da un tracciato. Disegnare una terza ellisse al centro della tavola da disegno, con una larghezza corrispondente circa alla metà della superficie della tavola da disegno.
Con la nuova ellisse selezionata in Oggetti e sequenza temporale, scegliere Tracciato dal menu Oggetto e quindi fare clic su Converti in tracciato di movimento.
Verrà visualizzata la finestra di dialogo Scegli destinazione per tracciato di movimento.
Nell'elenco degli oggetti disponibili nella tavola da disegno selezionare il pannello Grid Farfalla e quindi fare clic su OK.
Verrà creata una nuova sequenza temporale e attivata la modalità di registrazione della nuova sequenza temporale. A questo punto è possibile fare clic sul pulsante Play
.png "Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(it-it,Expression.10).png")
per visualizzare l'animazione sulla tavola da disegno. L'oggetto di destinazione (Farfalla) si sposta lungo il tracciato di movimento generato dall'ellisse. Si noti che se la proprietà Fill dell'ellisse è impostata su un pennello, parte dell'oggetto Farfalla verrà coperto.La terza ellisse non è più necessaria, pertanto è possibile eliminarla.
In Oggetti e sequenza temporale espandere i nodi degli elementi Farfalla, RenderTransform e Translation in modo da visualizzare l'intervallo di tempo relativo a Tracciato di movimento. Fare clic con il pulsante destro del mouse sull'elemento Tracciato di movimento o sulla barra grigia che rappresenta l'intervallo di tempo e scegliere 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 "Cc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(it-it,Expression.10).png")
e quindi fare clic su OK.Al momento dell'esecuzione, l'animazione verrà riprodotta in un ciclo infinito.
In Oggetti e sequenza temporale fare clic su Nuovo
.png "Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(it-it,Expression.10).png")
.Verrà visualizzata la finestra di dialogo Crea risorsa Storyboard.
Nel campo Nome risorsa (chiave) immettere il nome Ali e quindi fare clic su OK.
Verrà attivata la modalità registrazione per la nuova sequenza temporale con l'indicatore di riproduzione
.png "Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(it-it,Expression.10).png")
posizionato al secondo 0. In modalità registrazione qualsiasi proprietà impostata registrerà in modo automatico un fotogramma chiave nella sequenza temporale.Per impostare un fotogramma chiave nella posizione del secondo 0, selezionare il pannello Grid Farfalla e quindi fare clic sul pulsante Registra fotogramma chiave
.png "Cc294767.de094a9c-58f2-4466-912a-9bdc18362548(it-it,Expression.10).png")
.Verrà visualizzato un fotogramma chiave
.png "Cc294767.80da70bb-e635-42e8-b26d-f90453096e21(it-it,Expression.10).png")
sulla riga della sequenza temporale che corrisponde al pannello Grid Farfalla.Trascinare l'indicatore di riproduzione nella posizione del secondo 1 e registrare un altro fotogramma chiave.
A questo punto sono impostate la posizione iniziale e quella finale dell'animazione.
Trascinare l'indicatore di riproduzione nella posizione del secondo 0,5, ovvero nella posizione intermedia tra i due fotogrammi chiave impostati in precedenza.
Selezionare lo strumento Selezione nella casella degli strumenti, tenere premuto il tasto ALT e quindi nella tavola da disegno estendere la lunghezza e comprimere la larghezza del pannello Grid Farfalla, in modo che l'aspetto sia simile a quello dell'immagine seguente.
Expression Blend è in modalità di registrazione per la sequenza temporale dell'animazione Ali, pertanto l'azione di modifica del pannello Grid imposta nuovi fotogrammi chiave in corrispondenza del secondo 0,5 per le proprietà ScaleX e ScaleY del pannello Grid.
Estensione dell'elemento Grid contenente i cerchi nella tavola da disegno
.png "Cc294767.a6857649-160b-446f-b998-a135389a19be(it-it,Expression.10).png")
In Oggetti e sequenza temporale espandere i nodi del pannello Grid Farfalla fino a quando non saranno visualizzati i nodi ScaleX e ScaleY. Selezionare questi due nodi, uno dopo l'altro, fare clic con il pulsante destro del mouse su di essi, scegliere Modifica conteggio ripetizioni e quindi nella finestra di dialogo Modifica ripetizioni immettere il valore 2, per far sì che la sequenza temporale venga eseguita due volte, quindi fare clic su OK.
Fare clic sul pulsante Play per verificare il funzionamento dell'animazione nella tavola da disegno. Se noti che il valore delle ripetizioni non verrà considerato per la riproduzione nella tavola da disegno. Se si desidera modificare la durata dell'animazione, è possibile spostare i fotogrammi chiave nella barra grigia che rappresenta l'intervallo di tempo.
[!NOTA]
Se non si dispone di spazio sufficiente per visualizzare l'intera sequenza temporale, è possibile utilizzare la casella di testo Zoom sequenza temporale per eseguire lo zoom indietro della sequenza È inoltre possibile modificare la larghezza dei pannelli, per visualizzare una parte più ampia del pannello Oggetti e sequenza temporale.
A questo punto è possibile impostare i trigger per le animazioni. Qualsiasi nuova sequenza temporale creata nell'elemento principale del documento determinerà l'aggiunta di un trigger di evento predefinito in Trigger per l'evento Window.Loaded che si verifica all'avvio dell'applicazione.
È possibile mantenere tale trigger per la sequenza temporale circolare e aggiungerne uno nuovo per la sequenza temporale Ali.
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 Ali.Begin per eliminare tale azione.
A questo punto, all'avvio dell'applicazione inizierà l'animazione circolare ma non l'animazione Ali.
[!NOTA]
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.
Rimozione dell'animazione Ali dal trigger Window.Loaded
.png "Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(it-it,Expression.10).png")
Per aggiungere il trigger per l'animazione Ali, fare clic sul pulsante Aggiungi trigger evento
.png "Cc294767.671c69bb-32e9-4ef9-9837-29403524abd0(it-it,Expression.10).png")
in Trigger.Verrà creato un nuovo trigger Window.Loaded.
Selezionare l'elemento Grid Farfalla in Oggetti e sequenza temporale e quindi in Trigger utilizzare le caselle a discesa per modificare il nuovo trigger da Quando viene generato Window.Loaded a Quando viene generato Farfalla.MouseEnter.
Fare clic sul pulsante Aggiungi nuova azione
.png "Cc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(it-it,Expression.10).png")
accanto a Quando viene generato Farfalla.MouseEnter e quindi utilizzare le caselle a discesa per modificare la nuova azione impostandola su Ali.Begin.A questo punto, quando il puntatore del mouse viene posizionato sulla farfalla viene avviata la sequenza temporale dell'animazione Ali.
Creazione di un nuovo trigger per l'evento MouseEnter per l'elemento Grid
.png "Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(it-it,Expression.10).png")
Per vedere il comportamento della sequenza temporale dell'animazione e del trigger creato, eseguire un test della scena scegliendo Test Progetto dal menu Progetto.
[!NOTA]
Se l'animazione circolare viene eseguita troppo velocemente, è possibile modificare il tempo di esecuzione della sequenza temporale. In Oggetti e sequenza temporale, selezionare la sequenza temporale del tracciato di movimento nella casella a discesa, espandere i nodi sotto l'elemento Grid fino a quando non verrà visualizzato il nodo Tracciato di movimento, afferrare l'estremità destra della barra grigia che rappresenta l'intervallo di tempo e trascinarla verso destra, per spostare in avanti il momento finale.
In alternativa, è possibile eliminare la sequenza temporale circolare, crearne una nuova e quindi ripetere la procedura a partire dal passaggio 8 (disegno di un'ellisse) per creare il tracciato di movimento. Se non si crea una nuova sequenza temporale prima di ripetere il passaggio 8, l'animazione circolare verrà aggiunta alla sequenza temporale dell'animazione Ali.