使用客户端代码执行动画 (VB)

作者： Christian Wenz

下载代码或下载 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>

为了演示这种情况，在页面运行后，将使用 JavaScript 代码执行此动画（以及使用控制工具包创建的任何其他动画）。首先，我们需要访问 AnimationExtender 控件。 ASP.NET AJAX 库为此任务提供 $find() 函数：

var ae = $find("ae");

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

ae.OnClick();

下面是完整的客户端 JavaScript 代码，该代码在页面完全加载后，将模拟单击面板上的单击，请注意，一旦页面和所有包含的 JavaScript 库加载完毕，ASP.NET AJAX 就会调用 pageLoad() 函数名称。

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

动画会立即运行，无需鼠标单击（单击即可查看完全大小的图像）