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

Artigo
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 !!

Comments

Anonymous
April 13, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.com
Anonymous
April 25, 2007
i'm using AnimationExtender to show a gridview in div but when i click in Efit command in my gridview the div dispeare and when i click on the button to show the animation again, the gridview is in Edit mode.! the div is disepear when i click in any button in my page. help me please
Anonymous
April 26, 2007
Hi Mehdi, Can you drop me a sample of the code using the Contact Form ? I can take a look at it and try to help you out. Thanks, Raj
Anonymous
June 06, 2007
Can you do a sequence animation this way as well by calling a static method? or do you have to define it in the animation extender first? I have been looking all over for examples like this - thanks!
Anonymous
June 06, 2007
Hi Max, Yes, you can do a sequence animation using this approach . A sample would be : function dynamicSequenceAnimation() { //Create an Instance of the SequenceAnimation var sequenceAnim = new AjaxControlToolkit.Animation.SequenceAnimation($get("queryReply"), 0.1, 25 , null, 1);; var resizeAnim = new AjaxControlToolkit.Animation.ResizeAnimation($get("queryReply"), 0.1, 25, 500, 500, "px"); var fadeAnim = new AjaxControlToolkit.Animation.FadeOutAnimation($get("queryReply"), 0.1, 25, 10, 100, true); //add an animation to the sequence sequenceAnim.add( resizeAnim ) //add another animation to the sequence sequenceAnim.add( fadeAnim ) //Play the Sequence sequenceAnim.play() } I typed this out in notepad and *might contain syntax errors, please excuse :) Hope this helps
Anonymous
July 25, 2007
Pretty neat. Thanks mysorian
Anonymous
August 03, 2007
Rajeev, I deleted your comment because the HTML got snipped I couldnt read it . Please use the "Contact Me" form to drop me a sample . Thanks, Raj
Anonymous
September 18, 2007
im trying to play an animation from code behind using the function below: function show() { var behaveYourself = $find("animateClickBehavior"); var onClickAnimation = behaveYourself.get_OnClickBehavior(); onClickAnimation.play(); } if i call this function on the OnClientClick it works fine but i need it to run inside OnClick event on server side but when i try string script = "show();"; ScriptManager.RegisterStartupScript(this, this.GetType(), "show", script, true); the $find("animateClickBehavior") return null and it fail to run the animation anyone know what i should do? i tryied all the ways on this page but everytime something go wrong........ making the animation all on javascript almost work but i got some position error while using MoveAction on animation... im trying to fire an animation like the animation on AjaxControlToolkit animation page sample...
Anonymous
September 30, 2007
Hi!! This was very helpful. I m facing another issue. I have a div with a textbox and asp:button. On the click of button i need to handel the clicked event on the C# to save textbox data. And after this event i need to play an animation to close this div. Any solutions or comments are welcomed!!
Anonymous
November 07, 2007
Thanks for the Code. It's been very useful to see the client methods associated with the toolkit. One more fundamental question I do have is this. Is there a client reference of all the methods and properties for the toolkit or did you just pour through the thousands of lines of javascript code to figure out the methods and properties you mention above. I've been looking for a client Reference for the toolkit, but haven't found one yet. Do you know of any? Cheers!
Anonymous
February 01, 2008
Hi. I'm running into the same problem as Balzak. Any advice would be greatly appreciated.
Anonymous
February 28, 2008
Hey guys! Somehow I feel the problem I'm having is much simpler. I'have a panel with it's onMouseOut event wired up to itself to make it disapear. So if I mouse out of the div it disapears. The problem is when I add content to the div mousing over this content will also trigger the onMouseOut of the div. I'm using the AJAX Control Toolkit AnimationExtender, is there anyaway to make the MouseOut trigger only when the mouse is actually outside the div? I appreciate any tips or leads, thanks!
Anonymous
April 07, 2008
This is very useful, I'm having an issue running function callStaticMethods(){ //Play the Animation by calling its static methods AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px" ); } if I don't include the AnimationExtender control. I get an AjaxControlToolkit not initialized error. How do I initialize the AjaxControlToolkit without requiring the ajaxToolkit:AnimationExtender?
Anonymous
April 07, 2008
Hi Mc, You need to include the scripts required for the animation extender to work . Include a script manager and include the following files. MicrosoftAjax.js ( download from Here ) Timer.js ( downlod from Here ) BaseScripts.js Common.js Animations.js AnimationBehavior.js a link to the same : http://blogs.msdn.com/phaniraj/archive/2007/03/12/using-ms-ajax-animations-from-the-client-side.aspx Raj
Anonymous
September 22, 2008
I have an Animation extender which I am trying to get to run from t he code behind. Tired all the options
Anonymous
January 09, 2009
This is the same issue mentined earlier by Balzak. Could there be a possibility that form controls are not loaded before using find method. Could pageLoad Ajax method be of any use. Im trying to play an animation from code behind using the function below: function show() { var behaveYourself = $find("animateClickBehavior"); var onClickAnimation = behaveYourself.get_OnClickBehavior(); onClickAnimation.play(); } if i call this function on the OnClientClick it works fine but i need it to run inside OnClick event on server side but when i try string script = "show();"; ScriptManager.RegisterStartupScript(this, this.GetType(), "show", script, true); the $find("animateClickBehavior") return null and it fail to run the animation anyone know what i should do?
Anonymous
June 15, 2012
nice post claps from dotnetstadium.com

Compartilhar via

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

Comments

Recursos adicionais