使用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：示例网页运行结果快照

三、小结

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

本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/59830 ，如需转载请自行联系原作者

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料