21.5 UpdatePanelAnimation局部刷新动画控件(征服ASP.NET 2.0 Ajax——Web开发技术详解)

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

21.5  UpdatePanelAnimation局部刷新动画控件

UpdatePanelAnimation是应用于UpdatePanel的控件，提供一些动画效果，本节介绍其主要属性，并演示如何在项目中应用此控件。

21.5.1  简介

UpdatePanelAnimation控件用来装饰UpdatePanel更新的效果，提供对UpdatePanel更新时和更新后的特效，并允许用户定义这些特效。定义的语法与“Animation”控件类似。UpdatePanelAnimation控件的属性如下所示：

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

  runat="server"

TargetControlID="up">

     <Animations>

        <OnUpdating> ... </OnUpdating>

        <OnUpdated> ... </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

其中各属性的意义如下：

l  TargetControlID：要应用特效的UpdatePanel的ID。

l  OnUpdating：更新时应用的特效。

l  OnUpdated：更新后应用的特效。

针对OnUpdated事件和OnUpdating事件，Microsoft给出了特别说明。任何局部控件的回调，都会导致OnUpdating的触发，如果要使任何回调完成后，都触发OnUpdated，则需要设置UpdatePanel的属性“OnUpdated”为“Always”。

21.5.2  实现局部更新时渐变效果

本例使用Animation控件的一些知识，演示UpdatePanel控件更新后的颜色渐变特效。

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

（2）打开默认生成的Default.aspx页面，切换到窗体的设计视图。

（3）在视图中添加UpdatePanel控件和UpdatePanelAnimationExtender控件。

（4）为UpdatePanelAnimationExtender控件设计动画特效，本例使用的是颜色渐变特效，代码如清单21-19所示。注意改变的是背景色。

代码清单21-19  UpdatePanelAnimationExtender的颜色特效代码

<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"

        TargetControlID="UpdatePanel1">

         <Animations>

            <OnUpdated>

                <Sequence>

                    <Parallel duration="2" Fps="30">

                          <Color  StartValue="#ff3f3f" EndValue="#ffffff" Property="style" PropertyKey="backgroundColor" />

                    </Parallel>

                </Sequence>

            </OnUpdated>

        </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

（5）在UpdatePanel控件中，添加一些需要回调的内容，本例设计了一个登录窗体，页面的最终布局如图21-28所示。

图21-28  UpdatePanelAnimation实例的设计视图

（6）双击“登录”按钮，添加一些代码，主要是引起页面的回调，还需要通过线程延缓更新的时间，否则可能看不到效果。由于本例使用的是OnUpdated事件，所以影响并不大，但最好还是添加这个延迟。最终按钮的Click事件代码如下。

    protected void Button1_Click(object sender, EventArgs e)

    {

        //延缓更新时间

        System.Threading.Thread.Sleep(3000);

        Literal1.Text = "登录完毕";

    }

（7）按“Ctrl+S”保存所有的设计。按F5运行程序，开始界面和普通界面没有区别。

（8）单击“登录”按钮，等待一段时间后，可以看到UpdatePanel区域内，背景颜色发生了变化，有渐变特效。

注意：由于书本印刷的问题，本例没有提供效果图片。