Animation
概述
ASP.NET AJAX Control Toolkit 中的 Animation 控件不仅仅是一个控件，它是一个可向控件添加动画的完整框架。本教程展示怎样建立这样的动画。
步骤
和往常一样，第一步是将ScriptManager放入页面，以便加载ASP.NET AJAX 库并且可以使用Control Toolkit：
<asp:ScriptManager ID="asm" runat="server" />
本案例将为一个文本面板加上动画效果，该文本面板的标记如下所示：
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
</asp:Panel>
下面是该面板关联的CSS 类，它定义了背景色和宽度：
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
接下来，我们需要AnimationExtender控件。在指定了ID 和通常的runat="server" 之后，需将TargetControlID属性设置为要施加动画效果的控件，此例中为面板：
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
全部动画用一条XML 语句，以声明方式实现。遗憾的是，Visual Studio 的 IntelliSense 当前对此并不完全支持。根节点是<Animations>；该节点中允许几个事件，这些事件决定了何时会呈现动画：
OnClick（鼠标单击）
OnHoverOut（鼠标离开控件时）
OnHoverOver（鼠标悬停于控件上方时，停止 OnHoverOut 动画）
OnLoad（加载页面时）
OnMouseOut（鼠标离开控件时）
OnMouseOver（鼠标悬停于控件上方时，不停止OnMouseOut 动画）
该框架随带一组动画样式，每个样式分别由一个XML 元素来表示。可以在下面选择一个：
<Color>（改变颜色）
<FadeIn>（淡入）
<FadeOut>（淡出）
<Property>（改变控件的属性）
<Pulse>（脉动）
<Resize>（改变大小）
<Scale>（按比例改变大小）
在本例中，面板将淡出。该动画将花1.5 秒（这个时间由Duration属性决定），每秒显示24 帧（动画步骤）（帧数由Fps属性决定）。下面是AnimationExtender控件的完整的标记：
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations>
<OnLoad>
<FadeOut Duration="1.5" Fps="24" />
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
执行此脚本时，会显示面板，然后面板在一秒半后淡出。
--------------------------------------------------------------------------------------------
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of
more efficient,
more interactive and highly-personalized Web experiences that work across
all the most popular browsers.<br />
</asp:Panel>
<cc1:AnimationExtender ID="AnimationExtender1" TargetControlID="panelShadow" runat="server">
<Animations>
<OnLoad>
<Parallel>
<FadeOut Duration="10" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
<%-- <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" /> --%>
</Parallel>
</OnLoad>
<OnHoverOver>
<%-- <FadeIn Duration="5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />--%>
</OnHoverOver>
<OnClick>
<Parallel>
<FadeIn Duration="60" Fps="3" />
<Resize Width="400" Height="400" Unit="px" />
</Parallel>
</OnClick>
<%-- <OnMouseOver>
<Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />
</OnMouseOver>--%>
<%--<OnMouseOut>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
</Parallel>
</OnMouseOut>--%>
</Animations>
</cc1:AnimationExtender>
