Ejecutar animaciones con código de cliente (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. La ejecución de la animación también se puede desencadenar mediante código JavaScript personalizado del lado cliente.

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. La ejecución de la animación también se puede desencadenar mediante código JavaScript personalizado del lado cliente.

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>, use <OnClick> para ejecutar las animaciones una vez que el usuario hace clic en el panel. Agregue dos animaciones que se ejecuten en paralelo:

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

En esta demostración, esta animación (y cualquier otra animación creada mediante el Kit de herramientas de control) se ejecuta usando código JavaScript, una vez que se ejecuta la página. En primer lugar, necesitamos acceso al control AnimationExtender. La biblioteca de ASP.NET AJAX proporciona la función $find() para esta tarea:

var ae = $find("ae");

El control AnimationExtender expone una API enriquecida, que incluye métodos con nombres idénticos a los controladores de eventos usados en el marcado XML: OnClick(), OnLoad(), etc. Por ejemplo, una llamada del método OnClick() ejecuta la animación dentro del elemento <OnClick> del control AnimationExtender:

ae.OnClick();

Este es el código JavaScript completo del lado cliente que emula el clic en el panel una vez que la página se ha cargado completamente. Observe que se usa el nombre de función pageLoad() al que llama ASP.NET AJAX una vez que se ha cargado la página y todas las bibliotecas de JavaScript incluidas.

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

La animación se ejecuta inmediatamente, sin un clic del mouse (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente