Cambio de una animación mediante código de Client-Side (C#)

de Christian Wenz

Descargar PDF

El control Animación del kit de herramientas de control de AJAX de ASP.NET no es solo un control, sino un marco completo para agregar animaciones a un control. La animación también se puede cambiar mediante código JavaScript personalizado del lado cliente.

Visión general

El control Animación del kit de herramientas de control de AJAX de ASP.NET no es solo un control, sino un marco completo para agregar animaciones a un control. La animación también se puede cambiar mediante código JavaScript personalizado del lado cliente.

Pasos

En primer lugar, incluya el ScriptManager en la página; a continuación, se carga la biblioteca ASP.NET AJAX, lo que permite usar el Control Toolkit:

<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 para el panel, defina un buen color de fondo y también establezca un ancho fijo para el panel:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

La animación real se inicia mediante un botón HTML:

<input type="button" id="Button1" runat="server" value="Launch Animation" />

A continuación, agregue el elemento AnimationExtender a la página, proporcionando un ID, el TargetControlID atributo y el obligatorio runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1" />

Tenga en cuenta que no hay ningún <Animations> nodo dentro del AnimationExtender control . El código JavaScript personalizado se usa para proporcionar las animaciones que se usarán con el control .

Al igual que con la API de servidor de AnimationExtender, no hay una manera fácil de asignar una animación al extensor. Sin embargo, el extensor expone varios métodos para leer y escribir animaciones registradas con los distintos eventos (OnClick, OnLoad, etc.). Estos son algunos ejemplos:

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

El formato del valor devuelto de las get_*() funciones y el formato del argumento para las set_*() funciones es una cadena JSON, lo que proporciona una representación de objeto de lo que sería el marcado XML. Actualmente, no hay ninguna manera de pasar un objeto en, pero es posible leer un objeto de una animación determinada (get_OnXXXBehavior() métodos).

Esta es una cadena JSON (sin las comillas delimitadas y con formato correcto) que representa una animación desencadenada por el botón, pero animando el panel cambiando el tamaño y desvaneciendola al mismo tiempo:

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

El siguiente código JavaScript asigna esta descripción JSON a la OnClick animación del extensor actual y la ejecuta:

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

La animación se ejecuta inmediatamente, sin un clic del mouse (y con un marcado muy pequeño) (Haga clic para ver la imagen de tamaño completo).