Pages

Advertisement

Monday, February 11, 2008

Fade in Animation in Asp.net

Animation Using Ajax Toolkit

While the AJAX Control Toolkit is focused primarily on providing great AJAX controls and extenders, it also includes a powerful animation framework which you can use to add awesome visual effects on your pages. This walkthrough describes the basics of using this framework to create declarative animations.

The animations are implemented in JavaScript as an ASP.NET AJAX class hierarchy and can be invoked via JavaScript by calling the Animation's play function. This is very useful when writing to the animation classes from code, but writing complex animations ends up being time consuming and error prone. To make it very easy to use the animation framework without writing any JavaScript, the Toolkit provides the ability to declare animations via XML markup.

Extenders with animation support, like the AnimationExtender, expose various events, like OnClick, that can be associated with a generic XML animation declaration. Within this declaration, you specify which types of animation effects you would like to occur. For example, to make a Panel with ID = "MyPanel" disappear from the page when clicked, you could add an AnimationExtender like this:

<ajaxToolkit:AnimationExtender id="MyExtender"
runat="server" TargetControlID="MyPanel">
<Animations>
<OnClick>
<FadeOut Duration=".5" Fps="20" />
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>



Let's take a closer look at exactly what's going on in the XML above. The AnimationExtender is used to indicate that we want to make our animation target the control with ID = "MyPanel". The Animations section is where all generic animations are declared. OnClick indicates that when the target is clicked we will play the animation nested inside it. Finally, FadeOut defines the specific animation that will be played and sets the values of its Duration and Fps properties.



That's what this simple code does animation does ...



U can try implementing Ajax toolkit in ur Asp.net Application for much more pretty animation ...

3 comments:

roji said...

HI ,
Increase your revenue 100% of your blog bye converting into free website.
Convert your blog "yourname.blogspot.com" to www.yourname.com completely free.
Become proud owner of the (.com) own site .
we provide you free website+ free web hosting + list of your choice of
scripts like(blog scripts,CMS scripts, forums scripts and may scripts)
all the above services are absolutely free.
You can also start earning money from your blog by referring your friends.
Please visit www.hyperwebenable.com for more info.
regards

Anonymous said...

good day bros. I'm really into shoes and I had been digging for that singular model. The prices as regards the boots were all over 330 pounds everwhere. But completely I found this site selling them as a remedy for half price. I absolutely love these [url=http://www.shoesempire.com]prada sneakers[/url]. I will probably buy these. what can you say about it?

Anonymous said...

Hello. And Bye.