通过

同时执行若干动画

Christian Wenz

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

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、TargetControlID 属性及必需的runat="server"：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

在<Animations> 节点内使用<OnLoad>，以便页面完全加载后立即运行动画。通常， <OnLoad> 只接受一个动画。但在Animation框架中，我们可以使用 <Parallel> 元素将若干动画合并成一个。 <Parallel> 中的所有动画将会同时运行。

下面是AnimationExtender 控件标记的一个示例 ，其效果是 ，面板逐渐淡出 ，同时大小改变 ：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
     <Animations>
          <OnLoad>
               <Parallel>
                    <FadeOut Duration="1.5" Fps="24" />
                    <Resize Width="1000" Height="150" Unit="px" />
               </Parallel>
          </OnLoad>
     </Animations>
</ajaxToolkit:AnimationExtender>

事实确实如此 ：运行该脚本时 ，面板会显示出来 ，然后面板大小改变 （其宽度呈三倍以上增长 ，高度减半 ），同时逐渐淡出。

面板逐渐淡出 ， 同时大小改变 （ 借助于浏览器的呈现引擎 ， 其内容显示也同此变化 ）

 

 

下一篇教程