响应用户交互的动画 (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、 TargetControlID 属性和强制 runat="server"：

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

在 节点中 <Animations> ，有五种方法可以通过用户交互启动动画， (缺少的元素在 <OnLoad>) 完全加载整个页面后执行：

  • <OnClick> (鼠标单击控件)
  • <OnHoverOut> (鼠标离开控件)
  • <OnHoverOver> (鼠标悬停在控件上，停止 <OnHoverOut> 动画)
  • <OnMouseOut> (鼠标离开控件)
  • <OnMouseOver> (鼠标悬停在控件上，而不是停止 <OnMouseOut> 动画)

在此方案中， <OnClick> 使用 。 当用户单击面板时，面板会同时调整大小并淡出。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

单击鼠标可启动动画

单击鼠标可启动动画 (单击以查看全尺寸图像)

上一页下一页