Improving your animations with the Toolkit animation framework - part I
The Ajax Control Toolkit introduces several classes and helpers which makes adding animations to an object really easy. Today I'm starting a new serious of posts where I'll describe the main client classes introduced by the toolkits. If you already know the client classes introduced by the preview bits, you'll be pleased to know that the animation framework presented in the toolkit are (really!) much much better than those found in the preview bits. Besides the animation classes, the framework introduces some utility methods and some behaviors.
Today I'm talking about the base (and abstract) Animation class which can be found on the AjaxControlToolkit.Animation namespace. This is the ultimate base class from which all the other animations must inherit (as a side note, keep in mind that animations are components, ie, they inherit from the Component class defined by the AJAX client library). Currently, the Animation class exposes several properties which let you:
- set the length of the animation in seconds (duration property);
- define the number of steps per second (fps property);
- identify the HTML control you're animating (target property. If you're using an ID, then you need to use the animationTarget property - which is a write only property);
- check if the animation is playing (isPlaying) or if it's active (isActive);
- get the current completed percentage of the animation.
Before returning, the play method sets the interval of the timer (which takes into account the fps property to determine the interval used for firing the timer's tick event) and updates the completed percentage of the animation. When a tick occurs, the animation calls the onStep method, passing it the current completed percentage of the animation. Internaly, the method simply calls 2 methods (which are abstract and should be overriden by all the derived animations): setValue and getAnimatedValue.
getAnimatedValue should return the "current" state of the animation based on the completed percentage (as you'll see in the next posts, this value depends on the type of animation you're using). setValue is responsible for receiving the value returned by the getAnimatedValue and applying it correctly to the target of the animation. If you're thinking about creating your own animations, you must override these methods.
Pausing the animation is accomplished through the pause method: it simply disables the timer and raises the propertyChanged event. Stopping a running animation envolves killing the timer (ie, calling its dispose method), setting the completed percentage to 100 and firing the end event.
Besides these "public methods", the class also contains some utility methods. For instance, the interpolate method calculates the appropriate value between a starting and ending values, taking the current percentage into account.
And that's all for today. I do really think that getting these basic aspects is essential for understanding how animations work. Cya in the next post.