一、引言 微軟最新推出的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兩個(gè)基本部分組成。此外，還提供了一個(gè)更新一些的CTP（社區(qū)測(cè)試試用）版本，下載頁(yè)面如下圖1所示：

圖1：下載示例程序所用的CTP版本附加腳本庫(kù)

聲稱為“國(guó)內(nèi)第一本Atlas圖書(shū)”的《Atlas基礎(chǔ)教程—ASP.NET Ajax快速開(kāi)發(fā)》（美：Laurence Moroney著；陳黎夫譯；2006年11月，人民郵電出版社）第九章“使用AtlasUIGlitz腳本庫(kù)”中，對(duì)于ASP.NET AJAX框架（原名為Atlas）提供的附加腳本庫(kù)提供的動(dòng)畫(huà)功能作了較好的展示，但是新版本的ASP.NET AJAX框架1.0一問(wèn)世，這一章中內(nèi)容立即變得“面目全非”。第一，據(jù)本人分析，原文中的所有案例都是基于Atlas腳本聲明性編程，而在新框架中這種 方式已經(jīng)不再推薦使用；第二，原來(lái)的腳本庫(kù)名已改（AtlasUIGlitz.js→PreviewGlitz.js，新文件存儲(chǔ)于程序集 “Microsoft.Web.Preview.dll”中），且功能上與原先也有所不同。 本文基于目前最新框架的CTP版本，對(duì)它提供的淡入淡出動(dòng)畫(huà)功能在網(wǎng)頁(yè)編程中進(jìn)行試驗(yàn)。注意，在此，我們所使用的編程方式為JavaScript腳本編程方式。 【注意】本文示例試驗(yàn)環(huán)境為：Windows XP Professional＋VS2005＋ASP.NET 2.0 AJAX Extensions 1.0（見(jiàn)上圖1）＋ASP.NET AJAX Futures January CTP；恕不贅述。 二、創(chuàng)建淡入淡出動(dòng)畫(huà)示例 伴隨上面的CTP版本的程序集“Microsoft.Web.Preview.dll”提供了源碼形式的幾個(gè).js腳本文件，但原文件把幾百行的腳 本集中到了一行內(nèi)（不知什么原因？），且沒(méi)有任何注釋，可讀性極差。因?yàn)楸疚挠懻摰摹暗氲觥眲?dòng)畫(huà)效果部分在原文中比較簡(jiǎn)短，所以，我干脆整理了一下， 列舉如下：

//---------------------------------------------------------- // Copyright (C) Microsoft Corporation. All rights reserved. //---------------------------------------------------------- // PreviewGlitz.js Type.registerNamespace("Sys.Preview.UI.Effects"); //……………………（省略其它內(nèi)容） //--------------------------------------------------- //FadeAnimation動(dòng)畫(huà)功能 //--------------------------------------------------- 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(){ //初始化基類，以便調(diào)用基類中的功能 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}] }; //注冊(cè)這個(gè)新類 Sys.Preview.UI.Effects.FadeAnimation.registerClass("Sys.Preview.UI.Effects.FadeAnimation", Sys.Preview.UI.Effects.Animation) //下面這一句是必須的 if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();

(一)構(gòu)建示例頁(yè)面 啟動(dòng)Visual Studio 2005，選擇“文件→新建網(wǎng)站…”，然后選擇“ASP.NET AJAX CTP-Enabled Web Site”模板，命名工程為“AjaxFadeAnimation”，并選擇C#作為編程語(yǔ)言（如圖2所示），最后點(diǎn)擊OK。

圖2：使用“ASP.NET AJAX CTP-Enabled Web Site”模板快速創(chuàng)建AJAX應(yīng)用程序

注意，系統(tǒng)自動(dòng)在網(wǎng)站根目錄下，創(chuàng)建了一個(gè)Bin子目錄，并在該目錄下提供了一個(gè)“Microsoft.Web.Preview.dll”文件。而 且還注意到，系統(tǒng)自動(dòng)為Default.aspx頁(yè)面添加了一個(gè)ScriptManager服務(wù)器控件。這個(gè)控件是整個(gè)ASP.NET AJAX 1.0框架的核心，它管理著客戶端運(yùn)行時(shí)所需要的用于實(shí)現(xiàn)客戶端功能的各種JavaScript腳本庫(kù)的部署。而且，在新版本的框架中，這個(gè)控件的功能更 為強(qiáng)大，使用更為簡(jiǎn)易。還應(yīng)特別注意，這時(shí)系統(tǒng)也自動(dòng)地添加了對(duì)于System.Web.Extensions.dll程序集的引用，但是，沒(méi)有顯式地列 舉于Bin子目錄下。然后，把Default.aspx頁(yè)面修改成如下圖3所示形式：

圖3：設(shè)計(jì)調(diào)用Web服務(wù)的客戶端Web頁(yè)面

上圖中，我們簡(jiǎn)單地加入了兩個(gè)HTML Input Button控件和一個(gè)DIV對(duì)象（下部的黃色大矩形）。我們的目的是，運(yùn)行網(wǎng)頁(yè)后，點(diǎn)擊這兩個(gè)不同的按鈕實(shí)現(xiàn)下部DIV對(duì)象的淡入淡出動(dòng)畫(huà)效果展示。 下面是這個(gè)頁(yè)面相應(yīng)的源碼形式： <%@ 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>無(wú)標(biāo)題頁(yè)</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();//腳本系統(tǒng)初始化

//取得指向動(dòng)畫(huà)目標(biāo)（作為一個(gè)Sys.UI.Control對(duì)象）的句柄
var domElementVar = new Sys.UI.Control( $get("animationTarget")? );
function FadeUsingFutures( fadeOut )
{
//創(chuàng)建FadeAnimation的一個(gè)實(shí)例
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 ;

//隱藏/顯示相應(yīng)的按鈕
$get("btnFadeOutAnimate").style.display =? fadeOut? ? "none":"block";
$get("btnFadeInAnimate").style.display? =? fadeOut? ? "block":"none";
//設(shè)置動(dòng)畫(huà)持續(xù)時(shí)間
fadeAnimation.set_duration( 0.3 );
//設(shè)置動(dòng)畫(huà)目標(biāo)為一個(gè)Sys.UI.Control對(duì)象
fadeAnimation.set_target( domElementVar );
//設(shè)置動(dòng)畫(huà)效果( FadeIn / FadeOut )
fadeAnimation.set_effect( fadeEffect );
//設(shè)置最大不透明值
fadeAnimation.setValue( 70 );
//播放動(dòng)畫(huà)
fadeAnimation.play();
}
// -->
</script>
</body>
</html> 顯然，我們?cè)谶@里又添加了許多內(nèi)容。首先，請(qǐng)注意下面一塊代碼：

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

根據(jù)框架及從網(wǎng)上查詢的其它資料，ScriptManager控件必須位于一個(gè)< form>塊內(nèi)，否則必定出現(xiàn)錯(cuò)誤（忘記了，但我試驗(yàn)過(guò)！）。其次：

<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" />

形式；否則，將會(huì)出現(xiàn)類似如下所示錯(cuò)誤提示：

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'

以上都是新框架規(guī)定使用的“死格式”，在此不贅述。 在接下來(lái)的javascript腳本中，對(duì)應(yīng)新框架建議下的JavaScript腳本編程，已經(jīng)加上了詳細(xì)注釋，恕不再多加解釋（請(qǐng)參考本文開(kāi)始提供的源.js文件源碼）。 沒(méi)有問(wèn)題，則運(yùn)行結(jié)果如下圖4所示：

圖4：示例網(wǎng)頁(yè)運(yùn)行結(jié)果快照

三、小結(jié) 新框架剛出，且參考資料實(shí)在少極。所以，本人基于原框架提供的資源（似乎沒(méi)有提供直接的這方面示例，至少在最新框架中沒(méi)有提供）和親自試驗(yàn)，做了本文中的小示例演示。僅供各位參考。













本文轉(zhuǎn)自朱先忠老師51CTO博客，原文鏈接：http://blog.51cto.com/zhuxianzhong/59830?，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。