使用 Client-Side 代码执行动画 （C#）

作者 ：克里斯蒂安·温茨

下载 PDF

ASP.NET AJAX 控件工具包中的动画控件不仅仅是一个控件，而是一个用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。

概述

ASP.NET AJAX 控件工具包中的动画控件不仅仅是一个控件，而是一个用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。

步骤

首先，在页面中包含 ScriptManager；然后加载 ASP.NET AJAX 库，以便可以使用控件工具包：

<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> 节点中，用户单击面板后，可以使用 <OnClick> 运行动画。 添加两个要并行执行的动画：

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

为了进行演示，此动画（以及使用 Control Toolkit 创建的任何其他动画）在页面运行时使用 JavaScript 代码执行。 首先，我们需要访问 AnimationExtender 控件。 ASP.NET AJAX 库提供用于此任务的函数 $find() 。

var ae = $find("ae");

该 AnimationExtender 控件公开了丰富的 API，包括名称与 XML 标记中使用的事件处理程序相同的方法： OnClick()， OnLoad()等等。 例如，调用OnClick()方法会在AnimationExtender控件的<OnClick>元素中执行动画：

ae.OnClick();

下面是完整的客户端 JavaScript 代码，该代码在页面完全加载后模拟单击面板上的点击动作。注意，这里的pageLoad()函数名称是被ASP.NET AJAX调用的，当页面和所有包含的JavaScript库加载完成后，该函数名称将被使用。

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

动画立即运行，无需单击鼠标（单击即可查看全尺寸图像）