Animation

Animation 示例

Animation 不仅是一个 ASP.Net AJAX 控件，它是一个可以添加到你的 Web 页面中去；简单的操作，就可以使你的页面具有动画的效果。

下面的例子，展示了在页面上显示动画的四个主要方面：

移动（在显示 Panel 控件的时候，以移动的方式显示到其应该停放的位置）
大小的改变（在例子中呈现由小变大的效果）
渐变（在例子中我们可以看到 Panel 呈现出现的渐变效果）
颜色（在例子中，Panel 的字体可以清楚地看到其颜色的变化）

通过组合基本的动画动作，你可以很轻松的创建很牛B的动画效果，也可以轻松的将他们使用到客户端脚本代码，服务器端代码，或者 XML 标识中。

<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="btnInfo">
<Animations>
    <OnClick>
        <Sequence>
           <%-- Disable the button --%>
            <EnableAction Enabled="false" /> 
           <%-- Show the flyout --%>
            <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
                <Move Horizontal="150" Vertical="-50" />
                <Resize Height="260" Width="280" />
                <Color AnimationTarget="flyout" PropertyKey="backgroundColor"
                        StartValue="#AAAAAA" EndValue="#FFFFFF" />
            </Parallel>
          <%-- Fade in the text --%> 
            <FadeIn AnimationTarget="info" Duration=".2"/>
          <%-- Cycle the text and border color to red and back --%>
            <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>
</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="btnClose">
<Animations>
    <OnClick>
        <Sequence AnimationTarget="info">
          <%-- Scale the flyout down to 5% to make it disappear --%>
            <Parallel Duration=".3" Fps="15">
                <Scale ScaleFactor="0.05" Center="true"
                        ScaleFont="true" FontUnit="px" />
                <FadeOut />
            </Parallel>
          <%-- Reset the styles on the info box --%>
            <StyleAction Attribute="display" Value="none"/>
            <StyleAction Attribute="width" Value="250px"/>
            <StyleAction Attribute="height" Value=""/>
            <StyleAction Attribute="fontSize" Value="12px"/>
          <%-- Re-enable the button --%>
            <EnableAction Enabled="true"
                    AnimationTarget="btnInfo" />
        </Sequence>
    </OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

Animation 控件属性将被初始化如下面的示例代码所示，斜体属性为可选属性

<ajaxToolkit:AnimationExtender ID="ae"
  runat="server" TargetControlID="ctrl">
    <Animations>
        <OnLoad> ... </OnLoad>
        <OnClick> ... </OnClick>
        <OnMouseOver> ... </OnMouseOver>
        <OnMouseOut> ... </OnMouseOut>
        <OnHoverOver> ... </OnHoverOver>
        <OnHoverOut> ... </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>

TargetControlID - 将有事件呈现动画效果的控件 ID
OnLoad - 当页面被显示的时候产生的动画效果
OnClick - 当目标控件被点击的时候产生的动画效果
OnMouseOver - 当鼠标在目标控件上移动的时候产生的动画效果
OnMouseOut - 当鼠标指针移出目标控件的区域的时候产生的动画效果
OnHoverOver - 当鼠标停留在目标控件的区域的时候产生的动画效果
OnHoverOut - 当鼠标停止在目标控件的区域停留的时候产生的动画效果