Animation Demonstration:
The animation support in the Toolkit is more than just a control. It's a pluggable, extensible framework for easily adding animation effects to your web pages.
The sample below demonstrates a composite animation consisting of four primary animation actions, done in parallel:
Move (to move the panel to its final location)
Resize (to change the size of the panel)
Fade (to fade the text in/out)
Color (the flyout changes from gray to white and the text pulses red)
By composing basic animations (there are many to choose from!) you can create very sophisticated effects, or use them independently from client code, server-side code, or XML markup.
Animation Description:
The AnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.
The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference.
Animation Properties:
The animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):
<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
TargetControlID - ID of the target control whose events are used to animate (this is also the default target of the animations)
OnLoad - Generic animation played as soon as the page is loaded
OnClick - Generic animation played when the target control is clicked
OnMouseOver - Generic animation played when the mouse moves over the target control
OnMouseOut - Generic animation played when the mouse moves out of the target control
OnHoverOver - Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays
OnHoverOut - Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays
Posts
0 comments:
Post a Comment