使用客户端代码更改动画

2021-10-20

Christian Wenz

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

ASP.NET AJAX Control Toolkit 中的Animation 控件不仅仅是一个控件，它是一个可向控件添加动画的框架。还可以用自定义的客户端JavaScript 代码来更改动画。

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

概述

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>

实际动画是由一个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代码来提供该控件要使用的动画。

就AnimationExtender 的服务器API 来说，尚没有一个容易的方法来将动画赋予扩展器。

然而，扩展器确实公开了几个动画读写方法，它们可以读写各种事件（ OnClick、 OnLoad 等等）触发的动画。

下面是几个例子：

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>

动画立即运行，不需要鼠标单击（而且使用了很少的标记）

下一篇教程

通过

使用客户端代码更改动画

概述

步骤

其他资源