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

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

  • Comments 17

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 .

<!--AjaxControlToolkit.Animation.ResizeAnimation.play(target, duration, fps, width, height, unit);-->
//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 .

<!--Constructor: new AjaxControlToolkit.Animation.ResizeAnimation(target, duration, fps, width, height, unit); -->
//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 !!

Leave a Comment
  • Please add 2 and 6 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • 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

  • 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

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

  • 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

  • Pretty neat.

    Thanks

    mysorian

  • 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

  • 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...

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

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

  • Hi.

    I'm running into the same problem as Balzak. Any advice would be greatly appreciated.

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

  • 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?

  • 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

  • I have an Animation extender which I am trying to get to run from t he code behind. Tired all the options

Page 1 of 2 (17 items) 12