Agregar animación a un control (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. En este tutorial se muestra cómo configurar este tipo de animación.

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. En este tutorial se muestra cómo configurar este tipo de animación.

Pasos

A continuación, como de costumbre, asegúrese de incluir el elemento ScriptManager en la página para que se cargue la biblioteca de ASP.NET AJAX y se pueda usar el Kit de herramientas de control:

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

La animación de este escenario 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>

La clase CSS asociada al panel define un color de fondo y un ancho:

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

A continuación, necesitamos el elemento AnimationExtender. Después de proporcionar un valor para ID y el elemento runat="server" habitual, el atributo TargetControlID debe establecerse en el control que se va a animar, en nuestro caso, el panel:

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

La animación completa se aplica mediante declaración, usando una sintaxis XML; desafortunadamente, actualmente no es totalmente compatible con IntelliSense de Visual Studio. El nodo raíz es <Animations>; dentro de este nodo, y se permiten varios eventos que determinan cuándo se realizan las animaciones:

• OnClick (clic del mouse)
• OnHoverOut (cuando el mouse deja un control)
• OnHoverOver (cuando el mouse mantiene el puntero sobre un control y detiene la animación OnHoverOut)
• OnLoad (cuando se ha cargado la página)
• OnMouseOut (cuando el mouse deja un control)
• OnMouseOver (cuando el mouse mantiene el puntero sobre un control y no detiene la animación OnMouseOut)

El marco incluye un conjunto de animaciones, cada una representada por su propio elemento XML. Esta es una selección:

• <Color> (cambio de un color)
• <FadeIn> (aparición gradual)
• <FadeOut> (desvanecimiento)
• <Property> (cambio de la propiedad de un control)
• <Pulse> (pulsante)
• <Resize> (cambio de tamaño)
• <Scale> (cambio proporcional de tamaño)

En este ejemplo, el grupo especial se desvanece. La animación tardará 1,5 segundos (atributo Duration ) y muestra 24 fotogramas (pasos de animación) por segundo (atributo Fps). Este es el marcado completo del control AnimationExtender:

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

Al ejecutar este script, el panel aparece y desaparece en un segundo y medio.

El panel se desvanece (haga clic para ver la imagen a tamaño completo).

Siguiente