How to Use AnimationExtender Control on ASP.NET Website

On By
Introduction :-  The AnimationExtender control allows you to utilize built-in animation Framework with existing web pages in a more declarative  way. This control allows you to add a broad set of fancy animation effects to your website. The animation plays when certan event occurs on the target control, such as OnClick, OnLoad, OnMouseOver and OnMouseout . we can implement and control a variety of animated actions using the built-in framework,such as fading ,resizing and moving a control. This control is more helpful in web development. If you are not installing AjaxToolKit then you can install it from Here. 
There are some important properties of AnimationExtender control as given below:-
  • TargetControlID:- It sets the ID of the control whose events are fired to create animation effects.
  • OnLoad :- It sets an event to play the animation when the page loaded.
  • OnClick  :- It sets an event to play when the target control is clicked.
  • OnHoverOver :- It sets an event to play when the mouse moves over the target control but it stops the animation created by the OnHoverOut property before it plays.
  • OnHoverOut :- It sets an event to play when the mouse moves away from the target control but it stops the animation created by the OnHoverOver property before it plays.
  • OnMouseOver :- It sets an event to play when the mouse moves over the target control.
  • OnMouseOut :- It sets an event to play when the mouse moves away from the target control.
There are some steps to implement this whole concepts as given below:-
Step 1:- First open your visual studio -->  File  --> New -->Website --> Select ASP.NET Empty website ---> OK ---> Open Solution Explorer --> Add a New Web Form (Default.aspx) --> Drag and Drop ToolkitScriptManager ,Image and Button Controls  On the page --> Create a Image folder in your project and paste some images in this folder as shown below:-

  Step 2:- Now Go properties of Image Control --> Set an image from image folder as shown below:-

  Step 3:- Now Open Source File --> Set TargetControlID="Image1" for image and Set TargetControlID="Button1"  for Button as shown below:-
Step 4:-  Here i have added more than one images ,the source codes for this application as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div style="height: 313px">
  <asp:Image ID="Image1" runat="server" Height="216px" 
            ImageUrl="~/image/new photo.jpg" />
  <asp:AnimationExtender ID="AnimationExtender2" runat="server" 
     TargetControlID="Image1">
   <Animations>
    <OnHoverOver>
     <FadeIn Duration=".2" Fps="20" />
    </OnHoverOver>
    <OnHoverOut>
     <FadeOut Duration=".5" Fps="30" />
    </OnHoverOut>
   </Animations>
  </asp:AnimationExtender>

  <asp:Image ID="Image2" runat="server" Height="216px" 
            ImageUrl="~/image/dta_photo.jpg" />
  <asp:AnimationExtender ID="Image2_AnimationExtender" runat="server" 
     TargetControlID="Image2">
   <Animations>
    <OnHoverOver>
     <FadeIn Duration=".2" Fps="20" />
    </OnHoverOver>
    <OnHoverOut>
     <FadeOut Duration=".5" Fps="30" />
    </OnHoverOut>
   </Animations>
  </asp:AnimationExtender>

  <asp:Image ID="Image3" runat="server" Height="216px" 
            ImageUrl="~/image/dv.JPG" />
  <asp:AnimationExtender ID="Image3_AnimationExtender" runat="server" 
     TargetControlID="Image3">
   <Animations>
    <OnHoverOver>
     <FadeIn Duration=".2" Fps="20" />
    </OnHoverOver>
    <OnHoverOut>
     <FadeOut Duration=".5" Fps="30" />
    </OnHoverOut>
   </Animations>
  </asp:AnimationExtender>

  <asp:Image ID="Image4" runat="server" Height="216px" 
            ImageUrl="~/image/img112.jpg" />
  <asp:AnimationExtender ID="Image4_AnimationExtender" runat="server" 
     TargetControlID="Image4">
   <Animations>
    <OnHoverOver>
     <FadeIn Duration=".2" Fps="20" />
    </OnHoverOver>
    <OnHoverOut>
     <FadeOut Duration=".5" Fps="30" />
    </OnHoverOut>
   </Animations>
  </asp:AnimationExtender>

        <br />
    <asp:Button ID="Button1" runat="server" Text="Proceed" Height="40px" Width="104px" 
            style="font-weight: 700" />
  <asp:AnimationExtender ID="AnimationExtender1" runat="server" 
    TargetControlID="Button1">
  <Animations>
  <OnMouseOver>
   <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" 
      Property="style" PropertyKey="color" />     
  </OnMouseOver>
  <OnMouseOut>
  <Color Duration=".2" EndValue="#FFFFFF" StartValue="#FF0000" 
     Property="style" PropertyKey="color" />                            
  </OnMouseOut>
  </Animations>
  </asp:AnimationExtender>
    </div>
    </form>
</body>
</html>
Step 5:- Now Run the Application (Press F5) --> You will see Following output as shown below:-

 Note :- You can understand this whole concepts by this above video easily.
For More ...
Download Whole Attached File
         Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.