Animations in the XAML based world
I first really came to animations as part of UI (other than the odd animated GIF that we used to use to display file copy progress and so on) with the arrival into my world of WPF and then Silverlight.
In that world, you have the notion of a Storyboard which contains a bunch of animations. I once drew this diagram of it;
and so an animation transitions a property from some start value to some end value over some period of time using some easing function (including linear) and with some repeat behaviour. A Storyboard is then just a collection of those than be treated as a unit with, optionally, its own timings and repeat behaviour and so on.
The storyboard or the animations within it target a particular object and a particular property on that object that is to be animated.
These Storyboards can be coded against in order to start/stop them and to add event handlers in order to know when they start/stop and so on.
They can also be built into more complex, declarative groupings and be driven from triggers although the support for that is much richer in WPF than it is in Silverlight. You can “trigger” such that when the mouse is over element A then storyboard B should be run and so on.
This became the basis of state transitions as represented by the Visual State Manager in Silverlight (and latterly WPF) which codified the idea that a “piece” of UI typically has N states and a clever way of moving from one to another would be to define that transition as a set of Storyboards that need to be run to move states.
What that picture suggests is that you can animate double, color and point values but what it doesn’t say is that not every property in the whole system can be animated but, rather, there are specific properties ( dependency properties ) on particular elements that open themselves up to animation. Most relevant properties supported animation so that rarely proved problematic.
Animations in the CSS(3) based world
More recently, I’ve been looking at how CSS handles animations (and transitions) and there’s a couple of great articles from colleagues of mine that walk through this really well so I thought I’d highlight them here;
What I find “comforting” is that the very same principles from the XAML world are there (not surprisingly given that animations are animations whatever technology you’re dealing with);
- animate from property value on some element from some start point to some end point
- animate over a period of time
- apply an easing function or just be linear
- provide some initial delay
- handle some events to know when things start/stop
- particular types of properties can be animated (number, color, etc)
- particular properties on particular elements can be animated
and so it’s different but feels very familiar – I’d definitely recommend taking a look at the articles that David and David have written up as they do a great job of explaining things to the newcomer.
Mike Taulty 