Home/Web Forms/Tutorials/Chapter 5. Ajax Control Toolkit/Animation/Picking One Animation Out Of a List

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)

By Christian Wenz, Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.

1. ← PreviousAnimation Depending On a Condition (C#)
2.  You're ViewingPicking One Animation Out Of a List (C#)
3. → NextAnimating in Response To User Interaction (C#)