将动画添加到控件 (C#)
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>
运行此脚本时,面板会在一秒半后显示并淡出。
面板正在淡出 (单击以查看全尺寸图像)