Saturday, September 08, 2007 12:50 AM
codeblock
Silverlight Animation Library
Recently I've developed my photoblog using Silverlight 1.0 and I found some trouble working hardly with animations. My concern was the coordination of different animation running in a scene. I found often difficult to create sequences of animations where a storyboard start running when another storyboard ends. After few tries I decided to write some Javascript classes emulation the animation model exposed by AJAX Control Toolkit where there are also some classes capable of run parallel, and sequence animations simply by declaring them and call the run method.
I decided to publish here the result of my work. I created a small hierarchy starting by Elite.Animatable class that act as abstract base class for all other types. Then I implemented some times this base creating this classes:
- Elite.Animation :
- this class is the starting brick of the animation system. It accept a storyboard as input and control it by begin() and stop() method.
- Elite.CompositeAnimation
- this class work as base for animations that accept multiple storyboard as input. It extends Elite.Animatable
- Elite.SequenceAnimation
- Elite.ParallelAnimation
- Elite.ConditionalAnimation
- this classes represent different behaviors for multiple animations. Them accept an array of Elite.Animatable and run according to his name.
With this hierarchy is possible to write something like this code:
var growth = new Elite.Animation(this._root.findName("growth"));
var translate = new Elite.Animation(this._root.findName("translate"));
var toYellow = new Elite.Animation(this._root.findName("toYellow"));
var toRed = new Elite.Animation(this._root.findName("toRed"));
var toBlue = new Elite.Animation(this._root.findName("toBlue"));
var parallel0 = new Elite.ParallelAnimation([translate, toYellow]);
var parallel1 = new Elite.ConditionalAnimation([parallel0, toRed, toBlue]); parallel1.add_decisionRequest(
function(sender, args)
{
var i = parseInt( Math.random() * 3 );
args.set_animationIndex(i);
});
var fullAnimation = new Elite.SequenceAnimation([growth, parallel1]);
fullAnimation.begin();
In the declarations the storyboards are wrapped from a simple Animation object. Then the animatables are composed into a ParallelAnimation and a ConditionalAnimation. This are also wraper in a SequenceAnimation. When the begin method of the SequenceAnimation will be called the aniamtables object will run sequentially, parallel or conditional composing a full animation. The mean of the composite animation are:
- Parallel: all the animatables run parallel starting at the same time. A "completed" event will be fired when the last animatable ends.
- Sequence: the animatables run one by one. The second run when the first stop. A "completed" event will be fired when the last animatable ends.
- Conditional: when the animation begin a DecisionRequest event fire and the event handler must set the index of the animatables to start into his array.
The powerful aspect of this library is the classes architecture. All the classes extendes Elite.Animatable and all te classes accept instances of Elite.Animatable as input. So you can compose multiple Animatables one inside the other. Sequence into Parallel, Parallel into Conditional, etc... in this way you may obtain easily every animation behavior.
The downloadable archive contains a visual studio project with the animation.js library (also in debug version) and some sample code.
Download: Elite.Silverlight.Animation.zip (239KB)
Filed under: WPF, General Software Development, Silverlight, .NET