WPF: accelerare un’animazione per arrivare velocemente alla fine

In un’applicazione WPF che sto programmando nel tempo libero ho creato un’animazione che parte automaticamente all’apertura della Window principale dell’applicazione stessa. Essa prepara l’interfaccia utente con un po’ di “effetti speciali”:

• il titolo dell’applicazione appare con un fade-in
• stessa cosa per il background, ma con un leggero ritardo rispetto al titolo
• altre scritte appaiono ruotando e spostandosi velocemente sullo schermo, posizionandosi vicino al titolo
• poi appare il menù principale, anch’esso con un fade-in
• il logo VivendoByte viene posizionato in basso a destra sullo schermo

Va da sè che l’animazione viene applicata a diversi elementi dell’interfaccia utente definita nello XAML ed impiega 5 secondi per il completamento. Sebbene possa essere divertente da vedere, posso capire che l’utente voglia – in certi momenti – essere più sbrigativo e saltare direttamente alla fine per avere l’interfaccia utente pronta all’uso, senza perdersi in convenevoli ed effetti speciali che magari vorrebbe evitare.

La domanda di questa sera quindi è: posso accelerare l’animazione facendo in modo che balzi alla fine senza far aspettare l’utente che sta davanti allo schermo? La risposta è ovviamente sì.

Vediamo come fare. Diamo un’occhiata al costruttore della Window:

 1 public StartWindow()
 2 {
 3     InitializeComponent();
 4     anim = (Storyboard)this.FindResource("FadeInStoryboard");
 5     
 6     this.MouseUp += delegate(object sender, MouseButtonEventArgs args)
 7     {
 8         anim.SetSpeedRatio(this, 8.0);
 9     };
10 
11     // Start the animation and make it controllable via code
12     anim.Begin(this, true);
13 }

Alla linea 4 otteniamo l’istanza di Storyboard che si chiama “FadeInStoryboard”. Come abbiamo visto, l’animazione fa molte più cose di un semplice fade-in, ma il nome è rimasto così. Poco male.

Alla linea 6 ci sottoscriviamo all’evento MouseUp della Window e ad adesso assegnamo un event handler tramite un anonymous method. In pratica…se l’utente clicca sulla finestra viene settata una nuova velocità all’animazione (metodo SetSpeedRatio). In questo caso, la velocità viene moltiplicata per un fattore 8.0. Invece di 5 secondi, il tutto termina in pochi istanti.

Cosa importante: ricordiamoci sempre che se vogliamo controllare l’animazione via codice C# dobbiamo farla partire da codice. La linea 12 fa proprio questo: la chiamata al metodo Begin della classe Storyboard ha due overloads. Il primo parametro è l’oggetto Window, il secondo è un booleano che indica se l’animazione deve poter essere controllata da codice oppure no. Se questo secondo parametro venisse omesso o valesse false, la chiamata a SetSpeedRatio non sortirebbe alcun effetto. La stessa cosa vale per tutti i metodi o proprietà che in qualche modo interagiscono sull’animazione (Seek, SkipToFill, AccelerationRatio, etc.).

Technorati Tags: wpf .NET Framework XAML animation storyboard

Send to Kindle