How To : Using MS AJAX CaseAnimation in your applications

Phani Raju MSFT

21 Mar 2007 12:08 AM

Comments 3

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

<Animations>
  <OnClick>

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>