In two previous articles here and here I did a fairly high-level description of JSON and why it's important in ASP.NET AJAX. Hopefully you either read those or you already have a fairly decent understanding of the topic. The point behind writing those posts was to give you the knowledge required to understand the internals of the Animation framework in ASP.NET AJAX. I'm going to begin the dive now, but before doing so actually give a brief overview of, exactly, what Animations are in ASP.NET AJAX. I'll attempt to answer the questions why are they important, and why should you - as a .NET developer - care.

What are Animations in ASP.NET AJAX?

Animations are not built-in to ASP.NET AJAX, they are an addition to it brought about by the ASP.NET control toolkit, an open-source project going on over here. What they provide is an easy-to-use method of adding fancy DHTML effects (such as call-out windows, flashing buttons, rotating objects, etc) to your page. You will find a feature such as this handy when you need to make a web-site that stands out above the rest and is a bit more interactive than, say, your typical web application. For example, you could make a window pop-out at the user when he/she clicks a button, like this:

What makes the ASP.NET Animation framework compelling, however, is not that you can do things as above (after all, you have been able to do shtick like this for years in JavaScript), but that all that's required  is a bit of XML markup in your ASPX page:

<ajaxToolkit:AnimationExtender id="MyExtender"
  runat="server" TargetControlID="MyPanel">
  <Animations>
    <OnClick>
      <FadeOut Duration=".5" Fps="20" />
    </OnClick>
  </Animations>
</ajaxToolkit:AnimationExtender>

...therein lies the cool factor.

Cool, how do I do it?

I'll show you, but I'll do it with a rather simple example first so that we don't spend a great deal of time (and space) with the inconsequential.

First, you create a new ASP.NET AJAX web application using Visual Studio 2005. I won't go into the details of doing this as you already know how to do this.

Second, you add a reference to the control toolkit's main assembly to your project (if you do not have this, then you can download it and all the supporting stuff from here).

Third, register the assembly and it's namespace in your ASPX page:

Fourth, slap a button on your ASPX page:

Fifth, flip over to the code view and add the following code:

...note two things: first, I added OnClientClick event handler to the button to prevent it fom posting back to the server; second, I added a block of XML markup as an AnimationExtender (the ajaxToolkit:AnimationExtender block). Also note how I assigned the TargetControlID property of the AnimationExtender to the Button I just added moments ago.

Now, if you F5 and run the application, you'll see that - when you click the button - the button text will turn red:

...and then fade out:

What else can Animations do?

Practically anything you want. It's a framework, mind you, so it's very extensible and maleable; but the nice folks that built the framework have supplied a great deal of pre-made animations for your consumption, and you can find the list here (which includes everything from fadeouts to movement).

After following through the list of pre-made animations, you can't help but get a bit excited about the kinds of things you can do. In the next section I'll explain the nature of Animations (the mindset you need when working with them), and then in the section after that I'll explain how they work (given that we now understand JSON).

....stay tuned.