How To : Using MS AJAX CaseAnimation in your applications

How To : Using MS AJAX CaseAnimation in your applications

  • 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>

Hope this helps.

Feel free to chime in with questions / comments.

Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Thank you for this, its been very useful, I have been searching for better examples on this subject.

    Have you been able to take this a step further and get multiple events to happen on each childstatement?

    I want to execute the following sequence:

    <Sequence>

      <Parallel Duration="0.1">

           <FadeOut AnimationTarget="div1" />

           <FadeOut AnimationTarget="div2" />

           <FadeOut AnimationTarget="div3" />

      </Parallel>

      <Sequence>

           <FadeIn AnimationTarget="div1" />

           <FadeIn AnimationTarget="div2" />

           <FadeIn AnimationTarget="div3" />

       </Sequence>

    </Sequence>

    But the number of divs can change, so I set my condition to return 1-3, and I thought I could do the following:

    <Case SelectScript="returnNumber()">

       <Sequence>

           <Parallel Duration="0.1">

               <FadeOut AnimationTarget="div1" />

           </Parallel>

           <Sequence>

               <FadeIn AnimationTarget="div1" />

           </Sequence>

       </Sequence>

       <Sequence>

           <Parallel Duration="0.1">

               <FadeOut AnimationTarget="div1" />

               <FadeOut AnimationTarget="div2" />

           </Parallel>

           <Sequence>

               <FadeIn AnimationTarget="div1" />

               <FadeIn AnimationTarget="div2" />

           </Sequence>

       </Sequence>

       <Sequence>

           <Parallel Duration="0.1">

               <FadeOut AnimationTarget="div1" />

               <FadeOut AnimationTarget="div2" />

               <FadeOut AnimationTarget="div3" />

           </Parallel>

           <Sequence>

               <FadeIn AnimationTarget="div1" />

               <FadeIn AnimationTarget="div2" />

               <FadeIn AnimationTarget="div3" />

           </Sequence>

       </Sequence>

    </Case>

    But I get the following error Message: SequenceAnimation cannot be nested inside AjaxControlToolkit.Animation.ParallelAnimation

    Do you know of anyway around this?

    Thanks and regards

  • you must put one sentence inside de CASE, if you have many sentences, you try put the same CASE for each sentences.

    this work sequencely not parallely....

    sorry for my english.

Page 1 of 1 (3 items)