Ajax contorl toolkit UsingJquery Demonstration

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>

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 MaximumOpacity properties.

Each animation corresponds to a JavaScript class (for example, FadeIn is mapped to the Sys.Extended.UI.Animation.FadeInAnimation class). The name of the animation is used as the generic XML animation declaration's tag and its properties, which correspond to the properties on the JavaScript class, 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:

<Sequence>
  <Pulse Duration=".1" />
  <Parallel Duration=".5" Fps="30">
    <FadeOut />
    <Scale ScaleFactor="5" Unit="px" Center="true"
      ScaleFont="true" FontUnit="pt" />
  </Parallel>
</Sequence>

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 sophisticated effects.

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:

<Sequence>
  <EnableAction Enabled="false" />
  <Parallel Duration=".2">
    <Resize Height="0" Width="0" Unit="px" />
    <FadeOut />
  </Parallel>
  <HideAction />
  <ScriptAction Script="alert('Goodbye!');" />
</Sequence>

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:

<Sequence>
  <EnableAction Enabled="false" />
  <Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" />
  <Color AnimationTarget="MyContent"
    Duration="1"
    StartValue="#FF0000"
    EndValue="#666666"
    Property="style"
    PropertyKey="backgroundColor" />
  <EnableAction Enabled="true" />
</Sequence>

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.