Thursday, January 23, 2014

Ajax Animation Extender control

Are you thinking of decorating your website with some animation? Then there is one simple and useful control in AjaxControlToolkit named Animation extender which help you to give excellent animation to your pages.

You can apply animations to target control when some events likes, OnLoad, OnClick, OnMouseOver, or OnMouseOut raised. Here I am trying to explain how this Ajax Animation Control will work.

STEP : 1 Create a new webform

Create a new webform in ASP.NET. Drag and drop ToolScriptManager, Panel and a Animation Extender control.

animationextender

STEP 2 : Create a CSS class to the panel

Here I am using a panel for animation which is the target control. First I created a style sheet for the panel.

<style>
     .animationPanel
        {
        position : absolute;
        height : 250px;
        width: 300px;
        top: 100px;
        left: 400px;
        border-width: 2px;
        border-color:red;
        border-style:solid;
        }
        </style>

STEP 3 : Write animation properties

First I set animation property for the text inside the panel and then I set the animation for panel. Here I am doing the animation sequentially. I wrote the code on click event of the panel.

So the entire .aspx page looks like below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajaxanimation.aspx.cs" Inherits="Blog.Ajaxanimation" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AjaxAnimation</title>
    <style>
     .animationPanel
        {
        position : absolute;
        height : 250px;
        width: 300px;
        top: 100px;
        left: 400px;
        border-width: 2px;
        border-color:red;
        border-style:solid;
        }
        </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
         <asp:Panel ID="ajaxPanel" runat="server" CssClass="animationPanel">
                    Click me!!! I will move...<br><br><br>
             <div id ="info">
             Thanks for vising asheej.blogspot.com<br>
             You are reading the article related to AJAX animation extender
                 </div>
            </asp:Panel>
 
        <asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="ajaxPanel">
            <Animations>
                 <OnClick>
 
        <Sequence><%-- Sequance is used to do the animation sequantially --%> 
 
            <%-- Below code will help you to move the Panel --%> 
 
 
                      
            <Parallel AnimationTarget="info" Duration=".2">
                <Color PropertyKey="color"
                        StartValue="#0000CD" EndValue="#FF0000" />
                <Color PropertyKey="borderColor"
                        StartValue="#0000CD" EndValue="#FF0000" />
            </Parallel>
 
            <Parallel AnimationTarget="info" Duration=".2">
                <Color PropertyKey="color"
                        StartValue="#FF0000" EndValue="#666666" />
                <Color PropertyKey="borderColor"
                        StartValue="#FF0000" EndValue="#666666" />
            </Parallel>
 
                <Parallel AnimationTarget="flyout" Duration=".1" Fps="30">
                <Move Horizontal="200" Vertical="-75" />
                <Resize Height="300" Width="300" />
                <Color AnimationTarget="info" PropertyKey="backgroundColor"
                        StartValue="#ADFF2F" EndValue="#00FFFF" />
            </Parallel>
            
        </Sequence>
    </OnClick>
          
            </Animations>
        </asp:AnimationExtender>
 
    </div>
    </form>
</body>
</html>
 

STEP 4 : Build the solution and run the application

After running the code the result should be looks like this:

ajaxanimation

 

AnimationExtender Control properties:

  • TargetControlID : It is the ID of the control to which animation occurs.
  • OnLoad             : Set the animation when the page is loaded
  • OnClick             : Set the animation when the target control is clicked
  • OnMouseOver   : Set the animation when the mouse moves over the target control
  • OnMouseOut     : Set the animation when the mouse moves out the target control
  • OnHoverOver    : Set the animation when the mouse moves over the target control. But it stop the OnHoverOut  animation before it plays.
  • OnHoverOut      : Set the animation when the mouse moves out the target control. But it stop the OnHoverOver  animation before it plays.

No comments: