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.
Generic XML Animations
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.
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:
<FadeOut Duration=".5" Fps="20" />
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
properties. Here's the example in action:
Click me to fade out!
The events associated with animations vary from extender to extender. The AnimationExtender
has events for OnLoad, OnClick, OnMouseOver,
OnMouseOut, OnHoverOver, and OnHoverOut.
The UpdatePanelAnimationExtender has events for
OnUpdating and OnUpdated. It is important to note that each event can only have
one child XML node associated with it but you can use the using the Sequence and Parallel
animations to arbitrarily nest and group animations, which is discussed in detail below.
Below is an example which uses OnHoverOver and OnHoverOut to fade
a Panel in and out when the mouse moves over it. We use the FadeIn and
FadeOut animations and set their MinimumOpacity and
Hover over me to fade in!
AjaxControlToolkit.Animation.FadeInAnimation class). The name of the animation is used
are attributes of that tag. For example, to change the size of an element we could use Resize
which has properties Width, Height, and Unit.
We would declare it as:
<Resize Width="200" Height="300" Unit="px" />
The name of the animation and properties are case insensitive in generic XML animation declarations.
Since the animation framework is based on a hierarchy of animation classes, all the animations have the properties
Duration (in seconds) and Fps (frames per second).
All the animations and their properties are described in the Animation Reference.
Some of the animations are used to aggregate and combine other animations. Examples include Parallel Animation
which will run its child animations simultaneously and Sequence which runs its child animations sequentially, waiting for each to finish before starting the next.
To use these animations in the generic XML animation declaration syntax, we include their child animations as nested XML elements.
For example, to have an element pulse and then fade out while scaling its size by 500%, we could declare the following:
<Pulse Duration=".1" />
<Parallel Duration=".5" Fps="30">
<Scale ScaleFactor="5" Unit="px" Center="true"
ScaleFont="true" FontUnit="pt" />
Here is what this animation would do if associated with the OnClick
Most of the animations included in the framework are very simple and perform a single function. When you combine them together
using animations like Sequence and Parallel you can create very
The animation framework also includes a number of animation actions that perform an instantaneous operation. They differ from regular
animations which perform an operation in small steps over a period of time. The actions are often useful in composite animations to assist
in creating polished effects. Examples include the EnableAction which allows you to set whether or not
an element can be clicked, the StyleAction which allows you to set a style attribute on the target
element, and the HideAction that hides the element. If you wanted to prevent a
Button on a page from being clicked twice, you could use the following animation:
<EnableAction Enabled="false" />
<Resize Height="0" Width="0" Unit="px" />
<ScriptAction Script="alert('Goodbye!');" />
If hooked up to a Button
, this would look like:
The animations perform their various operations on a target element. The default target element for an animation is
the control it is extending (i.e. the control pointed to by TargetControlID on its
Extender tag). You can also specify alternate targets using the
AnimationTarget property. This is very useful when you want to wire up the
AnimationExtender to one control, like a Button,
but have the animation modify another control, like a Panel. A child animation will
have the same target as its parent animation unless another target was explicitly specified. Here's an example of how we
could have a button's OnClick event animate the background color of another control:
<EnableAction Enabled="false" />
<EnableAction Enabled="true" />
Clicking this button will demonstrate the animation:
The animation framework provides you with the ability to easily add interactivity to your web pages that's never before been available. Beyond
specifying animations in markup, they're also easy to use in code so you can add professional looking transitions and visual
effects to your Toolkit components and controls.