Resumé

Silverlight Tweener

Cristian Merighi () 4,50

La mia personale rivisitazione del corrispettivo Flash (mx.transitions.Tween) dal punto di vista di Silverlight. Per scatenare animazioni d'impatto sugli elementi che compongono l'interfaccia della XAML Page.
Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.
warning! L'articolo in oggetto è da considerarsi obsoleto.
Prego fare riferimento a quest'altro articolo.

Questo è il primo articolo che scrivo a proposito di Silverlight e provo un pizzico di adrenalina.
Diversamente da Silverlight 1.0, la versione 2.0 Beta è roba davvero buona!
...sì, lo so, il termine di paragone cui rapportarsi quando si parla di Silverlight è necessariamente Adobe® Flash, cosa dire in proposito?...
Personalmente sviluppo con Flash dalla versione 5 ed ho scritto un bel mucchietto di applicazioni e classi custom riutilizzabili (dacché esiste Actionscript 2). Ho anche visto crescere la IDE ufficiale per tale tecnologia (ho detto crescere? ...Vero. Un'unica osservazione: la versione 9 è dannatamente lenta rispetto alle precedenti!)
Detto ciò, mi sento tranquillo in coscienza quando dico che «sviluppare con Flash è allo stesso tempo "esaltante" e "frustrante"»:

  • "esaltante" perché, dalla prospettiva di un grafico (designer), puoi ottenere effetti di notevole impatto sfruttando i potenti tool a disposizione (inciso: il tool di disegno dovrebbe essere copiato pedissequamente da ogni software di grafica vettoriale e non sul pianeta!) e la serie di effetti in esso incapsulati.
    (...e qui brilla la pluriennale esperienza nella gestione di elementi multimediali di Macromedia e Adobe)
  • "frustrante" perché, dalla prospettiva di uno sviluppatore (developer), si corre il serio rischio di essere improduttivi causa la mancanza di debuggers ed intellisense di rilievo. (tra Adobe e Microsoft® Visual Studio... beh, non c'è proprio gara!).

Pro e contro di Silverlight? IMHO ritengo che questa tecnologia (e vi includo anche papà WPF) non possa essere coscientemente utilizzata da un designer "puro" (nemmeno con l'ausilio di Blend).
Se un MovieClip (in Flash) è un oggetto piuttosto comodo da trattare: lo si trascina con agilità dalla library allo stage e lo si integra al volo con nuovi metodi e behaviors, non mi sento di poter dire lo stesso di un oggetto WPF/Silverlight sotto forma di XAML.
Di per sé molto meno gestibile come individuazione, posizionamento, sviluppo e centralizzazione si styles e templates, ruolo all'interno dell'applicativo... basta poco secondo me, da parte di un grafico anche in gamba, per rendere la vita molto difficile se non impossibile allo sviluppatore che viene dopo di lui sulla filiera della vita dell'applicativo e sul di-lui layout si trova a digrignare i denti!...
Da quella specie di deseloper che sono, preferisco senza dubbio stare dalla parte di Visual Studio. Perdippiù Silverlight è un'assoluta novità, motivo in più per stuzzicare l'adrenalina di cui sopra...

Lasciamo comunque le eteree, irrisolvibili questioni riguardanti le due software house dell'empireo del byte e ricrolliamo sulla polverosa terra delle real-world apps...
Domanda: se doveste produrre un'applicazione Silverlight d'impatto e poteste utilizzare una ed una sola feature presente nel mondo Flash, quale scegliereste?
Risposta (maggioranza bulgara): ..."Tweening API"!...
Sono d'accordo;).

Ho cercato sulla rete questo tipo di feature ed ho subito trovato agTweener: oggetto piuttosto carino scritto da Michael Cameron e che sfrutta le mai-a-sufficienza-osannate easing equations di Robert Penner.

Ho spulciato il codice di queste classi (disponibili su CodePlex) ed ho deciso di riscriverlo alla mia maniera, con una struttura ed un codice più alla .Net 3.5 (piccolo inciso sulla forma e non sul contenuto: non sopporto membri pubblici non PascalCased in .Net!), replicando per quanto possibile le API AS2 mx.transitions.Tween.
Il class diagram del sistema è delineato nell'immagine che segue:

database extract

Come utilizzare tale struttura? Ecco un estratto di codice:

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

    ITween tween4 = Tweener.CreateTween(cnv, Canvas.OpacityProperty, Expo.EaseIn, 1D, 0D, TimeSpan.FromSeconds(2D));

    ITween tween3 = Tweener.CreateTween(cnv, TweenProperty.Angle, Elastic.EaseOut, 0D, 180D, TimeSpan.FromSeconds(4D));

    ITween tween2 = Tweener.CreateTween(cnv, TweenProperty.OffsetY, Linear.EaseNone, 0, 200D, TimeSpan.FromSeconds(3D));

    ITween tween = Tweener.CreateTween(cnv, Canvas.ZIndexProperty, Circ.EaseOutIn, 1D, 20D, TimeSpan.FromSeconds(.9D));

    tween.MotionStarted += new EventHandler(tween_MotionStarted);

    tween.MotionFinished += new EventHandler(tween_MotionFinished);

    tween.MotionChanged += new TweenMotionChangedEventHandler(tween_MotionChanged);

}

 

void tween_MotionChanged(object sender, TweenMotionChangedEventArgs e)

{

    txt.Text += string.Format("\n[{0:T}] value {1}", DateTime.Now, e.CurrentPosition);

}

 

void tween_MotionFinished(object sender, EventArgs e)

{

    txt.Text += string.Format("\n[{0:T}] Finished!", DateTime.Now);

}

 

void tween_MotionStarted(object sender, EventArgs e)

{

    txt.Text += string.Format("\n[{0:T}] Started!", DateTime.Now);

}

 

Nell'esempio sopra cnv è un'istanza di Canvas mentre txt è un TextBlock utilizzato per tracciare informazioni sugli eventi del Tweener.
Il namespace è Pacem.Silverlight.Tweening e gli oggetti basilari utilizzati sull'elemento Canvas sono:

  • Tweener: classe statica che può coinvolgere sia un semplice DependencyObject con relativa DependencyProperty (il cui  _propertyType è di tipo Double o Int32) sia un UIElement il cui RenderTransform viene arricchito con specifici oggetti Transform relativi al tipo di tweening richiesto (translation, skewing, rotation, scaling...).
    Il metodo centrale (CreateTween) prevede anche i seguenti parametri:
    • un EasingFunc delegate: Easing.EasingFunc "macina" una array (params) di Double e ritorna un valore Double (le versioni standard di questo tipo di delegates sono strutturate nel namespace Pacem.Silverlight.Tweening.Easing;
    • un valore Start: valore di tipo Double che contrassegna lo stato iniziale della property oggetto di tweening;
    • un valore Finish: valore di tipo Double che contrassegna lo stato finale della property oggetto di tweening;
    • un valore Duration: valore di tipo TimeSpan che rappresenta la durata del processo di tweening;
    • [un valore Delay (opzionale): valore di tipo TimeSpan che rappresenta l'offset temporale richiesto prima dell'effettivo inizio del tweening].
    Deputato alla gestione delle logiche di clock che necessariamente s'impongono è un DispatcherTimer con relativo listener sull evento Tick...
  • ITween: istanza (sotto forma d'interfaccia) ritornata dal metodo CreateTween del Tweener. Essa porta con se tutte le informazioni necessarie per tenere traccia di ciò che accade durante il tweening, in particolare espone tre eventi: MotionStarted, MotionChanged and MotionFinished che possono risultare davvero utili.

Gli step futuri prevedono test intensivi (Ho scritto la prima riga di codice stamattina ed ora sono qui a terminare questo articolo... pauca sed matura soleva dire il grande Gauss, forse un giorno ne seguirò il consiglio) e qualche extra-feature come ad esempio degli "ending behaviors" (ricordate lo yoyo() method della classe mx.transitions.Tween?)

Se volete, potete scaricare i progetti per Visual Studio 2008 (Tweener + Testing Silverlight App) dal link sotto.

zip file « download code

Take care. Bye.

Feedbacks

  • Re: Silverlight Tweener

    Kamil venerdì 4 luglio 2008 5,00

    This is great but i think there is something wrong with rotation effect - object is rotated around point, which isn't center point of this object. BTW thanks for this article and sources.

  • Re: Silverlight Tweener

    christian giovedì 28 agosto 2008 4,00

    Very intresting, thow I think some people (like me) would definitly love something like a turorial on writing a tween class, Concepts, .Net relations... Anyone know about something in this way ?

feedback
 

Syndicate

Autore

Cristian Merighi facebook twitter google+ youtube

Ultimi articoli

Top rated

Archivio

Dove sono?

Autore

Cristian Merighi facebook twitter google+ youtube

Le mie letture

Feeds