Scripting Animations from the Ms Ajax AnimationExtender
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!
Comments
Anonymous
June 14, 2007
I have a Question, You not using UpdatePanel for the AnimationExtenderControl, it not necessary.Anonymous
June 14, 2007
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, RajAnonymous
December 22, 2009
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!Anonymous
January 02, 2012
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