10.1. Working with the Animation Control
The AnimationExtender control is part of the ASP.NET AJAX Toolkit. It is important to think of it as complete framework that can be used in your application to provide the fluidity that you are looking for rather than as simply another server control.
Using animations enables you to transition from one state to another. For instance, you can transition something on the page from one location to another. Animations aren't restricted to positioning elements, you can also use them to change other aspects of a control or series of controls in some sort of transition. For instance, you can slowly change the color of text, or fade things in and out. There is quite a bit that DHTML can do.
You can also initiate transitions based on an end user action (such as a button click). There are specific events that you can program your animations against. These events are as follows:
For an example of this, let's work through a simple example of applying an animation to a Label control.
10.1.1. Animating a Single Control
In this example, a single animation is applied to a single control on the page. To work along, create a page that contains a TextBox, a Button, and a Label control. An example of this layout is presented in Figure 10-1.
Figure 10-1. Figure 10-1
The code of the page for this example is presented in Listing 10-1.
Example 10-1. Changing the size of the Label control
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello " + TextBox1.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Growing Label</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit your name"OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<br /><br />
<cc1:AnimationExtender ID="Label1_AnimationExtender" runat="server"
Enabled="True"
TargetControlID="Label1">
<Animations>
<OnLoad>
<Sequence>
<Scale ScaleFactor="4" Unit="px" ScaleFont="true" FontUnit="pt"
Duration="2.5" Fps="50" ></Scale>
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender>
</div>
</form>
</body>
</html> |
After you load this page into the browser, enter your name in the text box and click the Submit button on the page. The name you entered will be utilized in the Label control, and the text of the Label control will grow four times in size until you get something similar to what is presented in Figure 10-2 (obviously the name will be different).
Figure 10-2. Figure 10-2
I can honestly say that the image shown in Figure 10-2 doesn't do this example justice, as you can't see the animation occur. The page presented in this figure is the last stage of the image after the text has fully grown. When the page is loaded, the value of the Label control's Text property is applied the animation through the use of the AnimationExtender control on the page.
When you add an AnimationExtender control to your page, you are have to wire the control to the control that will have the animation applied to it. In the case of the example from Listing 10-1, the AnimationExtender control is wired to the Label control on the page, using the TargetControlID property.
<cc1:AnimationExtender ID="Label1_AnimationExtender" runat="server"
Enabled="True"
TargetControlID="Label1">
<! -- Code removed for clarity -- >
</cc1:AnimationExtender>As stated earlier, you can then provide the animation using such events as OnClick, OnHoverOver, OnHoverOut, OnLoad, OnMouseOver, and OnMouseOut. This example makes use of the OnLoad event, through the use of the <OnLoad> element within the <Animations> element.
<cc1:AnimationExtender ID="Label1_AnimationExtender" runat="server"
Enabled="True"
TargetControlID="Label1">
<Animations>
<OnLoad>
<! -- Code removed for clarity -- >
</OnLoad>
</Animations>
</cc1:AnimationExtender>Animations that you perform can run sequentially or in parallel. In this case, since there is only a single animation, it really doesn't matter which method you use.. For this example, the sequential approach is taken with the use of the <Sequence> element within the AnimationExtender control.
<cc1:AnimationExtender ID="Label1_AnimationExtender" runat="server"
Enabled="True"
TargetControlID="Label1">
<Animations>
<OnLoad>
<Sequence>
<Scale ScaleFactor="4" Unit="px" ScaleFont="true" FontUnit="pt"
Duration="2.5" Fps="50" ></Scale>
</Sequence>
</OnLoad>
</Animations>
</cc1:AnimationExtender>In this case, there is a single transition in place <Scale> that will change the size of what you are working with. For this example, the font of the text within the Label control is increased by using the ScaleFactor property (setting it to a value of 4) in conjunction with other properties available to the <Scale> element.
10.1.2. Animation Events
Now that the first example of using an animation is done, let's turn our attention to the events that can be utilized within your pages. Here is a brief description of each of the available events:
OnClick — Initiated when the end user clicks on the element to start the animation.
OnHoverOver — Initiated when the end user hovers over the element with the mouse.
OnHoverOut — When an end user hovers over an element, the OnHoverOver event is triggered. When the end user moves the mouse off the element, the OnHoverOut event is triggered.
OnLoad — Initiated when the control is loaded onto the page.
OnMouseOver — This is similar to the OnHoverOver trigger in that it initiates the animation when the mouse is hovered over an element.
OnMouseOut — This is also very similar to the OnHoverOut trigger in that it will initiate the animation when the mouse is hovered off the element.
10.1.3. Animation Actions
In Listing 10-1, you were able to see the <Scale> element used as an animation to scale the size of the text from the Label1 server control that was contained on the page. There are other types of animations besides the <Scale> type as defined in the previous example. The following list defines the animation actions that you can make use of in your code:
<Fade> — Provides the ability to fade an element in or out of the page.
<FadeIn> — Provides the ability to fade an element into the page.
<FadeOut> — Provides the ability to fade an element out of the page.
<Pulse> — Provides the ability to fade an element in and out in a pulsating fashion.
<Color> — Provides the ability to transition the color of a element from one place in the color spectrum to another.
<Move> — Provides the ability to move an element on the page.
<Resize> — Provides the ability to resize an element from one size to another.
<Scale> — Provides the ability to scale an element on a specific scale factor (presented earlier in Listing 10-1).
10.1.4. Animation Methods
Earlier you saw a demonstration of how to run an animation with the <Sequence> element. You really see the value of this element when running more than a single animation. Running two or more animations with the <Sequence> element would cause the ASP.NET AJAX animation framework to run the animations in a sequential fashion (one after the other, in the order in which they are defined). In addition to the <Sequence> element, here is a list of the available animation methods at your disposal:
<Case> — Provides the ability to apply animations based upon a specific circumstance. You will find that this is quite similar to how a Visual Basic Select or a C# switch statement works.
<Condition> — Provides the ability to apply an animation based upon a specific condition being present.
<Parallel> — Provides the ability to run a group of animations in a parallel fashion.
<Sequence> — Provides the ability to run a group of animations in a sequential fashion.
It is important to understand how these methods work with the animations on the page when working with the <Sequence> and <Parallel> options. The <Sequence> option allows you to define animations in a sequential flow, meaning that the second animation will not start until the previous animation has completed. When you use <Sequence>, each animation waits to take its turn. This workflow is presented here in Figure 10-3.
Figure 10-3. Figure 10-3
When you use the <Parallel> element instead of the <Sequence> element, items run as a group all at the same time. This approach is illustrated in Figure 10-4.
Figure 10-4. Figure 10-4
