Picking One Animation Out Of a List (C#)

by Christian Wenz

Download PDF

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. The framework also allows the programmer to pick one animation out of a list of animations, depending on the evaluation of some JavaScript code.

Overview

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. The framework also allows the programmer to pick one animation out of a list of animations, depending on the evaluation of some JavaScript code.

Steps

First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

The animation will be applied to a panel of text which looks like this:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

<style type="text/css">    
 .panelClass {background-color: lime; width: 300px;}
</style>

Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

Within the <Animations> node, use <OnLoad> to run the animations once the page has been fully loaded. Instead of one of the regular animations, the <Case> element comes into play. The value of its SelectScript attribute is evaluated; the return value must be numerical. Depending on this number, one of the subanimations within <Case> is executed. For instance, if SelectScript evaluates to 2, the Control Toolkit runs the third animation within <Case> (counting starts at 0).

The following markup defines three subanimations: Resizing the width, resizing the height, and fading out. The JavaScript code (Math.floor(3 * Math.random())) then picks a number between 0 and 2, so that one of the three animations is run:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

One of the possible three animations: The panel gets wider (Click to view full-size image)