从一组动画中选择一个动画

2021-10-20

Christian Wenz

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

ASP.NET AJAX Control Toolkit 中的Animation 控件不仅仅是一个控件，它是一个可向控件添加动画的框架。利用这个框架，程序员还可以让他们的程序根据某个JavaScript代码的计算结果来从一组动画中选择一个动画。

« 前一篇教程 | 下一篇教程 »

概述

步骤

首先，将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>，以便页面完全加载后立即运行动画。接着，我们没有使用一个常规的动画元素，而是使用了<Case > 元素。程序经过计算返回一值（此值必须是数值），将该值赋予 <Case > 元素的SelectScript属性。然后，根据这个数值从<Case>中选择一个子动画来执行。例如，如果计算得到的SelectScript值为2 ，Control Toolkit 会运行<Case>中的第三个动画（从0开始计数）。

下面的标记定义了三个子动画：宽度调整、高度调整、淡出。 JavaScript 代码( Math.floor(3 * Math.random()))从0到2 中选择一个数字以便执行这三个动画中的一个：

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
     TargetControlID="Panel1">
     <Animations>
          <OnLoad>
               <Case SelectScript="Math.floor(3 * Math.random())">
                    <Resize Width="1000" Unit="px" />
                    <Resize Height="150" Unit="px" />
                    <FadeOut Duration="1.5" Fps="24" />
               </Case>
          </OnLoad>
     </Animations>
</ajaxToolkit:AnimationExtender>

三个可能的动画之一：面板变宽

下一篇教程

通过

从一组动画中选择一个动画

概述

步骤

其他资源