Animating Multiple Controls on an Event using Microsoft Ajax AnimationExtender Controls

Animating Multiple Controls on an Event using Microsoft Ajax AnimationExtender Controls

  • Comments 1

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.
Leave a Comment
  • Please add 4 and 1 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

Page 1 of 1 (1 items)