Animation Control , Adding Cool Animations in your application, Scenario 1

See Demo here

 

1) Register the AjaxControlToolkit  in your page

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

 2) Add a Script Manager 

    1: <!-- Mandatory Script Manager Control-->

    2: <asp:ScriptManager ID="ScriptManager1" runat="server">

    3: </asp:ScriptManager>

 3) Add  A Server Side Control to attach the Animation to ( We will discuss how to bind Client Side Elements later ).

 <!-- Image to Animate--><asp:Image Visible="false" runat="server" ID="imgThumbNail1" 
CssClass="imgThumbNail"
 ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />

 4) Declare Your Animation Control Extender Instance 

 <!-- Markup For the Animation Extender Control--> 
<cc1:AnimationExtender ID="animationExtendThumbNail1"    runat="server" TargetControlID="imgThumbNail1">   
</cc1:AnimationExtender>

 5) The TargetControlID is the ID of the Control which you want to animate , it has to be a Server-Side Control .

 6) Define Your Animation Elements, include the "Animations" Tag

 <Animations>

 7) Now , lets make our image move to a spicific point in the page , such as Left=300,Top=400 , when the Image is clicked.

    To Cause UI elements to move , we need to use the <Move> animation Tag .

    For a complete Reference of animations , go Here . 

 <OnClick>
        <Move Duration=".2"  horizontal="300" vertical="400" relative="false" Unit="px"  />
</OnClick>

 8) The "Duration" attribute specifies the timespan in which the animation has to be completed, its measured in Seconds.

 9) "Unit"  specifies the unit by which the Control  has to move .

 10) Now , lets say that you want the Image Control to move by Left =300 and Top = 400  from its current Position , then you gotta set the 

     "relative"  attribute to "true".By default its "false".

 11) End Tags

   </Animations>
</cc1:AnimationExtender>

 12) Lets look at the "imgThumbNail" CssClass

    1: .imgThumbNail

    2: {

    3:    position:absolute;

    4:    height: 110px;

    5:    width: 100px;

    6:    cursor: hand;

    7: }

 13) Any Control  that has to be animated using the MOVE animation HAS to Have the "Position" attribute set to "absolute" 

     because the Control has to be positioned absolutely to move on the screen.

 There you go !

 Click on the Image Control and see the Image move !

 .csharpcode, .csharpcode pre
{
  font-size: small;
   color: black;
   font-family: consolas, "Courier New", courier, monospace;
   background-color: #ffffff;
  /*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
   background-color: #f4f4f4;
  width: 100%;
    margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Comments

• Anonymous
  January 20, 2007
  Using the Animation Control in your ATLAS Web Site , Scenario 2 Assigning Animations to Client-Side Controls

• Anonymous
  January 20, 2007
  You've been kicked (a good thing) - Trackback from DotNetKicks.com

• Anonymous
  January 24, 2007
  Wat , no clickable demo ? , thats just a tease .. :-)

• Anonymous
  February 22, 2007
  The comment has been removed

• Anonymous
  June 18, 2007
  Animation Control: Agregando animaciones a tu aplicaci

• Anonymous
  September 12, 2007
  hi i really liked the way u hv demonstrated...PhaniRajuYN, i want the effect that video in this link has ...i.e when we click on menu it show the content and and when clicked back it collapses back...i trie this with collapsible panel but it pushes all my contents down wards..so if u can help me creat the effect as is in videofor menu and play list... regards, stickler endowed.stickler@gmail.com