使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程

一、引言

微软最新推出的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" 
    
   
  
  
  
  
  
  
  
  

   
   
   
    < 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; 
    
   
  
  
  
  
  
  
  
  

   
   
   
    < 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; 
    
   
  
  
  
  
  
  
  
  

   
   
   
    < Assembly="Microsoft.Web.Preview">
    
     < Assembly="Microsoft.Web.Preview"> background-color: #ffcc00">
     
   
   
   
&nbsp;</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>
    
   
  
  
  
  

显然，我们在这里又添加了许多内容。首先，请注意下面一块代码：

< Assembly="Microsoft.Web.Preview"> < Assembly="Microsoft.Web.Preview"> <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>

根据框架及从网上查询的其它资料，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：示例网页运行结果快照

三、小结

新框架刚出，且参考资料实在少极。所以，本人基于原框架提供的资源（似乎没有提供直接的这方面示例，至少在最新框架中没有提供）和亲自试验，做了本文中的小示例演示。仅供各位参考。

本文出自 “青峰” 博客，转载请与作者联系！