ASP.Net AJAX 的动画是采用其强大的 JavaScript 类库进行实现的，因而，你可以用 JavaScript 调用动画类库的 play 方法来实现动画效果。 在用代码实现动画效果的开发方式中，调用 play 的方法是一个很好的办法，但是如果需要写比较复杂的动画代码会引起时间的开销和错误的发生（按照软件工程多写多错的法则）。

因而，ASP.Net AJAX 同样提供了方便的 XML 表示一个动画的使用，而避免了大量的、复杂的和非调试性的 JavaScript 编写。

ASP.Net AJAX 控件，类似 AnimationExtender ，可以使得各种 Html 元素的事件具有动画功能，例如 OnClick 。 在使用中，我们可以采用范化的 XML 动画声明，在这个申明中，我们可以指定产生的动画效果。例如： 当我们需要使得一个 ID 为 MyPanel 的 ASP.Net Panel 控件在点击的时候具有动画效果，我们可以采用如下的动画申明：

<ajaxToolkit:AnimationExtender id="MyExtender"
  runat="server" TargetControlID="MyPanel">
  <Animations>
    <OnClick>
      <FadeOut Duration=".5" Fps="20" />
    </OnClick>
  </Animations>
</ajaxToolkit:AnimationExtender>

在上面的 XML 描述中，AnimationExtender 采用 TargetControlID 指定所需要采用动画的控件。 Animations 是一个申明范化的动画信息的申明，其中 OnClick 指定了当目标控件被点击的时候将调用动画显示效果。 最后 FadeOut 和 Duration 都是 ASP.Net AJAX 动画效果中的一个申明方式。下面是这个示例的演示，你可以点击这个控件感受一下它的效果。

点击这里感受渐变效果

重置

AnimationExtender 可以协作的客户端事件包括 OnLoad 、OnClick 、OnMouseOver、OnMouseOut、OnHoverOver 和 OnHoverOut。

另外的 ASP.Net AJAX 控件还具有其它一些可应用动画的事件， 例如：UpdatePanelAnimationExtender 具有事件 OnUpdating 和 OnUpdated 可显示动画效果。

请注意每一个事件只能包括一个用 XML 表示的动画描述，但是你可以用 Sequence 和 Parallel 来控制顺序或者并行的动画动作，我们将在下面继续描述它的信息。

下面的示例展示一个采用 OnHoverOver 和 OnHoverOut 的渐变效果的 ASP.Net Panel 控件的动画效果，当你的鼠标移入或者移出这个 Panel 控件的时候，我们应用了 FadeIn 和 FadeOut 动画，并且定义了它的 MinimumOpacity 和 MaximumOpacity 属性。

移动鼠标感受渐变效果

每一个动画都和一个 JavaScript 类进行通信，例如， FadeIn 和 JavaScript 类 AjaxControlToolkit.Animation.FadeInAnimation 进行通信。 在范化的 XML 动画申明中，它将应用其动画的名字和对应的 JavaScript 类进行通信。例如我们可以改变一个 Html 元素的的尺寸采用 Resize 标签，并指定其 Width、Height 和 Unit 属性。

我们可以作如下的申明：
<Resize Width="200" Height="300" Unit="px" />
请注意，范化的 XML 动画申明是大小写敏感的，另外，由于 ASP.Net AJAX 动画效果的架构模式，每一个动画元素都具有 Duration 和 Fps 属性，分别用于表示动画的持续时间（用秒表示）和每秒钟内显示的帧数。 你可以在动画引用中找到所有的 ASP.Net AJAX 动画效果和它们的属性描述。

有一些动画是用来组合其它动画动作的方式，例如 Parallel 和 Sequence 将分别并行和顺序地执行它里面申明的子动画。
需要应用这些组合动画形式，我们将其子动画采用嵌入的方式申明于组合动画中。例如下面的例子，我们就采用了顺序的方式组合了渐变和放大效果的动画。

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

触发！

上面是演示将组合动画应用于 OnClick 事件的示例：

大多数 ASP.Net AJAX 动画都是实现单一的一个动画效果。
当你将它们组合起来，应用类似 Sequence 和 Parallel，你可以在你的页面中实现非常漂亮的动画效果。

ASP.Net AJAX 的动画框架还包括一系列的动画动作(Action)使得你的页面可以呈现特殊的效果。它不像单个使用一个动画那样只执行动画，它可以使得你的动画和其它一些实际项目中应用的动作结合起来。
例如，EnableAction 是一个可以使得你的某个元素是否处于可操作状态的动作，StyleAction 是一个可以设置一个 Html 元素的样式的动作，HideAction 可以隐藏你的 Html 元素。
你可以尝试用下面的动画代码来控制你页面上的一个按钮的不被用户两次点击：

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

你可以尝试一下点击下面的按钮看到动作(Action)的效果。

ASP.Net AJAX 默认的执行动画的目标是由它的 TargetControlID 指定的。但是你也可以采用 AnimationTarget 属性指定另外一个产生动画效果的属性， 这种方法对于你想把一系列的动画效果指定在一个 AnimationExtender 控件的时候特别有用。例如你需要在点击一个按钮的时候使得另外一个控件具有动画效果的显示。

当指定一个动画的子动画的时候，除非我们采用了 AnimationTarget 属性指定，否则一个子动画默认和它的父动画具有相同的目标。

下面的示例代码中，我们采用一个按钮的 OnClick 事件使得它的背景控件具有相应的动画效果。

<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>

点击下面的按钮，它会引起其背景的变化：

引用 ASP.Net AJAX 的动画控件，你可以使得你的网页具有前所未有的动画效果，其效果的产生使得你的网页更加的绚丽多彩，同时其方便的事件控制机制也使得你的页面更加和用户操作互动。

而所有的动画效果，你不需要去懂得或者编写很深层次的 JavaScript 代码，所有的效果甚至你可以非常简单地采用几个 XML 标志就可以完成。

---

---