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.
Once you get the general idea of the animation's markup, you'll want to play a bit. All of
the animations are created from simple, reusable building blocks that you can compose together.
Before long you'll be creating dazzling visuals. By grouping steps together and specifying
them to be run either in sequence or in parallel, you'll achieve almost anything you can
imagine, without writing a single line of code!
The XML defining the animations is very easy to learn and write, such as this example's
show
and
close
markup.
<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button --%>
<EnableAction Enabled="false" />
<%-- Show the flyout --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Height="260" Width="280" />
<Color AnimationTarget="flyout" PropertyKey="backgroundColor"
StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Fade in the text --%>
<FadeIn AnimationTarget="info" Duration=".2"/>
<%-- Cycle the text and border color to red and back --%>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor"
StartValue="#666666" EndValue="#FF0000" />
</Parallel>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor"
StartValue="#FF0000" EndValue="#666666" />
<FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Scale the flyout down to 5% to make it disappear --%>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true"
ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the styles on the info box --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="250px"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<%-- Re-enable the button --%>
<EnableAction Enabled="true"
AnimationTarget="btnInfo" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
An extender used to play animations when a control's events fire.
Properties
- OnClick - OnClick animation
- OnHoverOut - OnHoverOut animation
- OnHoverOver - OnHoverOver animation
- OnLoad - OnLoad animation
- OnMouseOut - OnMouseOut animation
- OnMouseOver - OnMouseOver animation
