Animaciones en la Web

No cabe duda de que la edición Web de Xojo es una opción más que recomendable para todos los que necesitamos crear y desplegar aplicaciones sin tener que lidiar con varios lenguajes y dependencias de frameworks (léase librerías) de terceros que, a la larga, suelen traernos de cabeza por varios motivos; desde los consabidos, relacionados con la seguridad de nuestras aplicaciones, al hecho de que engordemos innecesariarmente nuestros productos al tener que cargar toda la librería aunque vayamos a utilizar una mínima parte. Pues bien, lo que veremos en este tutorial es de qué forma tan simple podemos aplicar animaciones sobre los componentes de nuestras páginas web, gracias al uso del Editor de Estilos y, especialmente, a la clase Animator. En concreto, veremos como podemos hacer un fundido entre dos imágenes que, por supuesto, podrás ampliar y adaptar para aplicarlo tu mismo en tus propias aplicaciones web.

Los ingredientes para crear este ejemplo de fundido son el uso de un par de estilos (clase WebStyle), que simplemente utilizaremos para definir los estados iniciales de cada una de las imagenes (instancias de WebImageView) que estarán superpuestas en la página web ocupando exactamente la misma posición. Luego añadiremos un botón a la página web, cuya pulsación será la que realmente se encargue de iniciar y ejecutar la animación. Veámosolo paso a paso.

Crear los estilos

Crear los estilos en Xojo Web es un proceso realmente sencillo gracias al editor integrado. Por ejemplo, añade dos instancias del control WebStyle desde la Librería hacia el Navegador de Proyecto (la columna situada más a la izquierda en el IDE de Xojo). Ahora selecciona el primero de los estilos añadidos en el Navegador de Proyectos y accederás al Editor de Estilos.

Lo primero que haremos será cambiar el nombre del estilo mediante el atributo Name en el Panel Inspector. Por ejemplo, llámalo OpacidadCero. Como puedes imaginar, este estilo se encargará de aplicar un 0% de opacidad sobre cualquiera de los controles sobre el que se aplique. Para ello, accede al menú desplegable de propiedades pulsando sobre el botón Add Property del Editor, seleccionando a continuación la opción Opacity bajo el apartado Miscelaneous. Como resultado se añadirá la propiedad al editor, donde sólo tendremos que indicar el valor de 0%.

Repite el proceso para el segundo estilo, salvo que en esta ocasión el nombre utilizado será el de OpacidadCien, dejando por tanto el valor por omisión de la propiedad Opacity una vez que la añadas al estilo.

Como habrás observado, el Editor de Estilos también nos permitirá crear estilos en los que podremo incorporar otras propiedades como fuentes, sombras, color, bordes, etc, con variaciones para cada uno de los posibles estados de un objeto: normal, el apuntador se encuentra sobre ellos, se ha pulsado el control, o bien se ha visitado. Estos son los estados habituales para cualquier objeto en una página o aplicación web.

Aplicar estilos a los objetos

Con la página web que se añade por omisión al proyecto seleccionada (WebPage1), añade ahora dos instancias del control WebImageView desde el panel Library hacia la página web por omisión, ajusta sus tamaños y asegúrate de que una esté justo sobre la otra ocupando exáctamente la misma posición. A continuación, añade dos imágenes al proyecto web que tengan, preferiblementee, el mismo tamaño (ancho x alto) que el asignado a las instancias de WebImageView.

El siguiente paso consiste precisamente en asignar cada una de las imágenes a cada uno de los dos WebImageView, al tiempo que también aprovecharemos para asignar el estilo creado en el paso anterior a cada una de estas instancias. Ambas operaciones se realizan desde el Panel Inspector.

Selecciona la primera de las instanacias ImageView1, y en el Panel Inspector, selecciona una de las dos imágenes que hayas añadido en el proyecto desde el menú desplegable asociado a la propiedad Picture del apartado Behavior. A continuación, selecciona el estilo OpacidadCero en el menú desplegable Style del apartado Styles.

Repite esta operación con la instancia ImageView2, seleccionando en este caso la imagen restante y el estilo OpacidadCien.

Poner en marcha el objeto de animación

El uso de la clase WebAnimator es realmente sencillo; simplemente hemos de indicar sobre cuál de los controles derivados de la clase WebControl deseamos aplicar cualquier operación de escala, movimiento, cambio de tamaño, rotación, y también animación de la opacidad, que es lo que nos ocupa en este caso; indicar la cantidad de tiempo en la que deseamos que transcurra dicha operación (indicada en segundos) y el valor del atributo o atributos que deseamos modificar (en el caso de la opacidad, sólo uno).

Por supuesto, la operación puede ser más detallada mediante la incorporación de fotogramas de referencia. Y lo mejor de todo es que las animaciones se producen desde el lado del cliente (es decir, el navegador), lo que significa que no sufrirá problemas de latencia o se verá afectado el rendimiento porque los objetos deban de comunicarse con el backend (el lado del servidor).

En nuestro caso, la opereación será bien sencilla. Una vez creada una instancia a partir de la clase WebAnimator llevaremos la imagen que ocupa la posición superior y tiene aplicado el estilo con el 100% de opacidad hasta el 0% de opacidad y, a continuación, haremos lo propio con la segunda de las imágenes que, ocupando una capa inferior, tiene aplicado el estilo con un 0% de opacidad, llevándolo hasta el 100%. Luego nos limitaremos a cambiar las variables encargadas de indicar el nivel de opacidad al que queremos llevar en cada caso para que se produzca la operación inversa en la siguiente pulsación del botón.

Por tanto, si añadimos el Manejador de Evento Action a nuestro botón(por ejemplo mediante la opción de menú Insert > Event Handler…), e incluimos el siguiente código en el Editor de Código resultante, nuestras imágenes aplicarán el efecto que estamos buscando:

Dim na As New WebAnimator
Static first As Integer = 0
Static second As Integer = 100

Animator1.Opacity(ImageView1, first, 1)
Animator1.Play
animator1.Opacity(ImageView2,second, 1)
Animator1.Play

If first = 0 Then
  first = 100
  second = 0
Else
  first = 0
  second = 100
End If

¡Y esto es todo lo que necesitamos! Por supuesto, podemos hacer que sea más versátil y elegante si decidimos incorporar los controles ImageView en un ContainerControl y puede que añadir un Array al mismo de modo que podamos crear un carrusel en el que se vayan produciendo las transiciones entre las imágenes pasadas con los intervalos de tiempo fijados. ¿Te animas?