将动画添加到控件 (C#)

  • 项目

作者 ：Christian Wenz

下载 PDF

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是一个用于向控件添加动画的整个框架。 本教程演示如何设置此类动画。

概述

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是一个用于向控件添加动画的整个框架。 本教程演示如何设置此类动画。

步骤

第一步是像往常一样在页面中包括 ScriptManager ，以便加载 ASP.NET AJAX 库并使用 Control Toolkit：

<asp:ScriptManager ID="asm" runat="server" />

此方案中的动画将应用于如下所示的文本面板：

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
 more interactive and highly-personalized Web experiences that work across all the
 most popular browsers.<br />
</asp:Panel>

面板的关联 CSS 类定义背景色和宽度：

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

接下来，我们需要 AnimationExtender。 提供 ID 和 通常 runat="server"的 后， TargetControlID 必须将 属性设置为 控件，在我们的示例中，面板：

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

整个动画是使用 XML 语法以声明方式应用的，但遗憾的是，Visual Studio 的 IntelliSense 目前并不完全支持。 根节点在此 <Animations>; 节点中，允许多个事件确定动画 () 何时 () 位置：

  • OnClick (鼠标单击)
  • OnHoverOut 鼠标离开控件时 ()
  • OnHoverOver (鼠标悬停在控件上时，停止 OnHoverOut 动画)
  • OnLoad) 加载页面时 (
  • OnMouseOut 鼠标离开控件时 ()
  • OnMouseOver 当鼠标悬停在控件上时 (，而不是停止 OnMouseOut 动画)

框架附带一组动画，每个动画由其自己的 XML 元素表示。 下面是一个选择：

  • <Color> (更改颜色)
  • <FadeIn>) 中的 (褪色
  • <FadeOut> (淡出)
  • <Property> (更改控件的属性)
  • <Pulse> (脉动)
  • <Resize> (更改大小)
  • <Scale> (按比例更改大小)

在此示例中，面板应淡出。动画 (属性) Duration 需要 1.5 秒， (属性) 显示 24 帧 (Fps 动画步骤) /秒。 下面是控件的完整标记 AnimationExtender ：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <FadeOut Duration="1.5" Fps="24" />
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

运行此脚本时，面板会在一秒半后显示并淡出。

面板正在淡出

面板正在淡出 (单击以查看全尺寸图像)

下一页