ASP.NET Ajax

ASP.NET Ajax Tutorial Lesson 9: Animation

The ASP.NET Ajax framework comes with extensive support for visual effects, or ‘animations’.

There are four basic visual effects that can be applied to an object:

- Fading in and out
- Transitioning between colours
- Moving position
- Resizing

These visual effects can be applied simultaneously, and sequentially, leading to a broad range of different effects. There are a number of different animation classes which involve these visual effects, such as ‘Pulse’ (the object gets repeatedly bigger and smaller) and FadeIn (the object appears).

The general way to apply such animations to a DOM object is to create an AnimationExtender control extender and specify its TargetControlID as the DOM object’s ID. To make things easier, we don’t need to programmatically create a class that inherits from AnimationExtender. Instead we can simply specify the required animations, and the events that kick them off, via declarative XML.

The following code is a simple example of a single animation effect.

1.	<asp:Panel id="animationLabel" Text="Hello World" runat="server" borderwidth="1" bordercolor="black">
2.	Hello World
3.	</asp:Panel>
4.	<toolkit:AnimationExtender BehaviorID="MyAnimationExtender" id="MyAnimationExtender" runat="server" TargetControlID="animationLabel">
5.	<Animations>
6.	<OnClick>
7.	<FadeOut Duration="1" Fps="20" />
8.	</OnClick >
9.	</Animations>
10.	</toolkit:AnimationExtender>

When the user clicks anywhere within the panel, the contents fade to clear over the duration of a second. The AnimationExtender can also respond to the following events: OnMouseOver, OnMouseOut, OnHoverOver, OnHoverOut (I’m not sure what the difference is between the Mouse events and the Hover events…), and OnLoad.

The following example shows a slightly more complicated animation, in which the targeted panel shrinks down to a central point whilst fading out. The two animations run simultaneously because they are made children of the ‘Parallel’ animation, which is an example of a merely ‘logical’ animation element.

1.	<asp:Panel id="animationLabel" style="position:absolute" Text="Hello World" runat="server" borderwidth="1" bordercolor="black">
2.	Hello World
3.	</asp:Panel>
4.	<toolkit:AnimationExtender BehaviorID="MyAnimationExtender" id="MyAnimationExtender" runat="server" TargetControlID="animationLabel">
5.	<Animations>
6.	<OnClick>
7.	<Parallel Duration="1" Fps="20">
8.	<FadeOut />
9.	<Scale center="true" scaleFactor="0" scaleFont="true" />
10.	</Parallel>
11.	</OnClick >
12.	</Animations>
13.	</toolkit:AnimationExtender>

(Note that to make this work as intended I had to place a non-breaking space between the words in the panel, and also set the position of the panel to ‘absolute’. It seems common to have to make such adjustments to the targets of animations in order to make them play well.)

In the above we used the ‘Parallel’ animation. There are various other logical animations, such as Sequence and Condition, which can be used to create complex combinations of effect. There are also ‘Action’ animations, which are used to perform single operations immediately. These includes the ‘Style’ animation, which is used to set a style property, and ‘Script’, which runs a piece of code.