Ejecutar varias animaciones una tras otra (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. Permite ejecutar varias animaciones una detrás de otra.

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. Permite ejecutar varias animaciones una detrás de otra.

Pasos

En primer lugar, incluya el elemento ScriptManager en la página; a continuación, se carga la biblioteca de 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>, use <OnLoad> para ejecutar las animaciones una vez que la página se haya cargado por completo. Por lo general, <OnLoad> solo acepta una animación. El marco de animación permite unir varias animaciones en una sola mediante el elemento <Sequence>. Todas las animaciones de <Sequence> se ejecutan una después de la otra. Este es el marcado posible del control AnimationExtender, donde primero hace que el panel sea más ancho y, luego, disminuye su altura:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Al ejecutar este script, primero el panel se ensancha y, luego, se hace más pequeño.

En primer lugar, se aumenta el ancho (haga clic para ver la imagen a tamaño completo).

A continuación, se reduce el alto (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente