Esercitazione: creare animazioni sovrapposte
.png "Questa pagina si applica solo ai progetti WPF")
La struttura della sequenza temporale di Microsoft 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.
[!NOTA]
Nella procedura seguente vengono utilizzati trigger in un progetto di Windows Presentation Foundation (WPF) per controllare gli storyboard. In alternativa, è possibile utilizzare il comportamento ControlStoryboardAction per controllare gli storyboard in WPF o in Microsoft Silverlight. Per informazioni sull'utilizzo di un comportamento, vedere Aggiungere un comportamento a un oggetto.
Per creare animazioni sovrapposte
In Microsoft Expression Blend aprire o creare un nuovo progetto WPF. Per ulteriori informazioni, vedere Creare un nuovo progetto.
Passare all'area di lavoro Animazione Premere F6 per scorrere tra le aree di lavoro disponibili. Nell'area di lavoro Animazione, il pannello Oggetti e sequenza temporale si trova sotto la tavola da disegno.
Se è aperto uno storyboard, fare clic su Chiude lo storyboard
.png "Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(it-it,Expression.40).png")
nel pannello 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 Ellisse
.png "Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(it-it,Expression.40).png")
dal pannello 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 Selezione
.png "Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(it-it,Expression.40).png")
dal pannello 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.40).png")
Per utilizzare i due cerchi contemporaneamente, selezionarne uno nel pannello 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, quindi fare clic su Grid.
Nel pannello Oggetti e sequenza temporale verrà visualizzato un nuovo pannello di layout Grid contenente entrambi i cerchi.
Rinominare l'oggetto 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 nel pannello 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 l'oggetto GridFarfalla****, quindi fare clic su OK.
Verrà creata una nuova sequenza temporale In Expression Blend viene attivata la modalità di registrazione della nuova sequenza temporale, per cui è possibile fare clic su Riproduci
.png "Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(it-it,Expression.40).png")
per visualizzare l'animazione nella tavola da disegno. L'oggetto di destinazione (Butterfly) 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 Butterfly verrà coperto.La terza ellisse non è più necessaria, pertanto è possibile eliminarla.
Nel pannello 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 su Imposta ripetizione continua
.png "Cc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(it-it,Expression.40).png")
, quindi fare clic su OK.Al momento dell'esecuzione, l'animazione verrà riprodotta in un ciclo infinito.
Nel pannello Oggetti e sequenza temporale fare clic su Nuovo
.png "Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(it-it,Expression.40).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.40).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 l'oggetto GridFarfalla****, quindi fare clic sul pulsante Registra fotogramma chiave
.png "Cc294767.e8ec61d4-c8e8-465a-85a7-70bf787a67de(it-it,Expression.40).png")
.Verrà visualizzato un fotogramma chiave
.png "Cc294767.fa3c696d-5463-4000-8a6b-650fe6759bf7(it-it,Expression.40).png")
sulla riga della sequenza temporale che corrisponde all'oggetto GridFarfalla****.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 nel pannello Strumenti, tenere premuto il tasto ALT, quindi nella tavola da disegno estendere la lunghezza e comprimere la larghezza dell'oggetto GridFarfalla**** in modo che l'aspetto sia simile a quello dell'immagine seguente.
Poiché Expression Blend è in modalità di registrazione per la sequenza temporale dell'animazione Ali, l'azione di modifica dell'oggetto GridFarfalla**** imposta nuovi fotogrammi chiave in corrispondenza del secondo 0,5 per le proprietà ScaleX e ScaleY dell'oggetto Grid.
Estensione dell'oggetto Grid nella tavola da disegno
.png "Cc294767.a6857649-160b-446f-b998-a135389a19be(it-it,Expression.40).png")
Nel pannello Oggetti e sequenza temporale espandere i nodi dell'oggetto GridFarfalla**** 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 al pannello 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.
Nel pannello 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 pannello Trigger. A tale scopo, fare clic sui bordi del pannello e sul bordo all'interno dello stesso, quindi trascinare.
Rimozione dell'animazione Ali dal trigger Window.Loaded
.png "Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(it-it,Expression.40).png")
Per aggiungere il trigger relativo all'animazione Ali, fare clic sul pulsante Aggiungi trigger evento
.png "Cc294767.671c69bb-32e9-4ef9-9837-29403524abd0(it-it,Expression.40).png")
nel pannello Trigger.Verrà creato un nuovo trigger Window.Loaded.
Selezionare l'oggetto GridFarfalla**** nel pannello Oggetti e sequenza temporale, quindi nel pannello 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 su Aggiungi nuova azione
.png "Cc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(it-it,Expression.40).png")
accanto a Quando viene generato Farfalla.MouseEnter, quindi utilizzare le caselle a discesa per modificare la nuova azione impostandola su Ali.Begin.A questo punto, quando il puntatore viene posizionato sulla farfalla viene avviata la sequenza temporale dell'animazione Ali.
Creazione di un nuovo trigger per l'evento MouseEnter per l'oggetto Grid
.png "Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(it-it,Expression.40).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. Nel pannello Oggetti e sequenza temporale, selezionare la sequenza temporale del tracciato di movimento nella casella a discesa, espandere i nodi sotto l'oggetto 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.
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.