altas(ajax)控件(三)：动画制作控件AnimationExtender

AnimationExtender 是一个简单的动画制作控件，它可以很方便的在网页上制作简单的动画效果，非常的fashion！！！。

它的原理是：

1.先设置“目标控件(target control)“ ;

2.当“目标控件(target control)“ 触发事件（如：OnLoad, OnClick, OnMouseOver, OnMouseOut）时，AnimationExtender便执行它的动画代码。

下面看一个它的例子

< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" />
<!-- “打开”按钮 -->
< asp:Button ID ="btnInfo" runat ="server" OnClientClick ="returnfalse;" Text ="ClickHere" />

<!-- flyout面板 -->
< div id ="flyout" style ="display:none;overflow:hidden;z-index:2;background-color:#FFFFFF;border:solid1px#D0D0D0;" ></ div >

<!-- Info面板 -->
< div id ="info" style ="display:none;width:250px;z-index:2;opacity:0;progid:DXImageTransform.Microsoft.Alpha(opacity=0);font-size:12px;border:solid1px#CCCCCC;background-color:#FFFFFF;padding:5px;" >
< div id ="btnCloseParent" style ="float:right;opacity:0;progid:DXImageTransform.Microsoft.Alpha(opacity=0);" >
< asp:LinkButton id ="btnClose" runat ="server" OnClientClick ="returnfalse;" Text ="X" ToolTip ="Close"
Style ="background-color:#666666;color:#FFFFFF;text-align:center;font-weight:bold;text-decoration:none;border:outsetthin#FFFFFF;padding:5px;" />
</ div >
< div >
< p >
AnimationExtender是一个简单的动画制作控件，
它可以很方便的在网页上制作简单的动画效果，非常的fashion！！！。
它的原理是：
1.先设置“目标控件(targetcontrol)“;
2.当“目标控件(targetcontrol)“触发事件
（如：OnLoad,OnClick,OnMouseOver,OnMouseOut）
时，AnimationExtender便执行它的动画代码。
</ p >
< br />
</ div >
</ div >

< scripttype = " text/javascript " language = " javascript " > ...
// 把top控件定于bottom控件之上，并把他们的大小设置成一样。
function Cover(bottom,top,ignoreSize)... ... {
varlocation=Sys.UI.DomElement.getLocation(bottom);
top.style.position='absolute';
top.style.top=location.y+'px';
top.style.left=location.x+'px';
if(!ignoreSize)......{
top.style.height=bottom.offsetHeight+'px';
top.style.width=bottom.offsetWidth+'px';
}
}
</ script >

< %...-- 点击“打开”按钮，触发一下动画--% >
< cc1:AnimationExtender id ="OpenAnimation" runat ="server" TargetControlID ="btnInfo" >
< Animations >
< OnClick >
< Sequence >
< %...-- 1.隐藏“打开”按钮--% >
< EnableAction Enabled ="false" />

< %...-- 2.定位flyout面板和“打开(btnInfo)”按钮一样，大小一样--% >
< ScriptAction Script ="Cover($get('ctl00_SampleContent_btnInfo'),$get('flyout'));" /> ...
< %-- 3.显示flyout面板--% >
< StyleAction AnimationTarget ="flyout" Attribute ="display" Value ="block" />

< %-- 4.移动flyout面板--% >
< Parallel AnimationTarget ="flyout" Duration =".3" Fps ="25" >< %-- 时间0.3秒，帧数25--% >
< Move Horizontal ="150" Vertical ="-50" />< %-- 水平移动150，垂直移动-50--% >
< Resize Width ="260" Height ="280" />< %-- 宽度 =260，高度=280 --% >
< Color PropertyKey ="backgroundColor" StartValue ="#AAAAAA" EndValue ="#FFFFFF" />< %-- 开始颜色 =AAAAAA，结束颜色=FFFFFF --% >
</ Parallel >

< %-- 5.设置info面板，显示info面板，并装入info面板，隐藏flyout面板--% >
< ScriptAction Script ="Cover($get('flyout'),$get('info'),true);" />
< StyleAction AnimationTarget ="info" Attribute ="display" Value ="block" />
< FadeIn AnimationTarget ="info" Duration =".2" />
< StyleAction AnimationTarget ="flyout" Attribute ="display" Value ="none" />

< %-- 6.闪烁文字和边框，装入“关闭”按钮--% >
< Parallel AnimationTarget ="info" Duration =".5" >
< Color PropertyKey ="color" StartValue ="#666666" EndValue ="#FF0000" />
< Color PropertyKey ="borderColor" StartValue ="#666666" EndValue ="#FF0000" />
</ Parallel >
< Parallel AnimationTarget ="info" Duration =".5" >
< Color PropertyKey ="color" StartValue ="#FF0000" EndValue ="#666666" />
< Color PropertyKey ="borderColor" StartValue ="#FF0000" EndValue ="#666666" />
< FadeIn AnimationTarget ="btnCloseParent" MaximumOpacity =".9" />
</ Parallel >
</ Sequence >
</ OnClick >
</ Animations >
</ cc1:AnimationExtender >
< %-- 点击“关闭”按钮，触发一下动画--% >
< cc1:AnimationExtender id ="CloseAnimation" runat ="server" TargetControlID ="btnClose" >
< Animations >
< OnClick >
< Sequence AnimationTarget ="info" >
< %-- 逐步隐藏info面板--% >
< StyleAction Attribute ="overflow" Value ="hidden" />
< Parallel Duration =".3" Fps ="15" >
< Scale ScaleFactor ="0.05" Center ="true" ScaleFont ="true" FontUnit ="px" />
< FadeOut />
</ Parallel >

< %-- 重置“关闭”按钮，以便下次调用--% >
< StyleAction Attribute ="display" Value ="none" />
< StyleAction Attribute ="width" Value ="250px" />
< StyleAction Attribute ="height" Value ="" />
< StyleAction Attribute ="fontSize" Value ="12px" />
< OpacityAction AnimationTarget ="btnCloseParent" Opacity ="0" />

< %-- 显示“打开”按钮--% >
< EnableAction AnimationTarget ="btnInfo" Enabled ="true" />
</ Sequence >
</ OnClick >
< OnMouseOver >
< Color Duration =".2" PropertyKey ="color" StartValue ="#FFFFFF" EndValue ="#FF0000" />
</ OnMouseOver >
< OnMouseOut >
< Color Duration =".2" PropertyKey ="color" StartValue ="#FF0000" EndValue ="#FFFFFF" />
</ OnMouseOut >
</ Animations >
</ cc1:AnimationExtender >

</form>

效果地址： http://asp.net/AJAX/Control-Toolkit/Live/Animation/Animation.aspx