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.
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:
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:
Post a Comment