LA.NET [EN]

Apr 23

Improving your animations with the tookit animation framework – part II

Posted in ASP.NET MS AJAX      Comments Off on Improving your animations with the tookit animation framework – part II

Today we”re talking about the  FadeAnimation class. As I”ve said in the last post, the Animation class is abstract and is extended by several animations introduced by the toolkit. The FadeAnimation class is really simple: it lets you apply fade to an HTML control present on the page. The FadeEffect enumeration introduces 2 values which are used to give you a fade in (FadeIn) or a fade out (FadeOut) effect. As  you might expect, you can set all these properties (and the ones inherited from the base Animation class) through a constructor. Here”s a simple example which shows how to create a fade out effect over a div:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
  <head>
        <title>Untitled Page</title>
        <script type=”text/javascript” src=”MicrosoftAjax.debug.js”>
        </script> 
        <script type=”text/javascript” src=”timer.js”>
        </script>
<script type=”text/javascript”>
   var animation = null;
   function handleClick(){
        if( animation == null ){
             animation = new $AA.FadeAnimation( $get(“target”), //target of animation
                                   3, //duration in seconds
                                   25, //number of frames per second
                                   $AA.FadeEffect.FadeOut, //fade effect
                                   0, //minimum opacity
                                  1, //maximum opacity
                                  Sys.Browser.InternetExplorer == Sys.Browser.agent );//force layout: should be true in IE!
    }
    animation.play();
   }
   </script>
  </head>
 <body>
    <script type=”text/javascript” src=”common.js”>
    </script>
    <script type=”text/javascript” src=”animations.js”>
     </script>
     <div id=”target” style=”background-color: gray”>This is a simple div</div>
     <input type=”button” value=”start animation” onclick=”handleClick()” />
 </body>
</html>

After loading the dependencies correctly (don”t forget what I”ve said here about the client files of the toolkit!),  getting a fade out is easy: just create the animation and call its play method. As I”ve said in the last post, Animation is a component. That is why it”s a good idea to call the dispose method when you”re done with the animation (in this case, handling the unload event would be perfect to do that!). Since I”m talking about good practices and recommendations,you should also keep in mind that handling events with the onXXX attribute isn”t really a good thing: a better option would be to set it up in code,and since you”re already including the base AJAX file, you should use the event helpers to do that and get automatic browser  compatibility.

oh, another note: the $AA var is introduced by the tookit files and you can think of it as a  formnemonic AjaxControlToolkit.Animation namespace.

Besides this class, the toolkit animation framework adds 2 other fade classes: FadeInAnimation and FadeOutAnimation. As you can see (if you open the animations.js file), they”re only shortcuts to let you create fade in and fade out animations (though I”m not convinced if the extra lines needed for introducing these new classes is a good design call – think: adding $AA.FadeEffect.FadeOut to the constructor of the FadeAnimation class results in adding only a few chars; creating the classes add a few lines to the file…).

And that”s all for today. In the next post, I”ll continue presenting the toolkit aimation framework.