MS AJAX AnimationExtender : How Many Ways Do I Play thee ? ( Updated )
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" "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 !!