How to : Re-use Animation Extenders in a page

Artigo
08/15/2007

while working with the AnimationExtender on an ASPX Page ,One would run into a scenario wherein you would need to associate the same animation with multiple Elements on the page.

Some Examples are :

Associate an Animation with the rows of a GridView.
Associate an Animation with probably multiple panels on the same page.

Today , we will discuss how to re-use a single AnimationExtender in a few possible Scenarios.

a) Trigger the same Animation From Different Controls

This section will address the scenario wherein you would have an animation which is defined to animate a specific element.

And you would want different Elements on the Page to trigger the same animation on the element.

Here , we would be simulating a scenario wherein one would probably want to assign Multiple TargetControlIDs to an animation.

The TargetControlID Specifies the control that Kicks-off the animation.

If an AnimationTarget is not Specified , then it is the control which will be animated.

We will have the Following Elements :

a) A button to trigger the animation :

  <!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" OnClientClick="return false;" />

 b) A Div/ASP:Panel which will be animated onClick of the Button

  <!-- The Panel which will be animated-->
<asp:Panel runat="server" ID="pnlAnimated" Style="position: absolute; top: 100px;
            left: 50px; height: 200px; width: 150px; background-color: #99ccff;">
</asp:Panel>

 The Animation Markup will be as shown below :

 <!-- The Markup for the animation Extender-->
<ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTarget="pnlAnimated" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

The Div pnlAnimated will resize to height and width 400 and

back to 380 and then 400 again to provide an Easing effect .

Let's Say that you need to trigger the same animation by clicking on another button and you would want to do this without having to create a New AnimationExtender on the same page.

 <!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" />

a.1) Client Side :

Step 1 : Assign a BehaviorID to the AnimationExtender if not already present.

 BehaviorID ="animateMe"

 Step 2: Assign an OnClientClick function to the btnAnimateTriggerTwo button .

 OnClientClick="ChangeAnimationTarget();return false;"

 Step 3:  The Function ChangeAnimationTarget() which will trigger the animation to be played.

 <script language ="javascript" type ="text/javascript">
   function ChangeAnimationTarget() {
       $find("animateMe").get_OnClickBehavior().play();
    }
 </script>

 This will cause the animation already defined on the TargetControl of btnAnimateTriggerOne to be played onclick of the

 button btnAnimateTriggerTwo.

 In a similar way you can add any number of triggers to the same AnimationExtender.

 a.2) Server Side :

Step 1: Put the Above Controls inside the ContentTemplate of an UpdatePanel .

Step 2: On the Server-Side you can switch the TargetControl by running the following code.

 private void ChangeAnimationTarget()
    {
        AnimationExtender1.TargetControlID = btnAnimateTriggerTwo.ID;
        btnAnimateTriggerTwo.OnClientClick = "return false;";
    }

   Step 3:  Now , the TargetControlId has changed and upon clicking on the button btnAnimateTriggerTwo, the animation will run.

   In this case , you would have to switch the AnimationTarget BEFORE you want the animation to run.

  b)<br>Modify the AnimationTarget on which you want the animation to run

 let's consider a scenario in which you would want the same Animation to run on 2 or more different Elements.

 For the sake of simplicity , lets consider that you would want to run the above ResizeAnimation on

 another asp:Panel by the name of pnlAnimatedToo  and you want to do this without having to create another AnimationExtender on the same page.

 b.1) Client Side :

 Step 1 :  You will have to change the markup of the AnimationExtender to look like this :

  Change the AnimationTarget Attribute to be AnimationTargetScript ="getAnimationTarget();".

 This will cause the function getAnimationTarget() to be called whenever the AnimationExtender runs.

 and getAnimationTarget() will return the ID of the Control that should be animated.

 <ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

 Step 2 :  Assign the Following function as OnClientClick handler of the Button btnAnimateTriggerOne.

 OnClientClick="setAnimationTarget();return false;"

 The Function setAnimationTarget sets the ID of the AnimationTarget for the AnimationExtender.

 Step 3:  The Definition of the functions getAnimationTarget() and setAnimationTarget().

 <script language ="javascript" type ="text/javascript">
 var currentAnimationTarget ="pnlAnimated";
            
function getAnimationTarget() {
    return currentAnimationTarget;
}
function setAnimationTarget() {
  currentAnimationTarget = currentAnimationTarget === "pnlAnimated" ? "pnlAnimatedToo":"pnlAnimated";
}
</script>

In this example, the animationTarget will alternate between pnlAnimated and pnlAnimatedToo.

You can implement your own logic into the above functions for your implementation.

c) Combination of a) and b) , i.e you would want to use the same animationExtender to trigger the same animations on different elements onClick of two different Buttons.

Multiple TargetControlIDs and Multiple AnimationTargets.

For instance , in the above example , if you would want to

Animate pnlAnimated onClick of btnAnimateTriggerOne

and

Animate pnlAnimatedToo onClick of btnAnimateTriggerTwo.

And you would want to do all of this Without creating a new AnimationExtender on the same page.

Step 1: Assign the OnClientClick of the Two buttons to be as below :

 <!-- The Trigger Button One-->
<asp:Button runat="server" ID="btnAnimateTriggerOne" Text="Trigger One" 
OnClientClick="setAnimationTargetValue('pnlAnimated');return false;" />
        
<!-- The Trigger Button two-->
<asp:Button runat="server" ID="btnAnimateTriggerTwo" Text="Trigger Two" 
OnClientClick="setAnimationTargetValue('pnlAnimatedToo');SwitchTargetControl();return false;" />

 Step 2:  Change the Markup of the AnimationExtender to replace AnimationTarget to be AnimationTargetScript.

 <ajaxToolKit:AnimationExtender BehaviorID ="animateMe" ID="AnimationExtender1" runat="server" TargetControlID="btnAnimateTriggerOne">
            <Animations>
                <OnClick>
                    <Sequence>
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="380" width="380" duration ="0.1" fps="45" unit="px" />
                        <ReSize AnimationTargetScript="getAnimationTarget();" height="400" width="400" duration ="0.1" fps="45" unit="px" />
                    </Sequence>
                </OnClick>
            </Animations>
</ajaxToolKit:AnimationExtender>

 Step 3:  The Definition for the JavaScript Functions.

 <script language ="javascript" type ="text/javascript">
            function SwitchTargetControl() {
                $find("animateMe").get_OnClickBehavior().play();
            }
            
            var currentAnimationTarget ="pnlAnimated";
            
            function getAnimationTarget() {
                return currentAnimationTarget;
            }
            
            function setAnimationTargetValue( value ) {
                currentAnimationTarget  = value;
            }
</script>

Comments

Anonymous
August 15, 2007
PingBack from http://msdnrss.thecoderblogs.com/2007/08/15/how-to-re-use-animation-extenders-in-a-page/
Anonymous
September 07, 2007
Great example. I was able to follow through step by step. The one change I needed to do was to adapt this to a scenario where the controls (DIVs) that are to be animated, are dynamically-created from a database query. In that case, what I recommend is to create an invisible button and target and set these up as the BehaviorID and TargetControlID of the AnimationExtender. That way, the extender will be created and doesn't return errors whether the dynamic buttons/DIVs are present or not. Then, you programmatically add the onClick method to each dynamically-created button/DIV, calling the Javascript function to change the targets and runs the animation. This requires, of course, that each button and DIV have an unique ID (enter the combined powers of iteration and concatenation). I'm cleaning up my code but soon will provide a sample on my blog. Thanks for this great article.
Anonymous
March 12, 2008
Hi. Great code, this is really coool :) I have only one issue. When I tried it with two buttons on a simple aspx page. I need to click the button to which the TargetControlId for AnimationExtender control is originally set before I'm able to call the same animation on the second button. I'm looking into this problem right now, but if you have any input I'd REALLY appreciate it. Thanks alot!

Compartilhar via

How to : Re-use Animation Extenders in a page

Comments

Recursos adicionais