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

Article
04/13/2007

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 !!

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

Additional resources