Modificación de animaciones desde el lado servidor (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. Las animaciones también se pueden cambiar en el lado servidor.

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. Las animaciones también se pueden cambiar en el lado servidor.

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>

El resto del código se ejecuta en el lado servidor y no usa marcado; en su lugar, usa código para crear el control AnimationExtender:

<script runat="server">
void Page_Load()
{
 AjaxControlToolkit.AnimationExtender ae = new AjaxControlToolkit.AnimationExtender();
 ae.TargetControlID = "Panel1";

Sin embargo, el Kit de herramientas de control actualmente no proporciona acceso a la API para crear las animaciones individuales. Sin embargo, es posible establecer la propiedad Animations de AnimationExtender en una cadena que contenga el marcado XML usado al asignar las animaciones mediante declaración. Para crear el XML que no debe contener el elemento <Animations>, puede usar la compatibilidad con XML de .NET Framework o, como en el código siguiente, simplemente proporcione la cadena:

ae.Animations = "<OnLoad><Parallel><FadeOut Duration=\"1.5\"
 Fps=\"24\" /><Resize Width=\"1000\" Height=\"150\"
 Unit=\"px\" /></Parallel></OnLoad>";

Por último, agregue el control AnimationExtender a la página actual, dentro del elemento <form runat="server">, y asegúrese de que la animación se incluya y se ejecute:

form1.Controls.Add(ae);
}
</script>

La animación se crea mediante código C#/VB del lado servidor (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente