Animation Extender

How to use Animation Extender in Asp.net Ajax:

The AnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.
To implement this concept you need to follow the below steps :

 

Step1:
Create a new Asp.net website in Visual Studio and write the following Source code in the design part of the Default.aspx page.

 

AnimationExtender.aspx (Source Code)  :
<head runat=”server”>
    <title></title>
    <style>
    .flyOutDiv
{
     display: none;
     position: absolute;
     width: 400px;
     z-index: 3;
     font-size: 14px;
     border: solid 1px #CCCCCC;
     background-color: #FFFFFF;
     padding: 5px;
}
.flyOutDivCloseX
{
 background-color: #666666;
 color: #FFFFFF;
 text-align: center;
 font-weight: bold;
 text-decoration: none;
 border: outset thin #FFFFFF;
 padding: 5px;
}
</style>
</head>
<body>
    <form id=”form1″ runat=”server”>
        `<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
    <div>
        <asp:LinkButton ID=”lnkBtnColHelp” runat=”server” Text=”Click Here” OnClientClick=”return false;” />
    <div id=”moveMe” class=”flyOutDiv”>
    <div style=”float:right;”>
     <asp:LinkButton ID=”lnkBtnCloseColHelp” runat=”server” Text=”X”  CssClass=”flyOutDivCloseX” />
    </div>
     <p>
        Microsoft Silverlight is an application framework for writing and running rich Internet applications, with features and
        purposes similar to those of Adobe Flash.current versions support multimedia, graphics and animation, and give developers
        support for CLI languages and development tools. Silverlight is also one of the two application development platforms for Windows Phone.
 </p>
 </div>
 </div>
 <div>
        <asp:AnimationExtender ID=”AnimationExtender1″ runat=”server”
                              TargetControlID=”lnkBtnColHelp”>
    <Animations>
     <OnClick>
      <Sequence>
        <EnableAction Enabled=”false”></EnableAction>
        <StyleAction AnimationTarget=”moveMe” Attribute=”display” Value=”block”/>
         <Parallel AnimationTarget=”moveMe” Duration=”.5″ Fps=”30″>
         <Move Horizontal=”200″ Vertical=”50″></Move>
             <FadeIn Duration=”.5″/>
             </Parallel>
              <Parallel AnimationTarget=”moveMe” Duration=”.5″>
              <Color PropertyKey=”color” StartValue=”#666666″ EndValue=”#FF0000″ />
              <Color PropertyKey=”borderColor” StartValue=”#666666″ EndValue=”#FF0000″ />
             </Parallel>
            </Sequence>
             </OnClick>
            </Animations>
        </asp:AnimationExtender>
    </div>
    <div>
        <asp:AnimationExtender ID=”AnimationExtender2″ runat=”server”
            TargetControlID=”lnkBtnCloseColHelp”>
            <Animations>
            <OnClick>
              <Sequence AnimationTarget=”moveMe”>
               <Parallel AnimationTarget=”moveMe” Duration=”.7″ Fps=”20″>
               <Move Horizontal=”200″ Vertical=”50″></Move>
               <Scale ScaleFactor=”0.05″ FontUnit=”px” />
              <Color PropertyKey=”color” StartValue=”#FF0000″ EndValue=”#666666″ />
              <Color PropertyKey=”borderColor” StartValue=”#FF0000″ EndValue=”#666666″ />
                     <FadeOut />
                        </Parallel>
                        <StyleAction Attribute=”display” Value=”none”/>
                        <StyleAction Attribute=”height” Value=””/>
                        <StyleAction Attribute=”width” Value=”200px”/>
                        <StyleAction Attribute=”fontSize” Value=”10px”/>
                        <EnableAction AnimationTarget=”lnkBtnColHelp” Enabled=”true” />
                    </Sequence>
                </OnClick>
            </Animations>
        </asp:AnimationExtender>
    </div>
    </form>
</body>
</html>
Step4:
Now build the Solution and Debug it for the output.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s