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="return false;" Text="Click Here"/>
<!-- flyout面板 -->
<div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #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: solid 1px #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="return false;" Text="X" ToolTip="Close"
Style
="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" />
</div>
<div>
<p>
AnimationExtender 是一个简单的动画制作控件， 它可以很方便的在网页上制作简单的动画效果，非常的fashion！！！。 它的原理是： 1.先设置“目标控件(target control)“ ; 2.当“目标控件(target control)“ 触发事件 （如：OnLoad, OnClick, OnMouseOver, OnMouseOut） 时，AnimationExtender便执行它的动画代码。
</p>
<br />
</div>
</div>
<script type="text/javascript" language="javascript">
... // 把top控件定于bottom控件之上，并把他们的大小设置成一样。
function Cover(bottom, top, ignoreSize) ...
{
var location = 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>