Animation

Descripción

Y para el final dejamos dos controles que son, sin duda alguna, los más espectaculares del ASP.NET AJAX Control Toolkit. El primero de todos es el Animation.

El Animation es un extendedor que permite aplicar sobre el elemento elegido las animaciones que nos permiten el Animation Framework. El Animation Framework es una aquitecturo de animaciones creadas para ASP.NET AJAX y que, a pesar de no ser demasiado complicadas, merecerían un artículo completo para su correcta explicación.

A modo de tanteo, diremos que las animaciones proporcionadas por el Animation Framework y que podremos aplicar con nuestro extendedor Animation, nos permiten asignar efecto de “fadeIn” y “fadeOut”, “pulse”, “Scale” o acciones javascript, tanto en modo secuencia, en modo paralelo o cualquier combinación imaginable de las dos.

Propiedades

• TargetControlID: ID del control a partir del cual y sobre el cual vamos a aplicar las animaciones.
• OnLoad: elemento bajo el cual añadiremos las animaciones que se iniciarán tras la carga del control.
• OnClick: elemento bajo el cual añadiremos las animaciones que se iniciarán hacer click sobre el control.
• OnMouseOver: elemento bajo el cual añadiremos las animaciones que se iniciarán tras pasar el mouse sobre el control.
• OnMouseOut: elemento bajo el cual añadiremos las animaciones que se iniciarán tras sacar el mouse de encima del control.
• OnHoverOver: Similar a OnMouseOver, solo que parará la animación OnHoverOut antes de ejecutarse.
• OnHoverOut: Similar a OnMouseOut, solo que parará la animación OnHoverOver antes de ejecutarse.

Ejemplo

Apliquemos el uso del control Animation. Para aprender a usar animaciones, se recomienda visitar la web oficial, donde encontraremos ejemplos de uso y una referencia completa:
- http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx
- http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx

<asp:Panel ID="Panel1" runat="server" Width="125px" BorderWidth="1px" BackColor="Yellow">
Pasa por encima mío y luego vete.
También puedes hacerme clic ;)
</asp:Panel>

<ajaxToolkit:AnimationExtender id="MyExtender" runat="server"
TargetControlID="Panel1">
<Animations>
<OnMouseOver>
<FadeOut Duration="2.5" Fps="20" />
</OnMouseOver>
<OnMouseOut>
<FadeIn Duration=".5" Fps="20" />
</OnMouseOut>
<OnClick>
<Sequence>
<Pulse Duration=".1" />
<Parallel Duration=".5" Fps="30">
<FadeOut />
<Scale ScaleFactor="5" Unit="px" Center="true"
ScaleFont="true" FontUnit="pt" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>