Animaciones en respuesta a la interacción del usuario (C#)

por Christian Wenz

Descargar PDF

El control Animation del Kit de herramientas de control de ASP.NET AJAX no es solo un control, sino un marco completo para agregar animaciones a un control. Las animaciones se pueden iniciar automáticamente o pueden desencadenarse mediante la interacción del usuario, por ejemplo, al hacer clic con el mouse.

Información general

El control Animation del Kit de herramientas de control de ASP.NET AJAX no es solo un control, sino un marco completo para agregar animaciones a un control. Las animaciones se pueden iniciar automáticamente o pueden desencadenarse mediante la interacción del usuario, por ejemplo, al hacer clic con el mouse.

Pasos

En primer lugar, incluya el elemento ScriptManager en la página; a continuación, se carga la biblioteca ASP.NET AJAX, lo que permite usar el Kit de herramientas de control:

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

La animación se aplicará a un panel de texto similar al siguiente:

<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>

En la clase CSS asociada del panel, defina un bonito color de fondo y también establezca un ancho fijo para el panel:

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

A continuación, agregue el elemento AnimationExtender a la página, y proporcione un valor ID, el atributo TargetControlID y el elemento runat="server" obligatorio:

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

Dentro del nodo <Animations>, hay cinco maneras de iniciar la animación mediante la interacción del usuario (el elemento que falta es <OnLoad>, que se ejecuta una vez que toda la página se ha cargado completamente):

• <OnClick> (clic del mouse en el control)
• <OnHoverOut> (el mouse deja el control)
• <OnHoverOver> (el mouse mantiene el puntero sobre un control y detiene la animación <OnHoverOut>)
• <OnMouseOut> (el mouse deja un control)
• <OnMouseOver> (el mouse mantiene el puntero sobre un control, no detiene la animación <OnMouseOut>)

En este escenario, se usa <OnClick>. Cuando el usuario hace clic en el panel, cambia de tamaño y, al mismo tiempo, se va mostrando gradualmente.

<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>

Un clic del mouse inicia la animación (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente