21.1 Animation动画控件 (征服ASP.NET 2.0 Ajax——Web开发技术详解 )

 ---------http://book.csdn.net/bookfiles/305/10030512730.shtml

本章主要介绍一些具备特殊效果的组件，如动画、阴影、边角锐化等，AjaxControlToolkit工具包的主要功能就是提供一些个性化的组件，让网站界面美观。

本章主要介绍的组件有：Animation、DropShadow、RoundedCorners、ToggleButton和UpdatePanelAnimation。

21.1  Animation动画控件

Animation是非常有特色的动画控件，适合网站的装饰，本节主要介绍在AJAX中包含的多种动画效果，并以实例的形式显示如何应用这些特效。

21.1.1  简介

Animation控件的使用非常特殊，在VS2005中设计此控件时，并没有提供智能提示功能，所以在学习Animation控件的时候，需要掌握各个控件的各个属性，因为每个小的动画控件，其属性又各不相同。

虽然Animation提供了很多小的动画控件，但这些控件在使用时，必须遵守代码清单21-1所示的语法。

代码清单21-1  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>

其中各属性的说明如下：

l  OnLoad：表示要触发的事件是加载页面时。

l  OnClick：表示要触发的事件是单击控件时。

l  OnMouseOver：表示要触发的事件是鼠标滑过时。

l  OnMouseOut：表示要触发的事件是鼠标移走时。

l  OnHoverOver：与OnMouseOver类似，对特定控件而言。

l  OnHoverOut：与OnMouseOut类似，对特定控件而言。

Animation的动画效果如图21-1所示。

图21-1  Animation的动画效果

21.2.2  多种动画控件的实例

在Animation控件内，又包含了多个小的控件，为了清晰的掌握这些控件的使用，本节将为常用的几个小动画控件，分别做一个实例。

1．变色颜色的动画效果

本例要实现的是当鼠标滑过Panel时，Panel的颜色发生变化，当鼠标移走时，Panel的颜色又发生了变化，这需要“Color Animation”。Color Animation动画的属性主要有4个：

l  Duration：动画显示效果的时间间隔。

l  PropertyKey：要设置的属性值。

l  StartValue：属性的开始值。

l  EndValue：属性的结束值。

本例的演示步骤如下：

（1）打开VS2005，新建一个AJAX Control Tookit网站，命名为“AjaxAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“AnimationSample_1.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。

（5）设计Panel的样式，源代码如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">

            Animation第一个实例</asp:Panel>

（6）在AnimationExtender内设计动画效果，本例实现的是颜色的变化，使用的是“Color Animation”。最终动画效果设计如清单21-2所示。

代码清单21-2Animation颜色变化的设计代码

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

        <Animations >

            <OnMouseOver>

                <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" />

            </OnMouseOver>

            <OnMouseOut>

                <Color Duration=".2"  PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" />

            </OnMouseOut>

</Animations>

（7）切换到设计视图，最终效果如图21-2所示。

图21-2  动画效果设计视图

（8）按“Ctrl+S”保存所有的设计。

（9）将此页设置为起始页，按F5运行程序，当鼠标滑过Panel时，可以发现Panel的颜色发生了变化。

2．淡入淡出合并的动画效果

淡入淡出效果是网站中经常看到的效果，本例使用“Fade Animation”来实现这样的效果，“Fade Animation”的属性主要有4个：

l  duration：动画效果的时间间隔。

l  Fps：帧/秒的显示速度。

l  maximumOpacity：最大透明度。

l  minimumOpacity：最小透明度。

本实例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“AnimationSample_2.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。

（5）设计Panel的样式，源代码如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="#E0E0E0" Height="104px" Width="249px">

Animation第二个实例</asp:Panel>

（6）在AnimationExtender内设计动画效果，本例实现的是淡入淡出效果，使用的是“Fade Animation”。最终动画效果设计如清单21-3所示。

代码清单21-3  Animation淡入淡出的设计代码

        <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

        <Animations >

        <OnMouseOver>

        <Fade  duration="1"  Fps="20" maximumOpacity="0.8"  minimumOpacity="0.2" />

       </OnMouseOver>

        <OnMouseOut >

        <Fade duration="1"   Fps="20" maximumOpacity="0.6"  minimumOpacity="0.2" />

        </OnMouseOut>

        </Animations>

        </ajaxToolkit:AnimationExtender>

（7）切换到设计视图，最终效果如图21-3所示。

图21-3  动画效果设计视图

（8）按“Ctrl+S”保存所有的设计。

（9）将此页设置为起始页，按F5运行程序，当鼠标滑过Panel时，可以发现Panel的淡入淡出效果。

3．淡入和淡出分开的动画效果

上一个实例中，当鼠标滑过时，其实是完成两步：淡入和淡出。通常在实际应用中，淡入和淡出是分开的。本例要演示的是当鼠标滑过时，实现淡入效果，当鼠标移出时，实现淡出效果。

此功能需要使用“FadeIn Animation”和“FadeOut Animation”，其中两个动画控件有着相同的属性，属性内容如下：

l  duration：动画效果的时间间隔。

l  Fps：帧/秒的显示速度。

l  maximumOpacity：最大透明度。

l  minimumOpacity：最小透明度。

实例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“AnimationSample_3.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。

（5）设计Panel的样式，源代码如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="#C0C0FF" Height="136px" Width="286px">

            Animation第三个实例</asp:Panel>

（6）在AnimationExtender内设计动画效果，本例实现的是淡入淡出效果，使用的是“FadeIn Animation”和“FadeOut Animation”。最终动画效果设计如清单21-4所示。

代码清单21-4  Animation淡入淡出分开的设计代码

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

        <Animations >

        <OnMouseOver>

        <FadeIn  duration="1"   Fps="20" maximumOpacity="0.8"  minimumOpacity="0.2" />

       </OnMouseOver>

        <OnMouseOut >

        <FadeOut duration="1"   Fps="20" maximumOpacity="0.6"  minimumOpacity="0.2" />

        </OnMouseOut>

        </Animations>

</ajaxToolkit:AnimationExtender>

（7）切换到设计视图，最终效果如图21-4所示。

图21-4  动画效果设计视图

（8）按“Ctrl+S”保存所有的设计。

（9）将此页设置为起始页，按F5运行程序，当鼠标滑过Panel时，可以发现Panel的淡入效果，当鼠标滑出时，可以看到Panel的淡出效果。

4．可伸缩的动画效果

本例要实现的效果是，当单击Panel时，变化Panel的高度和宽度。这需要使用“Resize Animation”动画控件。其属性主要有5个：

l  duration：动画效果的时间间隔。

l  Fps：帧/秒的显示速度。

l  width：变化后的宽度。

l  height：变化后的高度。

l  unit：高度和宽度的单位，通常为“px”。

本例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“AnimationSample_4.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个Panel。设置AnimationExtender的“TargetControlID”属性为Panel的ID“Panel1”。

（5）设计Panel的样式，源代码如下所示。

<asp:Panel ID="Panel1" runat="server" BackColor="Lavender" Height="121px" Width="322px">

            Animation第四个实例</asp:Panel>

（6）在AnimationExtender内设计动画效果，本例实现的是变化高宽效果，使用的是“Resize Animation”。最终动画效果设计如清单21-5所示。注意使用的事件是“OnClick”。

代码清单21-5  Animation变化高宽的设计代码

        <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1">

        <Animations >

        <OnClick>

        <Resize  duration=".1"   Fps="20" width="300" height="150"  unit="px" />

       </OnClick>

       </Animations>

        </ajaxToolkit:AnimationExtender>

（7）切换到设计视图，最终效果如图21-5所示。

图21-5  动画效果设计视图

（8）按“Ctrl+S”保存所有的设计。

（9）将此页设置为起始页，按F5运行程序，当单击Panel时，可以发现Panel的高度和宽度都发生了变化。

21.3.3  Action行为实例

Animation控件除了具备一些小的动画控件外，还支持几种特殊的Action行为，如控制按钮不可用、隐藏按钮和设置透明度等。本节重点介绍三种行为：EnableAction、StyleAction和OpacityAction。

1．设置动画目标控件不可用

EnableAction用来设置控件为不可用状态，由于“Disabled”属性为HTML控件所有，所以在使用此行为时，目标控件应该为HTML控件。实例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“Animation_Action1.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个HTML Button。设置Button的属性如下所示。

<input type="button" id="btn" value="单击不可用" runat="server" />

（5）在AnimationExtender内设计动画效果，本例实现的是单击按钮后，此按钮变为不可用状态，使用的是“EnableAction”。最终动画效果设计如清单21-6所示。注意使用的事件是“OnClick”。

代码清单21-6  Animation的EnableAction行为设计

        <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"

         TargetControlID="btn">

        <Animations >

            <OnClick>

                <EnableAction  Enabled="false" />

            </OnClick></Animations>

        </ajaxToolkit:AnimationExtender>

（6）按“Ctrl+S”保存所有的代码。

（7）将此页设置为起始页，按F5运行程序，当单击按钮时，可以发现按钮的状态，迅速变成了不可用。

2．设置动画目标控件的属性

StyleAction行为用来设计控件的一些属性，例如设置控件的背景色、高度等等，其包括3个属性：

l  AnimationTarget：要实现特效的控件。

l  Attribute：控件的某一属性，如display。

l  Value：属性的值，如“None”。

实例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“Animation_Action2.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个HTML Button。设置Button的属性如下所示。

<input type="button" id="btn" value="单击隐藏" runat="server" />

（5）在AnimationExtender内设计动画效果，本例实现的是单击按钮后，此按钮不再显示，使用的是“StyleAction”。最终动画效果设计如清单21-7所示。注意使用的事件是“OnClick”。

代码清单21-7  Animation的StyleAction行为设计

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"

        TargetControlID="btn">

        <Animations >

            <OnClick>

                <StyleAction AnimationTarget="btn" Attribute="display" Value="none"/>

            </OnClick></Animations>

</ajaxToolkit:AnimationExtender>

（6）按“Ctrl+S”保存所有的代码。

（7）将此页设置为起始页，按F5运行程序，当单击按钮时，可以发现按钮消失了。

3．设置动画目标控件的透明度

OpacityAction是控制透明度的行为。其主要包括3个属性：

l  duration：动画效果的时间间隔。

l  Fps：帧/秒的显示速度。

l  opacity：透明度的值。

实例的演示步骤如下：

（1）打开网站“AJAXAnimationCtrl”。

（2）在网站根目录下，添加一个Web窗体，命名为“Animation_Action3.aspx”。

（3）切换到窗体的设计视图，添加一个ScriptManager。实现AJAX框架类的注册。

（4）再添加一个AnimationExtender和一个Panel。设置Panel的属性如下所示。

        <asp:Panel ID="Panel1" runat="server" BackColor="#FFFFC0" Height="104px" Width="249px">

            Animation Action 实例</asp:Panel>

（5）在AnimationExtender内设计动画效果，本例实现的是单击Panel后，Panel的透明度发生变化，使用的是“OpacityAction”。最终动画效果设计如清单21-8所示。注意使用的事件是“OnClick”。

代码清单21-8  Animation的OpacityAction行为设计

        <ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server"

        TargetControlID="Panel1">

        <Animations >

        <OnClick>

                <OpacityAction  duration="0.1"   fps="20"  opacity="0.6"/>

        </OnClick>

        </Animations>

        </ajaxToolkit:AnimationExtender>

（6）按“Ctrl+S”保存所有的代码。

（7）将此页设置为起始页，按F5运行程序，当单击Panel时，可以发现Panel的透明度立刻发生了变化。

本节通过几个小的动画实例，演示了“Animation”控件的大部分动画效果，如果要了解更多的知识，请参考“http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#Animation”的内容。