基于ASP.NET AJAX低级动画技术开发Web 2.0应用程序

来源：作者：IT168 朱先忠出处：巧巧读书 2007-11-04 进入讨论组

三、创建淡入/淡出动画效果
借助于FadeAnimation动画类，我们可以实现使页面中的某个层的不透明度逐渐变为１（淡入）或变为０（淡出）。

请启动Visual Studio 2005，然后选择菜单项“文件|新建网站…”，使用模板“ASP.NET AJAX CTP-Enabled网站”创建一个新的网站，并命名工程为GlitzTest（选择Visual C#作为内置语言）。此后，系统应该自动地添加对必要的程序集—System.Web.Extension.dll（你无法直接在bin目录下看到它）和Microsoft.Web.Preview.dll的参考。

    此外，你会注意到一个ScriptManager服务器控件自动地添加到页面中。注意，这个服务器控件作为整个ASP.NET AJAX框架的控制中心。

    由于本文中的动画类都存在于一个外部库中，所以，我们必须以手工方式把文件PreviewGlitz.js包含到任何使用它们的网页的<asp:ScriptManager>控件的<Scripts>子节下面。此外，我们还要以同样方式手工包含文件—PreviewScript.js（这个文件是整个Futures CTP的核心）。此外，为了简单起见，我把本文中所有示例页面纳入到一个示例工程GlitzTest下。
然后，右击工程GlitzTest添加一个新网页并命名为AjaxFadeAnimation.aspx。稍试修改，你会得到如下面图２所示的设计时刻快照。

图2—淡入/淡出动画演示网页设计时刻快照。
下面，首先让我们来看这个网页相应的HTML代码部分。

<form id="form1" runat="server"> 
<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> 
<br /> 
<div
class="h1">Fading in and out Animation Demo</div><br />


<input id="btnFadeOutAnimate" type="button" value="Fade Out"
style="width: 155px; height: 37px" language="javascript" onclick="return
FadeUsingFutures(true)" /> 
<input id="btnFadeInAnimate" style="width:
135px; height: 37px" type="button" value="Fade In" language="javascript"
onclick="return FadeUsingFutures(false)" /><br /> 
<div
id="animationTarget" style="width: 207px; height: 252px; background-color:
#ffcc00"> 
<img src="img/lushan_1.jpg" style="width: 208px; height:
258px;" /> 
</div> 
</form>

首先，关于</asp:ScriptManager>节中的内容前面已经提过。接下来，我们定义了两个按钮（相应的id值分别为btnFadeOutAnimate和btnFadeInAnimate），并且分别把它们与自己的onclick事件处理器关联起来。后面跟着的是一个<img>标签，用于测试淡入/淡出效果之用。读者可能已经猜出其中的关键在于这两个事件处理器函数。不错！下面就让我们对其进行深入的分析。

<script language="javascript" type="text/javascript"> 
var domElementVar = new Sys.UI.Control( $get("animationTarget") ); 
var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation(); 
fadeAnimation.set_duration( 0.3 ); 
fadeAnimation.set_target( domElementVar ); 
fadeAnimation.setValue( 70 ); 
fadeAnimation.set_fps(45); 
function FadeUsingFutures( fadeOut ) 
{ 
var fadeEffect = fadeOut ? 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_effect( fadeEffect ); 
fadeAnimation.play(); 
} 
</script>

在这段代码中，我们首先获取一个到动画目标的句柄（或指针）。然后，创建动画类FadeAnimation的一个实例fadeAnimation。然后，设置这个实例的相应的常用动画参数，例如持续时间，这个动画实例针对的目标对象，最大不透明度，播放速率（帧/秒）等。至此，我们为动画播放作好了全面的准备。然后，当用户点击按钮“Fade Out”（或“Fade In”）时，事件处理器函数FadeUsingFutures被激发，根据传入参数确定播放类型，最后正式进行动画播放。URL查看 http://www.qqread.com/ajax/f379699.html