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

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

它的原理是：

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

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

下面看一个它的例子

<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<!--“打开”按钮-->
<asp:ButtonID="btnInfo"runat="server"OnClientClick="returnfalse;"Text="ClickHere"/>

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

<!--Info面板-->
<divid="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;">
<divid="btnCloseParent"style="float:right;opacity:0;progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
<asp:LinkButtonid="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控件之上，并把他们的大小设置成一样。
functionCover(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:AnimationExtenderid="OpenAnimation"runat="server"TargetControlID="btnInfo">
<Animations>
<OnClick>
<Sequence>
<%...--1.隐藏“打开”按钮--%>
<EnableActionEnabled="false"/>

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

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

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

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

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

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

</form>

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