向控件添加动画

2021-10-20

Christian Wenz

本文档是Visual C# 教程（转至 Visual Basic 教程）

ASP.NET AJAX Control Toolkit 中的 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>

执行此脚本时，会显示面板，然后面板在一秒半后淡出。

面板淡出

下一篇教程

通过

向控件添加动画

概述

步骤

其他资源