How to : Re-use Animation Extenders in a page

  • Article

Download Sample Code : 

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 :

  1. Associate an Animation  with the rows of a GridView.
  2. 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>