Scripting Animations from the Ms Ajax AnimationExtender

  • Article

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!