Apr 20

Improving your animations with the Toolkit animation framework – part I

Posted in ASP.NET MS AJAX      Comments Off on 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.

Besides these “traditional” properties (which already existed on the preview bits Animation class), the class adds a new interesting property: DynamicProperties. This property can be seen as a dictionary which lets you associate a javascript expression to an animation property. Why would you want to do that? well, the great thing about this dictionary is that all the expressions contained on it are executed before the animation is played (which is really useful when you want that one of the properties gets its value from some method or some object that exists in the page).

As you might expect, the class introduces some methods that let you play, pause and stop an animation. You start (or resume) an animation by calling the play method. Internally,this method will create a new Sys.Timer instance (if needed) used to increment the animated value of the target object and it”ll fire the start event. Then,the animation tries to run all the javascript expressions you”ve set on the DynamicProperties (note that this won”t happen after a pause, ie, the DynamicProperties will only be set if you”re calling play for the first time or if you”re calling it after the animation has stopped).

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.