动画制作控件AnimationExtender-控件新闻-慧都网

动画制作控件AnimationExtender

翻译|其它|编辑：郝浩|2007-08-27 10:03:28.000|阅读 1159 次

概述：

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

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>

        <%...-- 点击“打开”按钮，触发一下动画--%>
        <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>