Animation Extender Example - Ajax Control ToolKit

 

In this article I will illustrate how to use Animation Extender Control of Ajax Control ToolKit to generate animations in your page.

About:

We can use this extender to add some animation effects to the controls in the page. We can make the controls move around in the page using this control based on some events. The events against which we can program this animations are :

1)OnClick

2)OnMouseOver

3)OnMouseOut

4)OnHouseOver

5)OnHouseOut.

Step 1: Open New website and name it AnimationExtenderExample.

Step 2: As Animation Extender is Ajax Control , register AjaxControlTollkit in your solution by either using @register directive or adding the namespace in the web.config file.

Step 3: Add ScriptManager to the page as follows:

<ajaxToolkit:ToolkitScriptManager  ID="Sc1" runat="server"></ajaxToolkit:ToolkitScriptManager>

Step 4: Add a panel to the page. Add some controls to the panel on which animation needs to be applied.

<asp:Panel ID="AnimationPnl" runat="server" BackColor="#FFFF99" Height="50px" Width="200px">
        <asp:Label ID="lblText" runat="server" 
            Text="PAY ATTENTION TO THIS PANEL TO SEE ANIMATIONS EFFECTS" Font-Bold="True" 
            ForeColor="Red"></asp:Label>
    </asp:Panel>

Step 5: Create a target control on whose Click or MouseOver events Animation Extender is invoked. Here I will take a link button. we can use button also.

<asp:LinkButton ID="lnkClick" runat="server" Text="Click Me!!"></asp:LinkButton>

Step 6: Add Animation Extender Control of Ajax Control Toolkit

We can use AnimationExtender to generate various animations like fadeout , resize , change the color of control etc. In this article I will illustrate how to fadeout ,resize and change the color of panel on Click and MouseOver Events.

Resize Panel using AnimationExtender: (On MouseOver event of Link Button)

 <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager  ID="Sc1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <asp:Panel ID="AnimationPnl" runat="server" BackColor="#FFFF99" Height="250px" Width="400px" BorderWidth="2">
        <asp:Label ID="lblText" runat="server" 
            Text="PAY ATTENTION TO THIS PANEL TO SEE ANIMATIONS EFFECTS!!!" Font-Bold="True" 
            ForeColor="Red"></asp:Label>
    </asp:Panel>
    <br />
    <br />
    <asp:LinkButton ID="lnkClick" runat="server" Text="Get Mouse on Me!!"></asp:LinkButton>
    <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkClick"  >
    <Animations>
    <OnMouseOver>     
    <Resize AnimationTarget="AnimationPnl"  Width="200" Height="200" Unit="px" />  
    </OnMouseOver>  
    </Animations>
    </ajaxToolkit:AnimationExtender>    
     
     </div>
    </form>

FadeOut panel Using AnimationExtender: (On MouseOver event of Link Button)

 <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager  ID="Sc1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <asp:Panel ID="AnimationPnl" runat="server" BackColor="#FFFF99" Height="250px" Width="400px" BorderWidth="2">
        <asp:Label ID="lblText" runat="server" 
            Text="PAY ATTENTION TO THIS PANEL TO SEE ANIMATIONS EFFECTS!!!" Font-Bold="True" 
            ForeColor="Red"></asp:Label>
    </asp:Panel>
    <br />
    <br />
    <asp:LinkButton ID="lnkClick" runat="server" Text="Get Mouse on Me!!"></asp:LinkButton>
    <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="lnkClick"  >
    <Animations>
    <OnMouseOver>     
    <FadeOut  AnimationTarget="AnimationPnl"  Duration="2" Fps="20" />
    
    </OnMouseOver>  
    </Animations>
    </ajaxToolkit:AnimationExtender>    
     
     </div>
    </form>

Changing the color of Panel using AnimationExtender: (On Click Event of Link Button)

<form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager  ID="Sc1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <asp:Panel ID="AnimationPnl" runat="server" BackColor="#FFFF99" Height="250px" Width="400px" BorderWidth="2">
        <asp:Label ID="lblText" runat="server" 
            Text="PAY ATTENTION TO THIS PANEL TO SEE ANIMATIONS EFFECTS!!!" Font-Bold="True" 
            ForeColor="Red"></asp:Label>
    </asp:Panel>
    <br />
    <br />
    <asp:LinkButton ID="lnkClick" runat="server" Text="Click Me!!"></asp:LinkButton>
     <ajaxToolkit:AnimationExtender ID="AnEx1" runat="server" TargetControlID="lnkClick"  >
    <Animations>
     <OnClick>
             <Sequence>
             <Color 
                 AnimationTarget="AnimationPnl" 
                 Duration="3000" 
                 Property="style" 
                 PropertyKey="backgroundColor"
                 StartValue="#CE0E3F" 
                 EndValue="#FFFFFF" /> 
             </Sequence>
         </OnClick>
    </Animations>
    </ajaxToolkit:AnimationExtender>  
     
     </div>
    </form>