Cambiar una animación con código de cliente (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. La animación también se puede cambiar 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 animación también se puede cambiar 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>

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, y proporcione un valor ID, el atributo TargetControlID y el elemento runat="server" obligatorio:

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

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

Al igual que con la API de servidor de AnimationExtender, sigue sin haber una manera sencilla 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 funciones get_*() y el formato del argumento de las funciones set_*() es una cadena JSON, lo que proporciona una representación de objetos de lo que sería el marcado XML. Actualmente, no hay ninguna manera de pasar un objeto, pero es posible leer un objeto de una animación determinada (métodos get_OnXXXBehavior()).

Esta es una cadena JSON (sin las comillas delimitadoras y con formato correcto) que representa una animación desencadenada por el botón, pero donde el panel se anima cambiando su tamaño y, al mismo tiempo, desvaneciéndose.

{
 "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 código JavaScript siguiente asigna esta descripción JSON a la animación OnClick del extensor actual y lo 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>

The animation runs immediately, without a mouse click (and with very little markup)

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