With Great Power comes Great Response.write("Ability") : Animation

Happy Birthday to Me !!!

PhaniRajuYN — Mon, 17 Sep 2007 18:47:43 GMT

Hello all ,

Today I grow a year older , I am now all of 26 !!!

As return gifts to everyone, I am giving out a demo application that encompasses most of my knowledge about the AjaxControlToolkit Animation Extender.

Here is a list of the Animations that are demo'd .

Basic Animations

Fade
ReSize
Length
Color
Pulse
Discrete
Scale
Move
Case
Condition
Sequence
Parallel

Actions

Enable Action
Script Action
Hide Action
Opacity Action
Style Action

Advanced

Scripting Animations
Client-Side DataBinding
Experiment #1
Experiment #2 ( Plot a Path and Follow it )
Reuse AnimationExtender

Triggers

OnLoad
OnHoverOver/Out

Some Screenshots

The Main Menu

In each demo of each animation type , you get :

a Demo of the animation

2. The Source Code for implementing the animation

3. Reference towards further explanation of the animation type

How do I download this ?

Click here :

What do I need to be pre-installed ?

The ASP.NET Ajax Extensions

IIS Web Server

How do I set this up ?

Follow the steps mentioned here : Instructions to Setup a Virtual Directory in IIS

Which browser does this work in ?

The animations themselves work in all browsers that are officially supported.

For the Tabs look that is present on each page is my own implementation using JavaScript that works only in IE ( I use DIVS :-) ).

In case you see that you cant navigate in between the tabs on the demo pages , fire up visual Studio 2005 and you should be able to see

the source code right there.

So , Download it and go crazy !!!

How to : Re-use Animation Extenders in a page

PhaniRajuYN — Wed, 15 Aug 2007 19:11:32 GMT

Download Sample Code :

while working with the AnimationExtender on an ASPX Page ,One would run into a scenario wherein you would need to associate the same animation with multiple Elements on the page.

Some Examples are :

Associate an Animation with the rows of a GridView.
Associate an Animation with probably multiple panels on the same page.

Today , we will discuss how to re-use a single AnimationExtender in a few possible Scenarios.

a) Trigger the same Animation From Different Controls

This section will address the scenario wherein you would have an animation which is defined to animate a specific element.

And you would want different Elements on the Page to trigger the same animation on the element.

Here , we would be simulating a scenario wherein one would probably want to assign Multiple TargetControlIDs to an animation.

The TargetControlID Specifies the control that Kicks-off the animation.

If an AnimationTarget is not Specified , then it is the control which will be animated.

We will have the Following Elements :

a) A button to trigger the animation :

 <!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" OnClientClick="return false;" />

b) A Div/ASP:Panel which will be animated onClick of the Button

 <!-- The Panel which will be animated-->
<asp:Panel runat="server" ID="pnlAnimated" Style="position: absolute; top: 100px;
            left: 50px; height: 200px; width: 150px; background-color: #99ccff;">
</asp:Panel>

The Animation Markup will be as shown below :

<!-- The Markup for the animation Extender-->
<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

The Div pnlAnimated will resize to height and width 400 and back to 380 and then 400 again to provide an Easing effect .

Let's Say that you need to trigger the same animation by clicking on another button and you would want to do this without having to create a New AnimationExtender on the same page.

<!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" />

a.1) Client Side :

Step 1 : Assign a BehaviorID to the AnimationExtender if not already present.
BehaviorID ="animateMe"
Step 2: Assign an OnClientClick function to the btnAnimateTriggerTwo button .
OnClientClick="ChangeAnimationTarget();return false;"
Step 3: The Function ChangeAnimationTarget() which will trigger the animation to be played.
<script language ="javascript" type ="text/javascript">
   function ChangeAnimationTarget() {
       $find("animateMe").get_OnClickBehavior().play();
    }
 </script>
This will cause the animation already defined on the TargetControl of btnAnimateTriggerOne to be played onclick of the 
button btnAnimateTriggerTwo.
In a similar way you can add any number of triggers to the same AnimationExtender.

a.2) Server Side :

Step 1: Put the Above Controls inside the ContentTemplate of an UpdatePanel .

Step 2: On the Server-Side you can switch the TargetControl by running the following code.
private void ChangeAnimationTarget()
    {
        AnimationExtender1.TargetControlID = btnAnimateTriggerTwo.ID;
        btnAnimateTriggerTwo.OnClientClick = "return false;";
    }
  Step 3: Now , the TargetControlId has changed and upon clicking on the button btnAnimateTriggerTwo, the animation will run.
  In this case , you would have to switch the AnimationTarget BEFORE you want the animation to run.

b)
Modify the AnimationTarget on which you want the animation to run

let's consider a scenario in which you would want the same Animation to run on 2 or more different Elements.

For the sake of simplicity , lets consider that you would want to run the above ResizeAnimation on

another asp:Panel by the name of pnlAnimatedToo  and you want to do this without having to create another AnimationExtender on the same page.

b.1) Client Side :

Step 1 : You will have to change the markup of the AnimationExtender to look like this :
 Change the AnimationTarget Attribute to be AnimationTargetScript ="getAnimationTarget();".
This will cause the function getAnimationTarget() to be called whenever the AnimationExtender runs.
and getAnimationTarget() will return the ID of the Control that should be animated.
<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>
Step 2 : Assign the Following function as OnClientClick handler of the Button btnAnimateTriggerOne.
OnClientClick="setAnimationTarget();return false;"
The Function setAnimationTarget sets the ID of the AnimationTarget for the AnimationExtender.
Step 3: The Definition of the functions getAnimationTarget() and setAnimationTarget().
<script language ="javascript" type ="text/javascript">
 var currentAnimationTarget ="pnlAnimated";
            
function getAnimationTarget() {
    return currentAnimationTarget;
}
function setAnimationTarget() {
  currentAnimationTarget = currentAnimationTarget === "pnlAnimated" ? "pnlAnimatedToo":"pnlAnimated";
}
</script>
In this example, the animationTarget will alternate between pnlAnimated and pnlAnimatedToo.

You can implement your own logic into the above functions for your implementation.

c) Combination of a) and b) , i.e you would want to use the same animationExtender to trigger the same animations on different elements onClick of two different Buttons.

Multiple TargetControlIDs and Multiple AnimationTargets.

For instance , in the above example , if you would want to

Animate pnlAnimated onClick of btnAnimateTriggerOne

and

Animate pnlAnimatedToo onClick of btnAnimateTriggerTwo.

And you would want to do all of this Without creating a new AnimationExtender on the same page.

Step 1: Assign the OnClientClick of the Two buttons to be as below :

<!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" 
OnClientClick="setAnimationTargetValue('pnlAnimated');return false;" />
        
<!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" 
OnClientClick="setAnimationTargetValue('pnlAnimatedToo');SwitchTargetControl();return false;" />

Step 2: Change the Markup of the AnimationExtender to replace AnimationTarget to be AnimationTargetScript.

<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

Step 3: The Definition for the JavaScript Functions.

<script language ="javascript" type ="text/javascript">
            function SwitchTargetControl() {
                $find("animateMe").get_OnClickBehavior().play();
            }
            
            var currentAnimationTarget ="pnlAnimated";
            
            function getAnimationTarget() {
                return currentAnimationTarget;
            }
            
            function setAnimationTargetValue( value ) {
                currentAnimationTarget  = value;
            }
</script>

Scripting Animations from the Ms Ajax AnimationExtender

PhaniRajuYN — Fri, 01 Jun 2007 00:54:38 GMT

An ignored / unknown / very useful feature of the animation Framework is that it allows you to control the animation as its playing.

You can Play, Pause , Resume , Stop and Quit an Animation Instance by using appropriate methods in JavaScript.

Setting up the Animation

The Animation we will be playing is a Length Animation on a DIV element with ID "divMovable".

The DIV will Increase in length from 200 px to 550px over a duration of 1.5 Seconds OnClick of the DIV.

Markup For Div

<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

Markup for the Animation Extender

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
                        runat="server" TargetControlID="divMovable">
      <Animations>
             <OnClick>
                     <Length duration="1.5" fps="40" 
                            Property="style"  PropertyKey="height" 
                            StartValue="200"  EndValue="550" 
                            unit="px" AnimationTarget="divMovable" />
              </OnClick>
         </Animations>
</ajaxToolkit:AnimationExtender>

Notice that the AnimationExtender has the BehaviorID assigned to be "controlledAnimation".

We will be accessing the Control Methods using this BehaviorID.

Playing An Animation

You can trigger an animation to start playing by calling the play method on the Animation Extender Behavior .

function playAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.play();
        }

Pausing An Animation

You can Pause an animation by calling the pause method on the Animation Extender Behavior .

function pauseAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.pause();
        }

Resuming a Paused Animation

You can Resume a Paused Animation by calling its play Method again :) .

Stopping A Playing Animation

You can Stop a playing animation by calling the stop method on the Animation Extender Behavior .

function stopAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.stop();
        }

Quitting A Playing Animation

You can quit playing an animation by calling the quit method on the Animation Extender Behavior .

function quitAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.quit();
        }

What's the Difference between Stop and Quit ?

Copied Text from the Remarks section of the Quit Function from AnimationBehavior.JS

"Quit differs from the stop function which will update the final state.  The
quit function is most useful for scenarios where you're toggling back and forth
between two animations , like those used in OnHoverOver or OnHoverOut, and
 you don't want to completely finish one animation if its counterpart is triggered"

Complete Sample

<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="AjaxControlToolkit, Version=1.0.10123.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<head id="Head1" runat="server">
    <title>Controlling Animation With JavaScript</title>
<script language="javascript">
        var onclkBehavior ;
        function pageLoad()
        {
            onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
        }
        function playAnimation() {
            
            onclkBehavior.play();
            $get("lblCurrentStatus").innerText="Playing..";
        }
        function pauseAnimation()
        {
        
           onclkBehavior.pause();
           $get("lblCurrentStatus").innerText="Paused..";
        }
        function stopAnimation() {
            onclkBehavior.stop();
            $get("lblCurrentStatus").innerText="Stopped..";
        }
        function quitAnimation()
        {
            $find("controlledAnimation").get_OnClickBehavior().quit();
            $get("lblCurrentStatus").innerText="Quit..";
        }
    </script>
</head>
<body>
    <form id="frmScripting" runat="server">

<input type="button" class="purpleButtonClass" onclick="playAnimation()" id="btnPlayAnimation"
                           value="Play" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="pauseAnimation()" id="btnPauseAnimation"
                           value="Pause" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="stopAnimation()" id="btnStopAnimation"
                           value="Stop" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="quitAnimation()" id="btnQuitAnimation"
                           value="Quit" /><br /><br />
<span id="lblCurrentStatus"></span>


<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
    runat="server" TargetControlID="divMovable">
    <Animations>
        <OnClick>
            <Length duration="1.5" fps="40" 
                    Property="style"  PropertyKey="height" 
                    StartValue="200"  EndValue="550" 
                    unit="px" AnimationTarget="divMovable" />
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
</form>
</body>
</html>

Hope this helps someone out there!

Some Useful Links from the ASP.NET Ajax Forums

PhaniRajuYN — Thu, 10 May 2007 23:50:39 GMT

Hi ,

Over the past couple of months, I have been actively contributing to the Asp.net Ajax forums and have come across some very

weird and challenging problems to solve.Anyone who's been at the forums can tell, the community is VERY Active and helpful when it comes to helping

out your fellow developer . Below is a list of some FAQs that I often encountered and was able to address on the Forums .

Helping someone out with a brain-bender they are stuck on and seeing the issue resolved after some brainstorming is VERY satisfying.

Why am I doing this ?

There is a lot of content on the Forums and I wanna share what I learnt and was able to share with my fellow devs.

Also, I could have blogged about this but felt that its better to point you guys to the place where we learnt about this .

You might find some content duplicated from my Blog , as far as possible I have tried to avoid that and give you guys the unique ones that I have seen.

As time goes by , I will be putting up another list of issues that I helped on ,

these are the unique ( sort-of ) ones that I could find out of all the ones that I answered .

If you are not a part of the Forums , get yourself an account and start helping out !

Hope this helps someone out there !

MS AJAX AnimationExtender : How Many Ways Do I Play thee ? ( Updated )

PhaniRajuYN — Fri, 13 Apr 2007 17:23:04 GMT

We will discuss the various ways in which one can animate a visual element using the MS AJAX Animation.

The Example would be to resize a div named "queryReply" to have a height of 100px and width of 200px On Click of the Div .

1) The Simplest Way , Markup

<ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" 
        TargetControlID="queryReply" BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                       <Resize Height="100" FPS="25" Width="200" duration="0.3" unit="px"/>
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

This would be the easiest way to attach an animation ( ReSize ) to a control ( QueryReply ) on an Event ( OnClick ) .

When the Div is clicked , the Control "queryReply" is resized to have a height of 100 px and a width of 200px.

2) The "Not So Simple" Ways via javascript

a) Call the Static PLAY Method of the Animation Framework to Animate the Control .

//Play the Animation by calling its static methods
AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px" );
The Animation will play immediately after this line.

b) Create an Instance of the Client-Side Animation Extenders to Animate the Control .

//Create an instance of the ReSize Animation
var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px");
//Play the Animation just created
resizeAnimation.play(); 
c) Selectively playing the Animation Already defined in Markup for an AnimationExtender on the Page.

Lets say that you already have animation defined on your page in markup and you want to trigger the animation using Script .

You achieve this by :

1) Get a handle to the AnimationExtender's Behavior by using the "$find" method.
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
2) Based on where the animation is defined ( Onload , OnClick , OnHover , whatever ), get a handle to the child Animation Definition.
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();
//Get the Animation to be played onLoad of the TargetControl 
var onLoadAnimation     = behaveYourself.get_OnLoadBehavior();
//Get the Animation to be played onHover of the TargetControl 
var onHoverAnimation     = behaveYourself.get_OnHoverBehavior();
3) Call the "Play" method on the required Animations Definition.
//Play the Animation defined  onClick of the TargetControl 
onClickAnimation.play();
//Play the Animation defined  onLoad of the TargetControl 
onLoadAnimation.play();
//Play the Animation defined  onHover of the TargetControl 
onHoverAnimation.play();
d) Set the JSON String for an existing Animation Extender

Once you declare the Markup as above, you can access the animations that are assigned to the Extender by using the "get_<Event>" Methods on the Behavior .

EX:
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();

Once you have the respective Animation Behavior , you can use the "set_<EVENT>" method to set the Animation JSON String .
The Json String is constucted like this :
"{
     "AnimationName":"ReSize",
     "Height":"100px",
     "width":"200px",   
     "unit":"px",
     "duration":"0.3",
     "AnimationTarget":"queryReply",
     "AnimationChildren":[]
 }"
The AnimationName is the Name of the Animation that you want run .
The AnimationChildren is supposed to be an array of child animations .
The ReSize animation cannot have Child Animations, so the array is empty.
So, once you have the JSON String, we use the "Set_<Event>" function to set the JSON property of the animation.
//Construct the JSON String
var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
"\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
"\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
//Set the JSON of the AnimationExtender to be the JSON String
behaveYourself.set_OnClick( jsonAnimationString );
//Play the Animation
onClickAnimation.play();

Complete Example :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ways to Call Animations</title>
</head>
<body>
    <form id="frmAnimations" runat="server">

        <script language="javascript">
        
            function callStaticMethods(){
            //Play the Animation by calling its static methods
            AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px" );
            }
            
            function createInstanceAndPlay(){
            //Create an instance of the ReSize Animation
            var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px");
            //Play the Animation just created
            resizeAnimation.play(); 
            }
            
            function SetJSONStringThenPlay(){
            //Get a handle to the Animation Behavior
            var behaveYourself       = $find("animateReplyPanesBehavior");
            //Get the Animation to be played onClick of the TargetControl 
            var onClickAnimation     = behaveYourself.get_OnClickBehavior();
            //Construct the JSON String
            var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
            "\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
            "\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
            //Set the JSON of the AnimationExtender to be the JSON String
            behaveYourself.set_OnClick( jsonAnimationString );
            //Play the Animation
            onClickAnimation.play();
            }
            
        </script>

        <input type="button" value="Call Static Play Method" onclick="callStaticMethods();" />
        <input type="button" value="Create Instance And Play" onclick="createInstanceAndPlay();" />
        <input type="button" value="Set JSON String then Play" onclick="SetJSONStringThenPlay();" />
        <div runat="server" id="queryReply" style="background-color: #ffcc00; position: absolute;
            top: 100px; left: 100px; height: 300px; width: 300px">
            Click me to resize me ( Uses Markup )
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" TargetControlID="queryReply"
            BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                    <Resize height="100" width="200" duration ="0.2" fps="45" unit="px"></Resize>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
    </form>
</body>
</html>

Hope I helped someone out there looking For this information .

Well, Happy Coding !!

Expirements with Ms AJAX 1 : Plot a Path and follow it

PhaniRajuYN — Mon, 26 Mar 2007 11:50:31 GMT

While working on some documentation and presentations for MS AJAX Animation ( wait for it , its gonna rock !! ) , I made what you see in the demo video.

Its basic premise is this :

Allow the User to plot points on a plane
Then trigger an animation that goes over all the points and stops

Why do this ?

No Perceptible use , pure fun factor .

I just though that it'd be cool to control an animation by clicking on points and asking an element to go to those points .

Well, here you have it .

Once the demo is hosted, you can see the same as an online app.

Take a look at a screenshot .

Lets see how we can achieve this ..

We need the following functionality

Allow the User to plot an arbitrary number of points on a plane
Create an animation that moves to all the points.

1.Allow the User to plot an arbitrary number of points on a plane

The "Plane" would be a DIV element on the page.

<div id="pathPallette">
</div>

The user plots a point on the plane by clicking on the plane.

We will have a global collection of points called pointsInpath which will be a javaScript array .

var pointsInPath = new Array();

We can attach an eventhandler to the Click event of the Div by using the $addHandler function of the Ms AJAX framework explained Here .

Syntax: $addHandler(element, eventName, handler);

$addHandler($get("pathPallette"),"click",markPoint);

We will now define the function "markPoint".

function markPoint(eventArg)

    var evt = window.event || eventArg;

    var xCoOrd = evt.clientX ;

    var yCoOrd = evt.clientY ;

    Addpoint( xCoOrd , yCoOrd );

    createMarker( xCoOrd - $get("pathPallette").offsetLeft , yCoOrd - $get("pathPallette").offsetTop );

MarkPoint calls 2 functions .

AddPoint , to add the point to a collection of points
Createmarker ,to mark the spot as a point on the plane which will be visited by the Animated element

AddPoint

function Addpoint( xCoOrd,yCoOrd)

    anyMorePoints= true;

    pointsInPath[index++] = "{\"X\" : \""+xCoOrd +"\",\"Y\":\""+yCoOrd +"\"}";

The AddPoint function recieves the X and Y co-ordinates of the Point in the Element's Path.

Add the Point to the existing points collection.

Createmarker

function createMarker( xCoOrd,yCoOrd )

    var newmarker = document.createElement("SPAN");

    newmarker.id = "marker"+markeridCounter;

    newmarker.className ="white";

    newmarker.innerText = markeridCounter;

    $get("pathPallette").appendChild( newmarker );

    Sys.UI.DomElement.setLocation( newmarker , xCoOrd , yCoOrd );

    markeridCounter++;

This Function creates a <SPAN> element , writes the point # in the span , and positions it in the plane.

2.Create an animation that moves to all the points

Basic algorithm for this step

Get the Point to navigate to
Set the animation to move to the next point
Play the animation until there are no more points left

The Element that will move to all the points will be another div ( "divMovable" ) with a background color assigned to it

<div id="divMovable" runat="server" style="height: 15px; width: 15px; position: absolute;
          top: 300px; left: 300px; background-color: #ffcc00;">
          &nbsp;
</div>

The Animation Markup would be to use the Move Animation to move the Element along the points.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
            runat="server" TargetControlID="divMovable">
            <Animations>
                <OnClick>
                     <Move relative="false"  duration="0.2" fps="40"   
                        horizontalScript ="getX()" verticalScript ="getY()"
                      AnimationTarget="divMovable" />
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

The MoveAnimation would run only once and would also move to only one point , we need to keep changing the destination Points.

If you notice the horizontalScript ="getX()" verticalScript ="getY()" snippet , the "Script" attribute added to any attribute in the Animation Markup

would cause the expression to be "eval"ed at runtime allowing us to use Expressions to set properties.

So, right , the horizontal (X) co-ordinates would be retrieved from the function getX().

The Vertical (Y) co-ordinates would be retrieved from the function getY().

The next point the element should move to would be represented by "nextPoint".

The Function "setNextPoint()" would set the next point in the path.

function getX()
{
    if( nextPoint == null)
    {
        setNextPoint();
    }
    return nextPoint.X;
}

function getY()
{
    return nextPoint.Y;
}

Once we get the next point to move to , the animation should repeat with the new values for X and Y Co-Ordinates.

We do this , by hooking a handler to the Ending event of the Animation.

<script language="javascript">
       var OnClickBehavior ;
       function pageLoad()
       {
           OnClickBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
           OnClickBehavior.add_ended(continueAnimating);
           $addHandler($get("pathPallette"),"click",markPoint);
      }
  
   </script>

We can hook eventhandlers to the ending event of the Animation by using the "add_ended" method.

Here , we add the "continueAnimating" function as an eventhandler to the Animation Ending event.

Then , we call the "play" method on the animation just as it ends, to give a seamless feel to the flow as the element moves along different points.

function continueAnimating(){
     setNextPoint(); 
     if( nextPoint!= null){
        OnClickBehavior.play();
     }
}

Trigger the complete animation sequence by calling the "play" method on the OnclickBehavior

function playAnimation()
{
    ResetPoints();
    hideAllmarkers();
    setNextPoint();
    OnClickBehavior.play();  
}

There you have it , fun and a pretty neat exercise in geometry and also shows you how easy it is to do complex stuff with the MS Ajax Framework.

How To : Using MS AJAX CaseAnimation in your applications

PhaniRajuYN — Wed, 21 Mar 2007 07:08:57 GMT

I hang out at the forums a lot .( http://forums.asp.net/1022/ShowForum.aspx ), I go by phanatic.

Looking at a couple of threads let me know that there are no examples of the caseAnimation anywhere :-(

Ok, so I built a simple sample which illustrates the use of a CaseAnimation .

See demo here

So , here we go ....

1) Add a reference to the AjaxControlToolkit to your page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

2) Add the AnimationExtender's Markup.

<ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">

3) We will trigger the animation on the Click of a button

<Animations>
  <OnClick>

4) The Markup for the Case Animation.

<Case SelectScript="ReturnAnimationIndexToPlay()" >

The SelectScript is used to return an index of the child animation to play.

The indices are Zero-based.

5) Under the Case Animation , we will put in a couple of child animations .

<Length  Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1"  ></Length>   
<Move duration="0.2" Horizontal="500"  Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
<FadeOut duration="0.2"  MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>

6) End Tags

</Case>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>

7) The SelectScript Function , ReturnAnimationIndexToPlay.

<script language="javascript">   1:  
   2:             var animIndex = -1;
   3:             function ReturnAnimationIndexToPlay()
   4:             {
   5:                 animIndex++;
   6:                 animIndex = ( animIndex ) % 3;
   7:                 return animIndex;
   8:             }
   9:         
</script>

Complete Markup .

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Case Animation Demo</title>
    <link rel="stylesheet" href="../css/defaultStyles.css" type="text/css" />
    <style>
        div { position:absolute;}
    </style>
</head>
<body>
    <form id="frmCaseAnimation" runat="server">

        <script language="javascript">
            var animIndex = -1;
            function ReturnAnimationIndexToPlay()
            {
                animIndex++;
                animIndex = ( animIndex ) % 3;
                return animIndex;
            }
        </script>

        <asp:ScriptManager runat="server" ID="ScrpManager">
        </asp:ScriptManager>
        <asp:Button runat="server" ID="btnAnimate" OnClientClick="return false;" Text="Animate Using Case Animation" />
        <ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">
            <Animations>
                <OnClick>
                    <Case SelectScript="ReturnAnimationIndexToPlay()" >
                        <Length  Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1"  ></Length>   
                        <Move duration="0.2" Horizontal="500"  Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
                        <FadeOut duration="0.2"  MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>   
                    </Case>
                </OnClick>
            </Animations>
        </ajaxToolKit:AnimationExtender>
        <div id="div1" runat="server" style="display: block; width: 100px; height: 400px;
            position: absolute; background-color: #000000; color: #FFCC00">
            Paragraph One
        </div>
    </form>
</body>
</html>

Hope this helps.

Feel free to chime in with questions / comments.

HowTo : Sys.Preview.UI.Effects.FadeAnimation

PhaniRajuYN — Thu, 15 Mar 2007 13:33:00 GMT

The Sys.Preview.UI.Effects Namespace contains a couple of animations that one can use in their applications.

Here , we will talk about how to use the FadeAnimation thats present in the Sys.Preview.UI.Effects NameSpace.

The Scripts that are to be included are :

MicrosoftAjax.js
PreviewScript.js
PreviewGlitz.js

Call the Initialize function to do the same to the Ajax Scripts :-)

<script language="javascript">
    Sys.Application.initialize();
</script>

//Get a handle to the animation Target as a Sys.UI.Control object 
var domElementVar = new Sys.UI.Control( $get("animationTarget")  );

//Create an instance of the FadeAnimation .
      var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();

//Set the Duration 
       fadeAnimation.set_duration( 0.3 );
//Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
//Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
//Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
//Play the Animation
        fadeAnimation.play();

The Complete Example is given below , its also available as a download .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fade Animation Using Futures</title>
</head>
<body>

<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="Scripts/PreviewScript.js" type="text/javascript"></script>

<script src="Scripts/PreviewGlitz.debug.js" type="text/javascript"></script>

<!-- The Fade Out Animate Button -->

<input type="button" id="btnFadeOutAnimate" value="Fade Out" onclick="FadeUsingFutures(true )" />

<!-- The Fade In Animate Button -->

<input type="button" id="btnFadeInAnimate" style ="display:none" value="Fade In" onclick="FadeUsingFutures( false )" />
    
<!-- The Div thats gonna be animated-->
<div id="animationTarget" style="width: 400px; height: 400px; background-color: #FFCC00">
</div>

<script language="javascript">
    Sys.Application.initialize();
    
    //Get a handle to the animation Target as a Sys.UI.Control object 
    var domElementVar = new Sys.UI.Control( $get("animationTarget")  );
    function FadeUsingFutures( fadeOut )
    {
        //Create an instance of the FadeAnimation .
        var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
        
        //Decide whether to Fadein Our FadeOut
        var fadeEffect = fadeOut ?  Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;
           
       //Hide / Show the appropriate button(s)
        $get("btnFadeOutAnimate").style.display =  fadeOut  ? "none":"block";
        $get("btnFadeInAnimate").style.display  =  fadeOut  ? "block":"none";
            
       //Set the Duration 
       fadeAnimation.set_duration( 0.3 );
       //Set the Animation Target as a Sys.UI.Control object 
        fadeAnimation.set_target( domElementVar );
        //Set the Animation Effect ( FadeIn / FadeOut )
        fadeAnimation.set_effect( fadeEffect );
        //Set the Maximum Opacity Value
        fadeAnimation.setValue( 70 );
        //Play the Animation
        fadeAnimation.play(); 
    }
    
    </script>

</body>
</html>

Using MS Ajax Animations From the Client-Side

PhaniRajuYN — Mon, 12 Mar 2007 18:17:00 GMT

We will talk about how to use the MS-Ajax Animation Framework without any server-side code.

The sample completely illustrates how to instantiate and use the Animation Controls by including the proper script references.

1) Include the following scripts in your HTML Page

MicrosoftAjax.js ( download from Here )

Timer.js ( downlod from Here )

BaseScripts.js

Common.js

Animations.js

AnimationBehavior.js

Actual HTML

<script src="ClientScripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="ClientScripts/Timer.js" type="text/javascript"></script>
<script src="ClientScripts/BaseScripts.js" type="text/javascript"></script>
<script src="ClientScripts/Animations.js" type="text/javascript"></script>
<script src="ClientScripts/Common.js" type="text/javascript"></script>
<script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>

2) Call the "Initialize()" function to initialize the Scripts in the HTML Page.

<script type="text/javascript"> 

</script>

3) Create  your animation using the $create Method or use the Static methods of the Animation Library to create animations.

Sample HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animation Repro</title>
</head>
<body>

    <script src="ClientScripts/MicrosoftAjax.debug.js" type="text/javascript"></script>

    <script src="ClientScripts/Timer.js" type="text/javascript"></script>

    <script src="ClientScripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script>

    <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script>

    <script src="ClientScripts/Animations.js" type="text/javascript"></script>

    <script src="ClientScripts/Common.js" type="text/javascript"></script>

    <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>

    <input type="button" onclick="Expand(event)" value="Expand" style="display: block"
        id="btnExpand" />
    <input type="button" onclick="Contract(event)" value="Contract" style="display: none"
        id="btnContract" />
    <div id="popup" style="display: block; cursor: hand; background-color: #ffcc00; height: 100px;
        width: 200px;" title="click to hide">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td style="text-align: center; vertical-align: middle;">
                    TEST
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">


<!--

Sys.Application.initialize();

function Contract(eventArgument) {

   //Hack for FireFox
    if( eventArgument == null )
    {
        eventArgument = event;
    }
    $get("btnExpand").style.display = "block";
    $get("btnContract").style.display = "none";
    
    //ResizeAnimation.play(target, duration, fps, width, height, unit);
    AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 200 , 100 , "px" );

}

function Expand(eventArgument) {

//Hack for FireFox 
    if( eventArgument == null )
    {
        eventArgument = event;
    }
    
    $get("btnExpand").style.display = "none";
    $get("btnContract").style.display = "block";
    
    //ResizeAnimation.play(target, duration, fps, width, height, unit);
    AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 400 , 400 , "px" );
    
    
}
-->
    </script>

</body>
</html>

Check out the Sample Attached to get a feel of how this works.

Any questions/comments are welcome

Animating Multiple Controls on an Event using Microsoft Ajax AnimationExtender Controls

PhaniRajuYN — Sat, 03 Feb 2007 21:51:00 GMT

We can assocaite multiple controls on a single event on a control firing by using the "AnimationTarget" attribute of the Animation class.

lets take the example of a strip of thumbnails which should move upon click on the first thumbnail.

See Demo here

We have four thumbnails , arranged ina row , see screenshot below.

We shall use Four Image Controls and position them using Css Positioning Styles.

<!-- The thumbnails that move -->
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 100px" 
                ImageUrl="~/thumbNails/___Fragile_heart____by_Liek.jpg"
                ID="imgThumbNail1" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 210px" 
                ImageUrl="~/thumbNails/001_by_Frnak.jpg"
                ID="imgThumbNail2" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 320px" 
                ImageUrl="~/thumbNails/AshXP_Design_1.jpg"
                ID="imgThumbNail3" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 430px" 
                ImageUrl="~/thumbNails/Devotion_by_h16.jpg"
                ID="imgThumbNail4" CssClass="imgThumbNail" />

To associate an animation with a control , we need to use the AnimationExtender which is part of the AjaxControlToolKit.

<!-- The Animation Extender Control -->
 <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="imgThumbNail1">

We add Animations to this control .

<Animations>

We Will move the thumbnails on Clicking on the asp:Image Control .

<OnClick>

The Animations will move in a sequence.

<Sequence>

The animations would be

1) The Image Resizes to a slightly bigger size

<Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>

2) It Goes back to its original size.

<Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>

3) It shifts by its horizontal and vertical positions relatively.

<Move vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2" AnimationTarget="imgThumbNail4"></Move>

As you can very clearly see , we can animate controls that were not associated with an animation extender control by using the

"AnimationTarget" Property of the animations

This would repeat for all the 4 controls , the complete tag would look this .

 <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="imgThumbNail1">
          <Animations>
              <OnClick>
                 <Sequence>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>
                     <Move AnimationTarget="imgThumbNail4" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail3"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail3"></Resize>
                     <Move AnimationTarget="imgThumbNail3" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail2"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail2"></Resize>
                     <Move AnimationTarget="imgThumbNail2" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail1"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail1"></Resize>
                     <Move AnimationTarget="imgThumbNail1" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                 </Sequence>
              </OnClick>
           </Animations>
</cc1:AnimationExtender>

Clicking on the First Thumbnail , we can animate the other controls which do not have animation extenders associated with them.

Animation Control , Adding Cool Animations in your application, Scenario 2

PhaniRajuYN — Sun, 21 Jan 2007 01:45:00 GMT

Assigning Animations to Client-Side Controls

If you need to assign Animation Behaviour to any Client-Side Controls using the AjaxControlToolKit's Animation Extender Control ,

you gotta Explicitly create the AnimationExtender Control on the Client side using the $create function

$create's Documentation is here Sys.UI.Component $create Method.

$create(type, properties, events, references, element);

Whenever, you add an Animation Extender control using the steps mentioned in my previous Post,

Animation Control , Adding Cool Animations in your application ,

For the Markup

<!-- asp:Image Control that houses the ThumbNail --> 
<asp:Image runat="server" ID="imgThumbNail1" 
      CssClass="imgThumbNail" 
     ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />

<cc1:AnimationExtender ID="animationExtendThumbNail1" runat="server" TargetControlID="imgThumbNail1">
  <Animations>
       <OnClick>
              <Move Duration=".2"  horizontal="800" vertical="600" Unit="px"  />
        </OnClick>
   </Animations>
</cc1:AnimationExtender>

The Runtime generates the Following $create Function

<script type="text/javascript">
<!--

Sys.Application.initialize();
<!-- Called when the Client Side Script Framework
    and Controls are Initialised--> 
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.Animation.AnimationBehavior, 
    {
         <!-- The ID to be associated with the control--> 
         "id":"animationExtendThumbNail1",
         imgThumbNail1
         "OnClick":"{\"AnimationName\":\"Move\",\"Duration\":\".2\",\"horizontal\":\"800\",\"vertical\":\"600\",\"Unit\":\"px\",\"AnimationChildren\":[]}",
        <!-- The Control to be targeted imgThumbNail1--> 
         null, null, $get("imgThumbNail1"));
});
-->
</script>

Looking at this , we understand that the Server-Side Control associated with the Animation Control is Specified as the

   last parameter of the $create function is the Element the behaviour has to be associated with .

So , lets start by creating a client Side Control .

1) Create an <img> tag on the client Side , using the document.CreateElement Method

/**********
Function Name : CreateClientSideElementAndAttachAnimation
Parameters    : 
               a) parentElementId : The Parent Element Which will house the Dynamically Created Control .
               
Purpose       : This Function Creates A client Side <img> tag and Calls the Function to attach the Animation behavior
**********/

//parentElementId is the ID of the HTML element that will house the Dynamically Created Client Side Control 
function  CreateClientSideElementAndAttachAnimation(parentElementId)
{
   //Lets be Efficient and use StringBuilder :-)
   var imgElementTagString = new Sys.StringBuilder("");

   // The ID of the dynamically Created control
   var imgElementID = "imgDynamicControl"
   imgElementTagString.append("<img");
        imgElementTagString.append(" id=\""+imgElementID+"\" ");

        //Style the Control to have the "Position" Attribute set to "Absolute" and assign the left and Top Positions of the control 
        imgElementTagString.append(" style=\"position:absolute;top:100px;left:20px;\" ");
        imgElementTagString.append(" src=\"thumbNails/Second_Dimension_by_celsojunior.jpg\" ");

   imgElementTagString.append("/>");
   //Create the Img Tag using the document.createElement
   var imgElement = document.createElement( imgElementTagString.toString() );

   //Add the Child to the "ChildNodes" collection of the Parent Control 
   $get(parentElementId).appendChild( imgElement );
   
   //Attach the Animation Control to the Dynamically Created Image Element
   AttachAnimation( imgElementID );
    
}

2) Attach the Animation to the Dynamically Created Control

/**********
Function Name : AttachAnimation
Parameters    : 
               a) controlID :  The Dynamically Created Control that has to be associated with the Animation Extender
               
Purpose       : This Function Creates an Animation Extender on the Client Side and Associates the Behaviour with the Dynamically 
                Created Control Side
**********/

function AttachAnimation( controlID )
{
    //The Id of the Dynamically Created Animation Extender Control 
    var animatorID = "dynamicallyCreatedAnimationExtender";
    
    //Dynamically Create the  Animation Extender Control 
    $create(AjaxControlToolkit.Animation.AnimationBehavior, 
    {"id":animatorID,

    //The Animation associted with the Extender in JSON

     "OnClick":"{\"AnimationName\":\"Move\",\"Duration\":\".2\",\"horizontal\":\"800\",\"vertical\":\"600\",\"Unit\":\"px\",\"AnimationChildren\":[]}"}

    // Associate the Client-Side Control with the Animation Extender by  using  "$get(<controlID>")

     null, null, $get(controlID) );
}

The Script might look a little convoluted , but once you get the hang of it, its pretty easy to tweak it as necessary .

Animation Control , Adding Cool Animations in your application, Scenario 1

PhaniRajuYN — Sun, 21 Jan 2007 00:59:21 GMT

See Demo here

1) Register the AjaxControlToolkit in your page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2) Add a Script Manager

   1: <!-- Mandatory Script Manager Control-->

   2: <asp:ScriptManager ID="ScriptManager1" runat="server">

   3: </asp:ScriptManager>

3) Add  A Server Side Control to attach the Animation to ( We will discuss how to bind Client Side Elements later ).

<!-- Image to Animate--><asp:Image Visible="false" runat="server" ID="imgThumbNail1" 
CssClass="imgThumbNail"
 ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />

4) Declare Your Animation Control Extender Instance

<cc1:AnimationExtender ID="animationExtendThumbNail1"    runat="server" TargetControlID="imgThumbNail1">   
</cc1:AnimationExtender>

5) The TargetControlID is the ID of the Control which you want to animate , it has to be a Server-Side Control .

6) Define Your Animation Elements, include the "Animations" Tag

<Animations>

7) Now , lets make our image move to a spicific point in the page , such as Left=300,Top=400 , when the Image is clicked.

   To Cause UI elements to move , we need to use the <Move> animation Tag .

   For a complete Reference of animations , go Here .

<OnClick>
        <Move Duration=".2"  horizontal="300" vertical="400" relative="false" Unit="px"  />
</OnClick>

8) The "Duration" attribute specifies the timespan in which the animation has to be completed, its measured in Seconds.

9) "Unit"  specifies the unit by which the Control  has to move .

10) Now , lets say that you want the Image Control to move by Left =300 and Top = 400  from its current Position , then you gotta set the

    "relative"  attribute to "true".By default its "false".

11) End Tags

  </Animations>
</cc1:AnimationExtender>

12) Lets look at the "imgThumbNail" CssClass

   1: .imgThumbNail

   2: {

   3:    position:absolute;

   4:    height: 110px;

   5:    width: 100px;

   6:    cursor: hand;

   7: }

13) Any Control  that has to be animated using the MOVE animation HAS to Have the "Position" attribute set to "absolute"

    because the Control has to be positioned absolutely to move on the screen.

There you go !

Click on the Image Control and see the Image move !