Animating Multiple Controls on an Event using Microsoft Ajax AnimationExtender Controls

  • Article

We can assocaite multiple controls on a single event on a control firing  by using the "AnimationTarget" attribute of the Animation class.

lets take the example of a strip of thumbnails which should move upon click on the first thumbnail.

See Demo here

 

We have four thumbnails , arranged ina  row , see screenshot below.

We shall use Four Image Controls and position them using Css Positioning Styles.

 <!-- The thumbnails that move -->
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 100px" 
                ImageUrl="~/thumbNails/___Fragile_heart____by_Liek.jpg"
                ID="imgThumbNail1" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 210px" 
                ImageUrl="~/thumbNails/001_by_Frnak.jpg"
                ID="imgThumbNail2" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 320px" 
                ImageUrl="~/thumbNails/AshXP_Design_1.jpg"
                ID="imgThumbNail3" CssClass="imgThumbNail" />
            <asp:Image runat="server" 
                Style="position: absolute; top: 100px; left: 430px" 
                ImageUrl="~/thumbNails/Devotion_by_h16.jpg"
                ID="imgThumbNail4" CssClass="imgThumbNail" />

 To associate an animation with a control , we need to use the AnimationExtender which is part of the AjaxControlToolKit.

 <!-- The Animation Extender Control -->
 <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="imgThumbNail1">

 We add Animations to this control .

 <Animations>

 We Will move the thumbnails on Clicking on the asp:Image Control .

 <OnClick>

 The Animations will move in a sequence.

 <Sequence>

 The animations would be 

 1) The Image Resizes to a slightly bigger size 

 <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>

 2) It Goes back to its original size.

 <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>

 3) It shifts by its horizontal and vertical positions relatively.

 <Move vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2" AnimationTarget="imgThumbNail4"></Move>

 As you can very clearly see , we can animate controls that were not associated with an animation extender control by using the 

 "AnimationTarget" Property of the animations

 This would repeat for all the 4 controls , the complete tag would look this .

  <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="imgThumbNail1">
          <Animations>
              <OnClick>
                 <Sequence>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail4"></Resize>
                     <Move AnimationTarget="imgThumbNail4" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail3"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail3"></Resize>
                     <Move AnimationTarget="imgThumbNail3" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail2"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail2"></Resize>
                     <Move AnimationTarget="imgThumbNail2" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                     <Resize height= "130" width="120" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail1"></Resize>
                     <Resize height= "110" width="100" unit="px" duration ="0.05" AnimationTarget ="imgThumbNail1"></Resize>
                     <Move AnimationTarget="imgThumbNail1" vertical="0" horizontal="50"  unit="px" relative ="true" duration="0.2"></Move>
                 </Sequence>
              </OnClick>
           </Animations>
</cc1:AnimationExtender>

 Clicking on the First Thumbnail , we can animate the other controls which do not have animation extenders associated with them.