使用 Client-Side 代码更改动画 （VB）

作者 ：克里斯蒂安·温茨

下载 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>

实际动画由 HTML 按钮启动：

<input type="button" id="Button1" runat="server" value="Launch Animation" />

然后，将AnimationExtender添加到页面中，并提供ID、TargetControlID属性和必要的runat="server"：

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

请注意，在AnimationExtender控件内没有<Animations>节点。 自定义 JavaScript 代码用于提供要与控件一起使用的动画。

与服务器 API AnimationExtender一样，目前还没有简单的方法将动画分配给扩展程序。 但是，扩展程序确实公开了几种方法来读取和写入注册到各种事件（OnClickOnLoad等等）的动画。 下面是一些示例：

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

函数的返回值 get_*() 的格式和函数的参数 set_*() 的格式是 JSON 字符串，提供 XML 标记的对象表示形式。 目前，无法传入对象，但可以从给定动画（get_OnXXXBehavior() 方法）读取对象。

下面是一个 JSON 字符串（没有分隔引号并正确设置格式）表示由按钮触发的动画，但通过调整面板大小并同时将其淡出来对面板进行动画处理：

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

以下 JavaScript 代码将此 JSON 描述分配给 OnClick 当前扩展程序动画并运行它：

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

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