使用ASP.NET AJAX 1.0框架PreviewGlitz进行网页动画编程(1)
发表于：2007-06-11来源：作者：点击数：
标签：
【51CTO.com独家特 稿】一、引言 微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为http://ajax.asp.net/downloads/default.aspx ），此框架由ASP.NET 2.0 AJAX Extensions 1.0和ASP.NET AJAX Control Toolkit两个基本部分组成。此外，还提供了一个更新
【51CTO.com独家特稿】一、引言
微软最新推出的AJAX框架为ASP.NET AJAX 1.0（下载地址为http://ajax.asp.net/downloads/default.aspx），此框架由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();
|
【文章相关内容】
第一页：引言
第二页：创建淡入淡出动画示例
第三页：源代码和运行结果
模板
教程
环境
性能
功能
管理
