Seleccionar una animación de una lista (VB)

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. El marco también permite al programador elegir una animación de una lista de animaciones, en función de la evaluación del código JavaScript.

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. El marco también permite al programador elegir una animación de una lista de animaciones, en función de la evaluación del código JavaScript.

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. En lugar de una de las animaciones normales, entra en juego el elemento <Case>. Se evalúa el valor de su atributo SelectScript; el valor devuelto debe ser numérico. Dependiendo de este número, se ejecuta una de las subanimaciones dentro de <Case>. Por ejemplo, si SelectScript se evalúa como 2, el Kit de herramientas de control ejecuta la tercera animación dentro de <Case> (el recuento comienza en 0).

El marcado siguiente define tres subanimaciones: cambiar el tamaño del ancho, cambiar el tamaño del alto y desvanecer. A continuación, el código JavaScript (Math.floor(3 * Math.random())) elige un número entre 0 y 2, de modo que se ejecuta una de las tres animaciones:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Case SelectScript="Math.floor(3 * Math.random())">
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 <FadeOut Duration="1.5" Fps="24" />
 </Case>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Una de las tres animaciones posibles: el panel se ensancha (haga clic para ver la imagen a tamaño completo)

AnteriorSiguiente