Animación según una condición (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. Que una animación se ejecute o no también puede depender de una condición en forma de 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. Que una animación se ejecute o no también puede depender de una condición en forma de 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 <Condition>. El código JavaScript proporcionado como valor del atributo ConditionScript se ejecuta en tiempo de ejecución. Si se evalúa como true, la animación se ejecuta; de lo contrario, no. El marcado siguiente proporciona dos animaciones, cada una de ellas ejecutadas en el 50 % de los casos al azar. Puesto que solo puede haber una animación dentro de <OnLoad>, las dos animaciones <Condition> se unen mediante el elemento <Sequence>:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Condition ConditionScript="Math.random()   0.5">
 <Resize Width="1000" Height="150" Unit="px" />
 </Condition>
 <Condition ConditionScript="Math.random()   0.5">
 <FadeOut Duration="1.5" Fps="24" />
 </Condition>
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

Tenga en cuenta que el signo "menos que" (<) del atributo ConditionScript se debe escapar (). Al ejecutar este script, no se ejecuta ninguna animación, se ejecuta una de las dos o ambas lo hacen.

El panel se desvanece sin cambiar el tamaño, por lo que la segunda animación se ejecuta, la primera no (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente