Creare una animazione in Silverlight

La creazione di animazioni per Silverlight può essereun processo semplice, a seconda dell'animazione che si hain mente. Il tool usato per creare animazioni èExpression Blend 2. Creiamo ora un semplice cerchio rotante(che ricorda quelle animazioni presenti in Windows Vistaquando si aspetta che un lungo processo abbia termine) e lomostreremo in un'applicazione Silverlight. Cominciamo conil creare una nuova applicazione Silverlight in Visual Studio2008.

Una volta creata la nuova soluzione, apritela in ExpressionBlend (ciò è facilmente fattibile cliccando conil tasto dentro del mosue sul file XAML presente in VisualStudio 2008 Explorer e selezionando l'opzione di aperturadel file in Expression Blend). Una volta aperto il progettoin Expression Blend, vi ritroverete un'area bianca su cuipoter lavorare.

Per creare un'animazione rotante, trascinate un ellissedalla toolbar sull'area di disegno XAML. Tenendoselezionato l'ellisse, usate il pannello delleproprietà per configurare l'ellisse in manierasimilare a quello mostrato nella figura sottostante.

Silverlight animation
Fig 1: configurazione dell'ellisse

Sul pannello Objects e Timeline, selezionate ilbottone Open, Create, o ManageStoryboards. Cliccate sul bottone (+) per creare unanuova timeline. La finestra di dialogo CreateStoryboard dovrebbe essere come quella qui sotto.

Fig 2: creazione della timeline

Assegnate un nome alla nuova timeline e cliccate OK. Poi,selezionate un punto sulla timeline e modificate in qualchemaniera l'ellisse. In quest'esempio, vogliamospostare l'ancora nell'angolo dell'ellisse usandoil mouse e ruotare l'ellisse svariate volte. Poteteinfine testare l'animazione cliccando il bottonePlay sulla timeline.

Se volete che l'animazione continui infinitamente senzafermarsi, in Expression Blend selezionate la timeline e nelpannello delle proprietà, settate la proprietàRepeatBehavior a "Forever".Salvate la pagina e tornate in Visual Studio 2008.

In Visual Studio, se eseguite l'applicazione Silverlightcosì come è stata creata in Expression Blend,l'animazione apparirà ma non verràeseguita. Per eseguire l'applicazione, dovete invocare ilmetodo Begin di StoryBoard. Perfare ciò, si deve assegnare un nome allaStoryBoard. Fatto ciò, invocate il metodoBegin dal codice che accompagna il file inquesto modo:

public void Page_Loaded(object o, EventArgs e) {// Richiesto per l'inizializzazione delle variabili    InitializeComponent();    Spin.Begin();  }

La pagina con l'animazione silverlight risultantesarà come quella rappresentata qui sotto:

Fig 3: risultato finale