Panoramica delle animazioni

L'animazione è un'illusione ottenuta visualizzando rapidamente e in modo ciclico una serie di immagini, ognuna leggermente diversa dalla precedente. La sequenza di immagini viene percepita dal cervello come un'unica scena in evoluzione. Nei film questa illusione viene creata mediante l'utilizzo di videocamere in grado di registrare un numero elevato di fotografie, o fotogrammi, ogni secondo. Quando i fotogrammi vengono riprodotti mediante un proiettore, il pubblico vede un'immagine in movimento. L'animazione sul computer viene ottenuta in modo analogo, tuttavia i fotogrammi registrati possono essere ulteriormente distanziati nel tempo perché è il computer a interpolare e animare le variazioni da un fotogramma all'altro.

Funzionamento dell'animazione in Expression Blend

In Microsoft Expression Blend le animazioni sono basate su fotogrammi chiave che definiscono i punti iniziale e finale di una transizione visiva graduale. Per creare un'animazione in Expression Blend, è necessario creare uno storyboard. All'interno dello storyboard i fotogrammi chiave vengono impostati su una sequenza temporale per indicare le modifiche delle proprietà. È ad esempio possibile impostare un fotogramma chiave sull'indicatore del secondo 0 per registrare la posizione di un rettangolo sul lato sinistro della tavola da disegno e quindi impostare un fotogramma sull'indicatore del secondo 1 per registrare la posizione dello stesso rettangolo sul lato destro della tavola da disegno. L'animazione risultante sarà basata sulla trasformazione che avviene nelle proprietà X e Y del rettangolo in un secondo. Quando si esegue uno storyboard per animazioni, Expression Blend interpola le modifiche delle proprietà nel periodo di tempo stabilito e nell'applicazione vengono visualizzati i risultati di tale interpolazione. È possibile seguire questa modalità per applicare un'animazione a qualsiasi proprietà appartenente a un oggetto in una tavola da disegno, anche alle proprietà non visive.

Fotogrammi chiave in una sequenza temporale in uno storyboard denominato MoveRight che indicano le modifiche delle proprietà Translation X e Y di un oggetto rettangolo

In alcuni programmi di animazione è possibile creare animazioni fotogramma per fotogramma, ovvero animazioni in cui ogni fotogramma può contenere un'immagine o un oggetto diverso. Questo tipo di animazioni possono raggiungere dimensioni notevoli e richiedere l'utilizzo di molte risorse in fase di esecuzione. Per questo motivo, in Expression Blend l'animazione si basa sui fotogrammi chiave, che tramite la registrazione delle modifiche delle proprietà consentono di animare in fase di esecuzione la transizione tra le varie modifiche. In Expression Blend, inoltre, tutti gli oggetti che potrebbe essere necessario far comparire o scomparire nella sequenza temporale dell'animazione sono presenti nell'intera sequenza temporale. Le proprietà di visibilità di tali oggetti possono tuttavia essere modificate tramite i fotogrammi chiave, facendo in modo che l'oggetto compaia o scompaia.

[!NOTA]

In Expression Blend non è possibile creare spontaneamente nuovi oggetti in uno storyboard, tuttavia è possibile generare nuovi oggetti e nuovi storyboard per animazioni a livello di programmazione nei file code-behind. Per ulteriori informazioni, vedere gli argomenti relativi ad animazione e temporizzazione nella sezione di MSDN dedicata a Windows Presentation Foundation.

Torna all'inizio

Storyboard

Gli storyboard sono contenitori di sequenze temporali di un'animazione. Expression Blend 2 include un nuovo controllo selezione storyboard con cui è possibile selezionare e cercare storyboard nel progetto corrente. Per ulteriori informazioni, vedere Aprire o chiudere uno storyboard.

Controllo selezione storyboard in cui sono elencati i diversi storyboard che è possibile aprire

Un'altra novità di Expression Blend 2 è costituita da un menu a comparsa che consente di duplicare, invertire, eliminare, rinominare o chiudere lo storyboard attualmente selezionato oppure di creare un nuovo storyboard. Per ulteriori informazioni, vedere Duplicare o invertire uno storyboard e Rinominare uno storyboard.

Menu a comparsa degli storyboard

È possibile impostare proprietà negli storyboard per fare in modo che vengano invertiti o ripetuti automaticamente quando raggiungono la fine dell'ultima sequenza temporale. Per ulteriori informazioni, vedere Modificare uno storyboard per la ripetizione o l'inversione alla fine del ciclo.

È possibile creare storyboard dalle posizioni (o ambiti) dell'applicazione seguenti:

• Nel corpo principale del documento   Se lo scopo dell'applicazione è quello di presentare un'animazione o non è necessario riutilizzare l'animazione altrove, è possibile creare le sequenze temporali delle animazioni nel corpo principale del documento. Per un esempio, vedere Creare un'animazione semplice.

• In una scena o controllo utente   Se è necessario riutilizzare più volte un'animazione in un singolo documento o in un'altra applicazione, è possibile creare le sequenze temporali delle animazioni in un controllo utente. Ciò è utile anche se si desidera organizzare le animazioni in diversi documenti o progetti. I controlli utente possono essere aggiunti alla tavola da disegno così come qualsiasi altro controllo, ad esempio un pulsante. Per ulteriori informazioni, vedere la sezione Scenes seguente. Per un esempio, vedere Esercitazione: creare un controllo utente WPF o Creare un nuovo controllo utente in un progetto di Silverlight 2.

• Nel modello di un controllo   Se si desidera che a tutti i controlli di un determinato tipo dell'applicazione (ad esempio i pulsanti) venga applicata un'animazione allo stesso modo, è possibile creare l'animazione nel modello del controllo. Ciò non significa che tutti i controlli avranno lo stesso aspetto. Se si utilizza l'associazione ai modelli, ovvero l'associazione di una proprietà del modello a una proprietà del controllo al quale il modello è applicato, i singoli controlli possono essere di colore diverso o variare nell'aspetto visivo quando vengono animati. Per ulteriori informazioni, vedere Cenni preliminari sui controlli. Per un esempio relativo a WPF, vedere Esercitazione: aggiungere un'animazione a un pulsante.

Gli storyboard possono essere gestiti (avviati, interrotti, sospesi) utilizzando trigger impostati sugli oggetti (solo progetti di Windows Presentation Foundation) o gestori dell'evento. Per ulteriori informazioni, vedere Controllare l'esecuzione dello storyboard o Creare un pulsante che controlla uno storyboard in un'applicazione Silverlight.

Torna all'inizio

Sequenze temporali

Le sequenze temporali forniscono la struttura per le sequenze di animazione dell'applicazione. In Expression Blend un'animazione è composta da una sequenza temporale sulla quale si registrano i fotogrammi chiave che rappresentano la collocazione nel tempo delle modifiche alle proprietà. Le sequenze temporali possono essere viste come livelli di modifiche alle proprietà che vengono applicate a oggetti nella tavola da disegno. Le sequenze temporali sono contenute negli storyboards.

Le sequenze temporali delle animazioni vengono gestite nella sezione Oggetti e sequenza temporale del pannello Interazione. Per un'immagine con descrizione dettagliata di tale pannello, vedere Pannello Interazione. I controlli disponibili nel pannello consentono di visualizzare la tavola da disegno man mano che subisce modifiche nel tempo, di aggiungere o modificare sequenze temporali e così via.

Torna all'inizio

Fotogrammi chiave

Un fotogramma chiave è un indicatore sulla sequenza temporale che segnala il momento in cui si verifica una modifica di proprietà. In Expression Blend sono disponibili i quattro tipi di fotogramma chiave seguenti:

• I fotogrammi chiave a livello di oggetto si applicano a interi oggetti, ad esempio un oggetto rettangolo o una griglia che contiene più oggetti. In genere, a meno che non sia stato impostato manualmente facendo clic sul pulsante Registra fotogramma chiave, un fotogramma chiave a livello di oggetto indica che una delle proprietà è presente in un oggetto figlio che è stato modificato. Tale modifica può essere verificata espandendo i nodi dell'oggetto. Nell'immagine precedente (in How does animation work in Expression Blend?), ad esempio, il fotogramma chiave impostato nella riga della sequenza temporale corrispondente a Rectangle è un fotogramma chiave a livello di oggetto.

• I fotogrammi chiave composti indicano che alla proprietà sono associate proprietà figlio cui è applicata un'animazione. Nell'immagine precedente, ad esempio, il fotogramma chiave impostato nella riga della sequenza temporale corrispondente alla proprietà Translate è un fotogramma chiave composto. L'utilizzo dei fotogrammi chiave composti risulta utile per modificare varie proprietà contemporaneamente con un'unica selezione, ad esempio quando si spostano fotogrammi chiave lungo la sequenza temporale.

• I fotogrammi chiave semplici rappresentano la modifica di un'unica proprietà in un istante specifico. Nell'immagine precedente, ad esempio, i fotogrammi chiave impostati nelle righe della sequenza temporale corrispondenti alle proprietà X e Y sono fotogrammi chiave semplici. È necessario utilizzare i fotogrammi chiave semplici per eseguire determinate azioni, ad esempio modificare il numero di ripetizioni di un'animazione. Per un esempio, vedere Impostare la durata del ciclo.

• I fotogrammi chiave impliciti sono presenti quando un'animazione viene interrotta da un'altra e nella seconda non è impostato alcun fotogramma chiave in corrispondenza dell'indicatore del secondo 0. Al momento dell'interruzione, in Expression Blend viene eseguita l'animazione della modifica tra l'ultimo valore noto di una proprietà e il valore impostato nel primo fotogramma chiave della seconda animazione. L'ultimo valore noto è considerato un fotogramma chiave implicito, anche se il valore si trova tra due fotogrammi chiave della prima animazione. Questa transizione viene denominata animazione uniforme ed è descritta più in dettaglio nella sezione seguente Using multiple and overlapping animation timelines.

Conoscere la differenza tra i fotogrammi chiave risulta utile quando non si desidera visualizzare in modo dettagliato ogni proprietà cui è applicata un'animazione. In tal caso, è possibile comprimere le proprietà dei vari oggetti e visualizzare solo i fotogrammi chiave a livello di oggetto. È possibile utilizzare i fotogrammi chiave a livello di oggetto e quelli composti per modificare varie proprietà contemporaneamente con un'unica selezione, ad esempio quando si desidera spostare fotogrammi chiave lungo la sequenza temporale. Per un esempio, vedere Incollare o spostare un fotogramma chiave. È necessario utilizzare fotogrammi chiave semplici per eseguire determinate azioni, ad esempio modificare il numero di ripetizioni di un'animazione. Per un esempio, vedere Impostare la durata del ciclo.

Torna all'inizio

Transizione tra fotogrammi chiave

L'interpolazione dei fotogrammi chiave descrive il modo in cui le modifiche delle proprietà vengono animate nell'intervallo di tempo che intercorre tra due fotogrammi chiave. Per creare modifiche di valori più complesse, è possibile applicare a un intervallo di tempo i metodi di interpolazione seguenti:

• Il valore Variazione in entrata modifica le modalità in base alle quali il valore della proprietà varia man mano che si avvicina l'istante in cui è stato definito il fotogramma chiave. È possibile impostare il grado di variazione della velocità rispetto al fotogramma chiave specificando un valore compreso tra 0% (nessuna variazione) e 100% (variazione completa, ovvero la metà del valore della distanza temporale tra il fotogramma chiave precedente e quello modificato).

• Il valore Variazione in uscita modifica le modalità in base alle quali il valore della proprietà varia man mano che l'istante in cui è stato definito il fotogramma chiave si allontana. È possibile impostare il grado di variazione della velocità rispetto al fotogramma chiave specificando un valore compreso tra 0% (nessuna variazione) e 100% (variazione completa, ovvero la metà del valore della distanza temporale tra il fotogramma chiave modificato e quello successivo).

• Con il valore Nessuna interpolazione non viene eseguita l'interpolazione delle modifiche nel tempo, ma il nuovo valore di proprietà viene modificato improvvisamente quando l'indicatore di riproduzione raggiunge il fotogramma chiave nel punto della modifica.

• L'interpolazione Lineare modifica il valore della proprietà in base a incrementi regolari tra i fotogrammi chiave. L'interpolazione tra due fotogrammi chiave sarà lineare se il valore di Variazione in uscita è 0% per il primo fotogramma chiave e il valore di Variazione in entrata è 0% per il secondo fotogramma chiave.

È possibile modificare i valori dell'interpolazione dei fotogrammi chiave facendo clic con il pulsante destro del mouse su un fotogramma chiave in una sequenza temporale.

Una novità di Expression Blend 2 è la possibilità di utilizzare un key spline per definire la transizione tra fotogrammi chiave mediante la modifica di uno spline in un editor grafico. È inoltre possibile convertire i valori di key spline in risorse e riutilizzarli.

Editor del key spline per la creazione dell'interpolazione personalizzata tra fotogrammi chiave

Per un esempio, vedere Modificare l'interpolazione di animazione tra fotogrammi chiave.

Torna all'inizio

Creare sequenze temporali manualmente o tramite tracciati di movimento

[!NOTA]

I tracciati di movimento non sono supportati nei progetti di Microsoft Silverlight 1.0 o di Silverlight 2.

La creazione manuale della sequenza temporale di un'animazione consente un maggior controllo sul movimento e sul numero di oggetti animati nella sequenza temporale. È possibile creare un'animazione anche tra colori. Per creare manualmente la sequenza temporale di un'animazione in Expression Blend, fare clic sul pulsante Nuovo in Oggetti e sequenza temporale e quindi registrare i fotogrammi chiave. A tale scopo, innanzitutto spostare l'indicatore di riproduzione della sequenza temporale e quindi modificare un oggetto nella tavola da disegno per generare un fotogramma chiave. Per un esempio, vedere Creare un'animazione semplice.

La creazione automatica della sequenza temporale di un'animazione tramite lo strumento Converti in tracciato di movimento consente di fare in modo che nella tavola da disegno un oggetto segua un determinato tracciato, sia esso una linea o il perimetro di una forma quale un'ellisse o un rettangolo. Come illustrato nella figura seguente, il perimetro di un'ellisse si trasforma in un tracciato di movimento per il cerchio blu.

Creare una sequenza temporale di un'animazione tramite un tracciato di movimento

	Due oggetti distinti: un'ellisse e un cerchio (creato con lo strumento Ellipse).
	L'ellisse si trasforma in un tracciato di movimento. A questo punto è possibile eliminare l'ellisse, se si desidera.
	Viene creata un'altra sequenza temporale che, quando riprodotta, sposta il cerchio lungo il tracciato ellittico.

Per un esempio su come utilizzare i tracciati di movimento per generare sequenze temporali di animazione, vedere Creare, modificare o eliminare un tracciato di movimento.

I tracciati di movimento non vengono rappresentati nella sequenza temporale da fotogrammi chiave, pertanto non è possibile modificare gli effetti di interpolazione. È tuttavia possibile modificare il numero delle ripetizioni (vedere Impostare la durata del ciclo). È inoltre possibile orientare l'oggetto animato in base al tracciato in modo tale che qualsiasi lato dell'oggetto rivolto verso il centro del tracciato continuerà a puntare a tale posizione per tutta la durata della sequenza temporale (vedere "Per fare in modo che l'oggetto in movimento sia continuamente orientato in base al tracciato" in Creare, modificare o eliminare un tracciato di movimento).

Dopo la generazione del tracciato di movimento, è possibile aggiungere animazioni manuali alla stessa sequenza temporale che contiene il tracciato di movimento.

Torna all'inizio

Utilizzare più sequenze temporali di animazione sovrapposte

La struttura dello storyboard di Expression Blend consente di eseguire contemporaneamente più storyboard e più sequenze temporali nell'applicazione. È ad esempio possibile disegnare due cerchi che rappresentano una farfalla, creare una sequenza temporale per l'animazione della farfalla che si muove lungo un tracciato di movimento circolare e quindi creare una sequenza temporale di un'animazione distinta per le ali che sbattono. L'animazione delle ali può essere eseguita contemporaneamente all'animazione del movimento circolare, senza interrompere il movimento circolare, poiché le sequenze temporali non applicano un'animazione alle stesse proprietà dell'oggetto della farfalla. Per un esempio, vedere Esercitazione: creare animazioni sovrapposte.

Se due sequenze temporali di animazione applicano contemporaneamente un'animazione alla stessa proprietà, la transizione tra le sequenze temporali avviene in modo diverso se nella seconda animazione si registra un fotogramma chiave sull'indicatore del secondo 0. Se tale operazione non viene eseguita, in Expression Blend viene presupposto che l'utente desideri aggiungere l'animazione a partire dall'ultimo valore della proprietà al momento dell'interruzione fino al valore della proprietà nel punto del primo fotogramma chiave della seconda sequenza temporale. Questo tipo di transizione viene denominato animazione uniforme. Si consideri, ad esempio, un cerchio che in una sequenza temporale si estende fino a raddoppiare in larghezza e in una seconda sequenza temporale si estende fino a quadruplicare in larghezza. Se la sequenza temporale della seconda animazione interrompe la prima e non include un fotogramma chiave impostato in corrispondenza dell'indicatore del secondo 0, l'ellisse si espande in modo graduale a partire dal momento in cui la prima sequenza temporale viene interrotta fino alla seconda sequenza temporale, arrivando a quadruplicare la larghezza originale. Se la seconda sequenza temporale di animazione non è un'animazione uniforme (ovvero se era impostato un fotogramma chiave in corrispondenza dell'indicatore del secondo 0), il cerchio passerebbe improvvisamente al punto di inizio della seconda animazione. Per un esempio, vedere Esercitazione: utilizzare animazioni con e senza continuità.

[!NOTA]

Se due sequenze temporali aggiungono un'animazione alla stessa proprietà di un oggetto, la prima si interromperà al punto di interruzione anche se è impostata per la ripetizione continua.

Torna all'inizio

Frequenze fotogrammi

In Expression Blend l'animazione viene creata tramite l'impostazione di fotogrammi chiave lungo una sequenza temporale. L'interpolazione tra i fotogrammi chiave viene eseguita in fase di esecuzione. Non è pertanto necessario configurare la frequenza fotogrammi dell'animazione. Quando si esegue l'applicazione, l'ambiente di esecuzione di .NET Framework esegue il rendering delle sequenze temporali dell'animazione con la frequenza fotogrammi più elevata possibile.

È comunque possibile specificare gli intervalli della sequenza temporale ai quali è possibile impostare un fotogramma chiave. Questa frequenza di intervalli viene denominata risoluzione snap poiché si riferisce alla posizione della sequenza temporale in cui può essere eseguito lo snap dell'indicatore di riproduzione o dei fotogrammi chiave . Se ad esempio la risoluzione snap è stata modificata e impostata su 10 fotogrammi chiave al secondo, è possibile impostare fotogrammi chiave ad ogni decimo di secondo lungo la sequenza temporale. Per modificare la risoluzione snap, fare clic sull'interruttore di snapping in Oggetti e sequenza temporale e quindi fare clic su Imposta snap per visualizzare la finestra di dialogo Risoluzione snap.

Torna all'inizio

Scene

In Expression Blend è possibile inserire le animazioni all'interno di scene, o controlli utente, e quindi utilizzare tali animazioni più volte in altri documenti nell'applicazione. I controlli utente possono essere creati in un singolo documento o in un file DLL, ovvero una libreria di controlli. È possibile accedere a qualsiasi controllo utente che faccia parte dell'applicazione tramite la scheda Controlli personalizzati della Libreria. Il controllo utente può quindi essere disegnato in un documento, così come qualsiasi altro controllo.

[!NOTA]

Dopo aver aggiunto al progetto un controllo utente, affinché tale controllo venga visualizzato nella Libreria è necessario generare il progetto. Scegliere Genera progetto dal menu Progetto.

Durante la pianificazione delle animazioni da applicare a un controllo utente, è necessario tenere in considerazione i fattori seguenti:

• I tempi delle varie animazioni   Si consideri ad esempio un'applicazione nella quale prima viene animata una schermata iniziale e quindi viene animata l'interfaccia utente con un effetto dissolvenza in entrata. È possibile inserire ogni animazione nel proprio controllo utente, ma all'inizio della seconda animazione lasciare un tempo sufficiente per far finire l'animazione della schermata iniziale.

• Le proprietà e i trigger che si desidera siano disponibili nelle animazioni   Si consideri ad esempio un'applicazione che include un pulsante e un'animazione contenuta in un controllo utente. Non è possibile aggiungere un trigger al controllo utente che avvierà la sequenza temporale dell'animazione al clic del pulsante, a meno che anche il pulsante non faccia parte del controllo utente. È possibile, inoltre, eseguire associazioni dati tra valori di proprietà solo se entrambe le proprietà si trovano nello stesso controllo utente.

  [!NOTA]

  I trigger non sono disponibili nei progetti di Microsoft Silverlight 1.0 o di Silverlight 2. Una funzionalità denominata Stati offre tuttavia funzionalità simili nei progetti di Silverlight 2.

Per un esempio, vedere Esercitazione: creare un controllo utente WPF oppure vedere la sezione relativa all'utilizzo di storyboard nei controlli utente in Controllare l'esecuzione dello storyboard.

Torna all'inizio

Eseguire il test di storyboard

In un progetto di Expression Blend il test degli storyboard può essere eseguito in modo diversi, ad esempio nell'ambiente di sviluppo o in fase di esecuzione quando l'applicazione viene compilata (scegliere Test Progetto dal menu Progetto o premere F5). Per eseguire il test nell'ambiente di sviluppo, è possibile utilizzare i controlli per la riproduzione disponibili in Oggetti e sequenza temporale nel pannello Interazione:

Controlli per la riproduzione in Oggetti e sequenza temporale

• Vai a primo fotogramma   Sposta l'indicatore di riproduzione sul primo fotogramma dell'animazione.

• Vai a fotogramma precedente   Sposta l'indicatore di riproduzione sul fotogramma precedente.

• Play   Riproduce l'animazione a partire dall'istante corrente.

• Vai a fotogramma successivo   Sposta l'indicatore di riproduzione sul fotogramma successivo.

• Vai a ultimo fotogramma   Sposta l'indicatore di riproduzione sull'ultimo fotogramma dell'animazione.

Eseguire lo scrubbing della sequenza temporale

L'esecuzione dello scrubbing di una sequenza temporale rappresenta una tecnica estremamente utile per controllare in modo preciso la velocità e la posizione dell'animazione da visualizzare in anteprima o di cui eseguire il test. Per eseguire lo scrubbing. è sufficiente trascinare l'indicatore di riproduzione. Man mano che si trascina l'indicatore di riproduzione, l'animazione verrà visualizzata sulla tavola da disegno. È possibile eseguire lo scrubbing dei fotogrammi normalmente oppure in ordine inverso. La velocità di riproduzione dell'animazione dipende alla velocità con cui si trascina l'indicatore di riproduzione.

Per un esempio, vedere Eseguire lo scrubbing della sequenza temporale.

Snapping temporale

Nella categoria Oggetti e sequenza temporale del pannello Interazione sono contenuti strumenti che consentono di controllare la riproduzione dell'animazione e di spostarsi nel tempo in base a un valore espresso in unità discrete (fotogrammi al secondo) e determinato dalla risoluzione di snap. Lo snapping temporale viene utilizzato quando ci si sposta nel tempo utilizzando i controlli per la riproduzione. Quando si fa clic sui pulsanti relativi al fotogramma precedente o successivo, l'indicatore di riproduzione viene spostato avanti o indietro in base alla quantità di fotogrammi al secondo specificata, che viene determinata dalla risoluzione di snap.

Finestra di dialogo Risoluzione snap

Per esempi relativi all'utilizzo della risoluzione snap, vedere Attivare o disattivare lo snapping della sequenza temporale e Modificare la risoluzione di snap.

[!NOTA]

Lo snapping della sequenza temporale non viene applicato alla frequenza fotogrammi o alla velocità dell'animazione durante l'esecuzione dell'applicazione. Per ulteriori informazioni, vedere Frame rates.

Campo relativo all'istante corrente

Nel campo relativo all'istante corrente viene visualizzato l'istante attualmente selezionato, espresso nella forma MM.SS.xxx (minuti, secondi, millisecondi). Per spostarsi in modo rapido su un istante specifico, è possibile immetterne il valore numerico in questo campo.

Casella di testo Posizione indicatore di riproduzione che indica il valore 1,450 secondi

Per un esempio di utilizzo del campo relativo all'istante corrente, vedere Passare a un punto specifico in una sequenza temporale.

Torna all'inizio

Trigger

È possibile utilizzare i trigger per modificare lo stato di un oggetto nella tavola da disegno in risposta ad eventi o modifiche di proprietà. Tramite i trigger è possibile avviare e interrompere le sequenze temporali delle animazioni. Ad esempio, quando si crea una sequenza temporale viene creato un trigger predefinito che eseguirà la sequenza temporale al primo caricamento dell'applicazione. È possibile modificare tale trigger o crearne altri che eseguiranno la sequenza temporale quando un utente fa clic su un pulsante o esegue altri azioni. Per informazioni dettagliate sui trigger, vedere Cenni preliminari sui trigger.

[!NOTA]

I trigger non sono disponibili nei progetti di Microsoft Silverlight 1.0 o di Silverlight 2. Una funzionalità denominata Stati offre tuttavia funzionalità simili nei progetti di Silverlight 2.

Torna all'inizio

Gestori degli eventi

I gestori degli eventi sono metodi che si programmano per essere eseguiti al verificarsi di un determinato evento, ad esempio l'evento MouseOver. È possibile utilizzare un gestore di eventi anziché un trigger se è necessario eseguire operazioni più complesse della semplice impostazione di una proprietà o del controllo della sequenza temporale di un'animazione al verificarsi di un evento nell'applicazione. I metodi dei gestori degli eventi consentono di aggiungere logica di programmazione, ad esempio l'impostazione di una proprietà in un altro oggetto, il caricamento di un nuovo documento, la creazione di un nuovo oggetto, l'utilizzo di calcoli matematici per l'applicazione di un'animazione a un oggetto, e così via. Se ad esempio si desidera determinare il tasto premuto durante l'evento KeyDown, è necessario creare un metodo di un gestore degli eventi che verrà chiamato quando il tasto viene premuto e aggiungere codice per determinare quale tasto è stato premuto.

I metodi del gestore dell'evento sono definiti nel file code-behind del documento. In un progetto di Windows Presentation Foundation o di Silverlight 2 i file code-behind sono scritti in Microsoft Visual C# o Microsoft Visual Basic .NET (per alcuni esempi, vedere Controllare elementi multimediali utilizzando trigger in una sequenza temporale e Caricare una nuova pagina dinamicamente in un'applicazione Silverlight 2). In un progetto di Silverlight 1.0 i file code-behind sono scritti in JavaScript (per un esempio, vedere Creare un pulsante che controlla uno storyboard in un'applicazione Silverlight).

Torna all'inizio

Animazione creata tramite codice

Quando in Expression Blend è attiva la visualizzazione Struttura, è possibile creare intere sequenze temporali di animazioni senza modificare il codice XAML o il codice di un file code-behind. È inoltre possibile configurare trigger per l'avvio, l'interruzione e la sospensione delle sequenze temporali delle animazioni in base alle interazioni con l'utente. Nella visualizzazione Struttura di Expression Blend è possibile eseguire tutte le operazioni relative all'animazione più comunemente utilizzate.

Alcuni scenari avanzati di animazione richiedono la codifica (in C# o Visual Basic .NET), ad esempio l'utilizzo di calcoli matematici per determinare il movimento di un oggetto. Se si intende modificare le sequenze temporali delle animazioni in file code-behind, è utile conoscere il modello di animazione di Windows Presentation Foundation (WPF), poiché un'applicazione visiva creata con Expression Blend è essenzialmente un'applicazione WPF.

Nel codice XAML le sequenze temporali delle animazioni vengono rappresentate da un elemento storyboard. Quando ad esempio si crea la sequenza temporale di un'animazione nella visualizzazione Struttura di Expression Blend, il codice XAML generato per l'animazione sarà simile al seguente:

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

Gli attributi dell'esempio di codice XAML precedente sono i seguenti:

• L'attributo x:Key specifica il nome della sequenza temporale o dello storyboard.

• L'attributo BeginTime specifica il momento di avvio dell'animazione. In questo caso, l'indicatore del secondo 0.

• L'attributo TargetName specifica il nome dell'elemento al quale lo storyboard o la sequenza temporale applica un'animazione. In questo caso è un oggetto denominato "rectangle".

• L'attributo TargetProperty specifica la proprietà che verrà modificata. In questo caso la proprietà di posizione Y del rettangolo.

• Gli attributi KeyTime specificano gli intervalli di tempo ai quali verranno eseguire le modifiche delle proprietà di destinazione e i relativi nuovi valori da impostare. Nella visualizzazione Struttura di Expression Blend questi elementi vengono rappresentati dai fotogrammi chiave nella sequenza temporale.

È possibile gestire a livello di programmazione le sequenze temporali delle animazioni nei file code-behind tramite codice C# o Visual Basic .NET. Per avviare, ad esempio, la sequenza temporale di animazione precedente in un file code-behind, il codice C# sarà simile al seguente:

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

Per ulteriori informazioni su come creare e manipolare sequenze temporali di animazione in file code-behind e XAML, vedere gli argomenti relativi ad animazione e temporizzazione nella sezione di MSDN dedicata a Windows Presentation Foundation oppure vedere gli esempi e le esercitazioni pubblicate sul sito Web Microsoft Expression.

Torna all'inizio