一、引言
微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为
[url]http://ajax.asp.net/downloads/default.aspx[/url]），此框架由ASP.NET 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外，还提供了一个更新一些的CTP（社区测试试用）版本，下载页面如下图1所示：
 |
| 图1：下载示例程序所用的CTP版本附加脚本库 |
声称为“国内第一本Atlas图书”的《Atlas基础教程—ASP.NET Ajax快速开发》（美：Laurence Moroney著；陈黎夫译；2006年11月，人民邮电出版社）第九章“使用AtlasUIGlitz脚本库”中，对于ASP.NET AJAX框架（原名为Atlas）提供的附加脚本库提供的动画功能作了较好的展示，但是新版本的ASP.NET AJAX框架1.0一问世，这一章中内容立即变得“面目全非”。第一，据本人分析，原文中的所有案例都是基于Atlas脚本声明性编程，而在新框架中这种 方式已经不再推荐使用；第二，原来的脚本库名已改（AtlasUIGlitz.js→PreviewGlitz.js，新文件存储于程序集 “Microsoft.Web.Preview.dll”中），且功能上与原先也有所不同。
本文基于目前最新框架的CTP版本，对它提供的淡入淡出动画功能在网页编程中进行试验。注意，在此，我们所使用的编程方式为JavaScript脚本编程方式。
【注意】本文示例试验环境为：Windows XP Professional＋VS2005＋ASP.NET 2.0 AJAX Extensions 1.0（见上图1）＋ASP.NET AJAX Futures January CTP；恕不赘述。
二、创建淡入淡出动画示例
伴随上面的CTP版本的程序集“Microsoft.Web.Preview.dll”提供了源码形式的几个.js脚本文件，但原文件把几百行的脚 本集中到了一行内（不知什么原因？），且没有任何注释，可读性极差。因为本文讨论的“淡入淡出”动画效果部分在原文中比较简短，所以，我干脆整理了一下， 列举如下：
|
//----------------------------------------------------------
// Copyright (C) Microsoft Corporation. All rights reserved. //---------------------------------------------------------- // PreviewGlitz.js Type.registerNamespace("Sys.Preview.UI.Effects"); //……………………（省略其它内容） //--------------------------------------------------- //FadeAnimation动画功能 //--------------------------------------------------- Sys.Preview.UI.Effects.FadeEffect=function(){ throw Error.invalidOperation() }; Sys.Preview.UI.Effects.FadeEffect.prototype={ FadeIn:0,FadeOut:1 }; Sys.Preview.UI.Effects.FadeEffect.registerEnum("Sys.Preview.UI.Effects.FadeEffect"); Sys.Preview.UI.Effects.FadeAnimation=function(){ //初始化基类，以便调用基类中的功能 Sys.Preview.UI.Effects.FadeAnimation.initializeBase(this) }; //使用javascript prototype模型功能定义此类中的方法及属性 Sys.Preview.UI.Effects.FadeAnimation.prototype={ _effect:Sys.Preview.UI.Effects.FadeEffect.FadeIn,get_effect:function(){ return this._effect}, set_effect:function(a){ this._effect=a}, getAnimatedValue:function(c){ var a=0,b=1; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut){ a=1; b=0 } return Sys.Preview.UI.Effects.Glitz.interpolate(a,b,c) }, onStart:function(){ var a=0; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut) a=1; this.setValue(a)}, onEnd:function(){ var a=1; if(this._effect===Sys.Preview.UI.Effects.FadeEffect.FadeOut) a=0; this.setValue(a)}, setValue:function(a){ Sys.Preview.UI.Effects.Glitz.setElementOpacity(this.get_target().get_element(),a) } };
Sys.Preview.UI.Effects.FadeAnimation.descriptor={
properties:[{ name:"effect",type:Sys.Preview.UI.Effects.FadeEffect}] }; //注册这个新类 Sys.Preview.UI.Effects.FadeAnimation.registerClass("Sys.Preview.UI.Effects.FadeAnimation",
Sys.Preview.UI.Effects.Animation)
//下面这一句是必须的 if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded(); |
(一)构建示例页面
启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX CTP-Enabled Web Site”模板，命名工程为“AjaxFadeAnimation”，并选择C#作为编程语言（如图2所示），最后点击OK。
|
| 图2：使用“ASP.NET AJAX CTP-Enabled Web Site”模板快速创建AJAX应用程序 |
注意，系统自动在网站根目录下，创建了一个Bin子目录，并在该目录下提供了一个“Microsoft.Web.Preview.dll”文件。而 且还注意到，系统自动为Default.aspx页面添加了一个ScriptManager服务器控件。这个控件是整个ASP.NET AJAX 1.0框架的核心，它管理着客户端运行时所需要的用于实现客户端功能的各种JavaScript脚本库的部署。而且，在新版本的框架中，这个控件的功能更 为强大，使用更为简易。还应特别注意，这时系统也自动地添加了对于System.Web.Extensions.dll程序集的引用，但是，没有显式地列 举于Bin子目录下。然后，把Default.aspx页面修改成如下图3所示形式：
 |
| 图3：设计调用Web服务的客户端Web页面 |
上图中，我们简单地加入了两个HTML Input Button控件和一个DIV对象（下部的黄色大矩形）。我们的目的是，运行网页后，点击这两个不同的按钮实现下部DIV对象的淡入淡出动画效果展示。
下面是这个页面相应的源码形式：
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="Default2" %>
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> Inherits="Default2" %>
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> "
[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"><html xmlns="
[url]http://www.w3.org/1999/xhtml[/url]" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<input id="btnFadeOutAnimate" type="button" value="Fade Out"
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewGlitz.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<input id="btnFadeOutAnimate" type="button" value="Fade Out"
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> style="width: 155px; height: 37px" language="javascript"
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> FadeUsingFutures(true)" />
<input id="btnFadeInAnimate" style="width: 135px;
<input id="btnFadeInAnimate" style="width: 135px;
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> height: 37px" type="button" value="Fade In" language="javascript"
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> FadeUsingFutures(false)" /><br />
<div id="animationTarget" style="width: 459px; height: 312px;
<div id="animationTarget" style="width: 459px; height: 312px;
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> background-color: #ffcc00">
</div>
</div>
</form>
<script language="javascript" type="text/javascript">
<!--
Sys.Application.initialize();//脚本系统初始化
//取得指向动画目标（作为一个Sys.UI.Control对象）的句柄
var domElementVar = new Sys.UI.Control( $get("animationTarget") );
function FadeUsingFutures( fadeOut )
{
//创建FadeAnimation的一个实例
var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
//决定是淡入还是淡出
var fadeEffect = fadeOut ?
</div>
</div>
</form>
<script language="javascript" type="text/javascript">
<!--
Sys.Application.initialize();//脚本系统初始化
//取得指向动画目标（作为一个Sys.UI.Control对象）的句柄
var domElementVar = new Sys.UI.Control( $get("animationTarget") );
function FadeUsingFutures( fadeOut )
{
//创建FadeAnimation的一个实例
var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
//决定是淡入还是淡出
var fadeEffect = fadeOut ?
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> Sys.Preview.UI.Effects.FadeEffect.FadeOut : Sys.Preview.UI.Effects.FadeEffect.FadeIn ;
//隐藏/显示相应的按钮
$get("btnFadeOutAnimate").style.display = fadeOut ? "none":"block";
$get("btnFadeInAnimate").style.display = fadeOut ? "block":"none";
//设置动画持续时间
fadeAnimation.set_duration( 0.3 );
//设置动画目标为一个Sys.UI.Control对象
fadeAnimation.set_target( domElementVar );
//设置动画效果( FadeIn / FadeOut )
fadeAnimation.set_effect( fadeEffect );
//设置最大不透明值
fadeAnimation.setValue( 70 );
//播放动画
fadeAnimation.play();
}
// -->
</script>
</body>
</html>
//隐藏/显示相应的按钮
$get("btnFadeOutAnimate").style.display = fadeOut ? "none":"block";
$get("btnFadeInAnimate").style.display = fadeOut ? "block":"none";
//设置动画持续时间
fadeAnimation.set_duration( 0.3 );
//设置动画目标为一个Sys.UI.Control对象
fadeAnimation.set_target( domElementVar );
//设置动画效果( FadeIn / FadeOut )
fadeAnimation.set_effect( fadeEffect );
//设置最大不透明值
fadeAnimation.setValue( 70 );
//播放动画
fadeAnimation.play();
}
// -->
</script>
</body>
</html>
显然，我们在这里又添加了许多内容。首先，请注意下面一块代码：
< Assembly="Microsoft.Web.Preview">< Assembly="Microsoft.Web.Preview"> <form id="form1" runat="server"> |
根据框架及从网上查询的其它资料，ScriptManager控件必须位于一个< form>块内，否则必定出现错误（忘记了，但我试验过！）。其次：
|
<asp:ScriptReference Assembly="Microsoft.Web.Preview"
Name="PreviewGlitz.js" />
|
不能改为：
|
< Assembly="Microsoft.Web.Preview"> <asp:ScriptReference Assembly="Microsoft.Web.Preview"
< Assembly="Microsoft.Web.Preview">Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" />
|
形式；否则，将会出现类似如下所示错误提示：
|
1.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name
'Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js'
2.Assembly 'Microsoft.Web.Preview, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35' does not contain a Web resource with name
'Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js'
|
以上都是新框架规定使用的“死格式”，在此不赘述。
在接下来的javascript脚本中，对应新框架建议下的JavaScript脚本编程，已经加上了详细注释，恕不再多加解释（请参考本文开始提供的源.js文件源码）。
没有问题，则运行结果如下图4所示：
 |
| 图4：示例网页运行结果快照 |
三、小结
新框架刚出，且参考资料实在少极。所以，本人基于原框架提供的资源（似乎没有提供直接的这方面示例，至少在最新框架中没有提供）和亲自试验，做了本文中的小示例演示。仅供各位参考。
本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/59830
，如需转载请自行联系原作者
