Picking One Animation Out Of a List (C#)
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:
[!code-aspxMain]
1: <asp:ScriptManager ID="asm" runat="server" />
The animation will be applied to a panel of text which looks like this:
[!code-aspxMain]
1: <asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
2: ASP.NET AJAX is a free framework for quickly creating a new generation of more
3: efficient, more interactive and highly-personalized Web experiences that work
4: across all the most popular browsers.<br />
5: ASP.NET AJAX is a free framework for quickly creating a new generation of more
6: efficient, more interactive and highly-personalized Web experiences that work
7: across all the most popular browsers.<br />
8: ASP.NET AJAX is a free framework for quickly creating a new generation of more
9: efficient, more interactive and highly-personalized Web experiences that work
10: across all the most popular browsers.<br />
11: </asp:Panel>
In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:
[!code-cssMain]
1: <style type="text/css">
2: .panelClass {background-color: lime; width: 300px;}
3: </style>
Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":
[!code-aspxMain]
1: <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:
[!code-aspxMain]
1: <ajaxToolkit:AnimationExtender ID="ae" runat="server"
2: TargetControlID="Panel1">
3: <Animations>
4: <OnLoad>
5: <Case SelectScript="Math.floor(3 * Math.random())">
6: <Resize Width="1000" Unit="px" />
7: <Resize Height="150" Unit="px" />
8: <FadeOut Duration="1.5" Fps="24" />
9: </Case>
10: </OnLoad>
11: </Animations>
12: </ajaxToolkit:AnimationExtender>
One of the possible three animations: The panel gets wider (Click to view full-size image)
)
|
|