根据条件执行动画

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>，以便页面完全加载后立即运行动画。接着，我们不是使用一个常规的动画元素，而是使用了<Condition> 元素。这里我们通过 ConditionScript 属性值提供JavaScript代码，该代码在运行时环境中执行。如果该代码的计算结果为真，则执行动画，否则不执行。下面的标记提供两个动画，每个都以50%的概率随机执行。由于 <OnLoad> 中只可以有一个动画，我们用<Sequence> 元素将两个<Condition> 动画合并到一起：

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
     TargetControlID="Panel1">
     <Animations>
          <OnLoad>
               <Sequence>
                    <Condition ConditionScript="Math.random() &lt; 0.5">
                         <Resize Width="1000" Height="150" Unit="px" />
                    </Condition>
                    <Condition ConditionScript="Math.random() &lt; 0.5">
                         <FadeOut Duration="1.5" Fps="24" />
                    </Condition>
               </Sequence>
          </OnLoad>
     </Animations>
</ajaxToolkit:AnimationExtender>

注意，ConditionScript 属性中的小于号(<)必须经过转义(<).运行此脚本时可能的情况有：两个动画都没有运行、其中一个动画运行、两个动画都运行。

面板未调整大小就淡出，因此运行了第二个动画，但没有运行第一个

下一篇教程

通过

根据条件执行动画

概述

步骤

其他资源