开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用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所示:
1315420.jpg
图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。
1315421.jpg
图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所示形式:
1315422.jpg
图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所示:
1315423.jpg
图4:示例网页运行结果快照
三、小结
新框架刚出,且参考资料实在少极。所以,本人基于原框架提供的资源(似乎没有提供直接的这方面示例,至少在最新框架中没有提供)和亲自试验,做了本文中的小示例演示。仅供各位参考。














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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET MVC RC 2 发布
今天发布了ASP.NET MVC RC2,希望不要像上一个版本一样有BUG之后重新再发布 下载: http://www.asp.net/mvc/ 源码: http://aspnet.codeplex.
634 0
+关注
10137
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载