Wednesday, March 21, 2007 5:08 AM
PhaniRajuYN
How To : Using MS AJAX CaseAnimation in your applications
I hang out at the forums a lot .( http://forums.asp.net/1022/ShowForum.aspx ), I go by phanatic.
Looking at a couple of threads let me know that there are no examples of the caseAnimation anywhere :-(
Ok, so I built a simple sample which illustrates the use of a CaseAnimation .
See demo here
So , here we go ....
1) Add a reference to the AjaxControlToolkit to your page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
2) Add the AnimationExtender's Markup.
<ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">
3) We will trigger the animation on the Click of a button
4) The Markup for the Case Animation.
<Case SelectScript="ReturnAnimationIndexToPlay()" >
The SelectScript is used to return an index of the child animation to play.
The indices are Zero-based.
5) Under the Case Animation , we will put in a couple of child animations .
<Length Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1" ></Length>
<Move duration="0.2" Horizontal="500" Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
<FadeOut duration="0.2" MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>
6) End Tags
</Case>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>
7) The SelectScript Function , ReturnAnimationIndexToPlay.
<script language="javascript"> 1:
2: var animIndex = -1;
3: function ReturnAnimationIndexToPlay()
4: { 5: animIndex++;
6: animIndex = ( animIndex ) % 3;
7: return animIndex;
8: }
9:
</script>
Complete Markup .
<%@ 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>Case Animation Demo</title>
<link rel="stylesheet" href="../css/defaultStyles.css" type="text/css" />
<style>
div { position:absolute;}
</style>
</head>
<body>
<form id="frmCaseAnimation" runat="server">
<script language="javascript">
var animIndex = -1;
function ReturnAnimationIndexToPlay()
{
animIndex++;
animIndex = ( animIndex ) % 3;
return animIndex;
}
</script>
<asp:ScriptManager runat="server" ID="ScrpManager">
</asp:ScriptManager>
<asp:Button runat="server" ID="btnAnimate" OnClientClick="return false;" Text="Animate Using Case Animation" />
<ajaxToolKit:AnimationExtender runat="server" ID="animateDiv" TargetControlID="btnAnimate">
<Animations>
<OnClick>
<Case SelectScript="ReturnAnimationIndexToPlay()" >
<Length Property="style" PropertyKey="height" Fps="50" duration="0.2" StartValue="400" EndValue="100" AnimationTarget="div1" ></Length>
<Move duration="0.2" Horizontal="500" Vertical="300" Relative="false" AnimationTarget="div1" Unit="px"></Move>
<FadeOut duration="0.2" MinimumOpacity ="0" MaximumOpacity="100" AnimationTarget="div1" ></FadeOut>
</Case>
</OnClick>
</Animations>
</ajaxToolKit:AnimationExtender>
<div id="div1" runat="server" style="display: block; width: 100px; height: 400px;
position: absolute; background-color: #000000; color: #FFCC00">
Paragraph One
</div>
</form>
</body>
</html>
Hope this helps.
Feel free to chime in with questions / comments.