Silverlight Tweener
Cristian Merighi ()
My personal version of the extolled Flash API(mx.transitions.Tween), translated into Silverlight's world. In order to create impactful motions for the elements of your XAML Page.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.
This article has to be considered outdated.
Please refer to
here for an updated version of the problem.
This is my first article on Silverlight and I'm quite excited.
Differently from its 1.0 version - with this 2.0 Beta - we're now handling some good stuff!
...yep, I know, the comparison to always keep in mind is versus Adobe® Flash, what to say about it?...
I've a good experience of Flash and Actionscipt (since Flash 5), I've been writing lots of application and developed several
reusable custom classes since Actionscript 2. I've also experienced the evolution of the IDE for Flash.
So I'm pretty tranquil when I say that «Developing flash can be at the same time "much-fun" and "frustrating"»:
- "much-fun" because from a designer's perspective
you can produce impressive stuff with powerful tools (drawing capabilities should be copied by every graphical software worldwide!) and embedded effects.
(here it shines the multi-year experience in handling multimedia stuff by Macromedia and Adobe)
- "frustrating" because from a developer's perspective the risk of being improductive, due to debugging/intellisense lacks, scares me.
(Adobe IDE vs Visual Studio isn't a match, definitely).
What about Silverlight pros and cons? I humbly think that this technology (let's talk about WPF too) can't be easily handled by a pure designer.
If a Flash MovieClip is a cozy entity to drag and move across stage and library and it is pretty easy to plug it with methods and behaviors,
I can't say the same about XAML objects, if a designer mess something or doesn't build a rigorous object structure, the developer will
likely grit his teeth while coding!...
Being some sort of "deseloper" I surely prefer staying with Visual Studio. Silverlight is also an absolute novelty, that gets me more excited...
Anyway let's leave the pros and cons aether, and let's jump back onto the real world's ground!
What do I need to build some serious Silverlight stuff, with motion effects comparable to those seen in Flash?
Ten out of ten consumed Flash developers (in a Bulgarian ballot) will say "Tweening API"!...
I'm among those ten;).
I've started googling about this sort of feature and I suddenly found
agTweener: real good stuff written by Michael Cameron
exploiting the never-enough-extolled easing equations written by
Robert Penner.
I've digged into it and I decided to rewrite 'em in a more structured .Net 3.5 manner, also trying to replicate the original AS2 mx.transitions.Tween API.
The class diagram of the system is pictured below:
Now let us see how to use my personal Silverlight Tweener (extract):
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);
}
In the sample above cnv is a Canvas instance while txt is a TextBlock used to track the Tweening events.
Namespace is Pacem.Silverlight.Tweening and the core classes used to tween the test Canvas are:
- Tweener: static class that initializes either a DependencyObject with a relative DependecyProperty
(whose property type must be Double or Int32) or an UIElement whose RenderTransform property gets plugged with specific Transform object
depending on the type of tweening required (translation, skewing, rotation, scaling...)
The core method (CreateTween) needs also the following parameters:
- an EasingFunc delegate: Easing.EasingFunc expects an array (params) of Double and returns a Double value (the standard easing functions are layered
into the Pacem.Silverlight.Tweening.Easing namespace);
- a Start value: Double value representing the initial state of the object's property;
- a Finish value: Double value representing the final state of the object's property;
- a Duration value: TimeSpan value representing the duration of the whole motion;
- [a Delay value (optional): TimeSpan value representing the time offset required before the motion starts].
An encapsulated DispatcherTimer - with relevant tick-listener - takes care of the clock logic...
- ITween: interface instance returned by Tweener's CreateTween method. It has all the necessary information to keep track of the tweening motion
and, in particular, three events to listen to: MotionStarted, MotionChanged and MotionFinished
(they can be very useful to trigger particular action during the clue moments of the motion).
The future steps will see an intensive test (I started to write this API this morning and now I'm writing this article...
pauca sed matura as Gauss used to say, I will follow his advice one day)
plus a bunch of extra features: like "ending behaviors" (remember the yoyo() method in mx.transitions.Tween?)
You can now donwload - if you want - the Visual Studio projects (Tweener + Testing Silverlight App) from the link below.
« download code
Take care. Bye.