Scripting Animations from the Ms Ajax AnimationExtender

Scripting Animations from the Ms Ajax AnimationExtender

  • Comments 4

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!
Leave a Comment
  • Please add 5 and 6 and type the answer here:
  • Post
  • I have a Question, You not using UpdatePanel for the AnimationExtenderControl, it not necessary.

  • Hi Carlos,

    No, you don't need an UpdatePanel Control on your page to use the AnimationExtender .All you need is a scriptManager to stream the appropriate scripts.

    Hope that helps.

    Thanks,

    Raj

  • For quit() I'm getting a javascript error that the function is not supported.  play() and stop() work fine.  pause() does pause the animation, but then play() doesn't resume it.

    Also, after stopping, when I play() again the sequence is mangled up, as though it continued playing in the background.

    What's up with that?

    What's the difference between pause and stop?

    Thanks!

  • Very informative post. Its really helpful for me and beginner too. Check out this link too its also having a nice post with wonderful explanation on Ajax Toolkit AnimationExtender Control in ASP.Net.....

    mindstick.com/.../c0c7993d-c27e-49a6-aee8-e4ea3b4193d0

    Thanks

Page 1 of 1 (4 items)