當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

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

發布時間：2025/3/8 asp.net 39 豆豆

生活随笔收集整理的這篇文章主要介紹了使用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">
 </div>
</div>
</form>

<script language="javascript" type="text/javascript">

</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进行网页动画编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。