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 ControlsAnonymous
January 20, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.comAnonymous
January 24, 2007
Wat , no clickable demo ? , thats just a tease .. :-)Anonymous
February 22, 2007
The comment has been removedAnonymous
June 18, 2007
Animation Control: Agregando animaciones a tu aplicaciAnonymous
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