Ejemplo avanzado con la librería jsAnim

  • Por
Realizamos un segundo ejemplo de uso de la librería Javascript para animación de elementos un poco más avanzado, para demostrar otras de sus funcionalidades.
En un artículo anterior presentamos las librerías jsAnim, un compendio de código Javascript que sirve para realizar todo tipo de animaciones basadas en la alteración suavizada de propiedades CSS a lo largo del tiempo. En el presente artículo presentaremos varios casos de uso y un nuevo ejemplo de animación basado en la librería.

A continuación veremos algunas de las posibilidades de jsAnim, para realizar animaciones de estilos diferentes y algunos usos más o menos avanzados para gestionarlas. Veremos que el trabajo con jsAnim resulta muy sencillo para el desarrollador. Aclaramos no obstante que no pretendemos ofrecer una documentación completa del framework Javascript, sino más bien demostrar algunas de sus capacidades útiles para animar nuestra página web.

Encadenar diversas animaciones

En el artículo anterior vimos que existe un método llamado add() que invocamos sobre el objeto que deseamos animar y sirve para realizar una animación. La ejecución de la animación dependerá del tiempo que hayamos configurado en el parámetro "duration" que enviamos al método, de modo que el método siempre tardará, al menos, un pequeño tiempo en ejecutarse.

Nosotros podemos llamar diversas veces al método add() y así encadenaremos diversas animaciones, que se ejecutarán una detrás de otra. Es decir, hasta que no acabe la ejecución de una animación, no comenzará la siguiente que hayamos configurado.

Recordemos que tenemos que comenzar nuestro script generando un par de objetos:

manager = new jsAnimManager();
capaAnimar = manager.createAnimObject("micapa");

Ahora, sobre la capaAnimar, podremos invocar los métodos add(), encadenando tantos como queramos:

capaAnimar.add({property: Prop.left, to: 450, duration: 900, ease: jsAnimEase.backout(0.4)});
capaAnimar.add({property: Prop.backgroundColor, to: new Col(00,100,33), duration:500});
capaAnimar.add({property: Prop.width, to: 200, duration: 1000});

Nota: para entender qué se está animando en cada caso podemos consultar la documentación de jsAnim.

Parar y continuar una animación

Existen un par de métodos también interesantes que pueden ser invocados sobre el objeto manager (de la clase jsAnimManager) que sirven para parar y proseguir con una animación detenida.

manager.pause(): Este método detiene todas las animaciones que se estén realizando con el manager sobre el que estamos invocándolo.

manager.resume(): Este método sirve para proseguir con una animación previamente detenida, en el exacto punto donde la dejamos.

Funciones callback

Existe la posibilidad de hacer un callback de funciones, para ejecutar código Javascript justo después de haber terminado una animación. Para ello se puede indicar la función a ejecutar como parámetro en la llamada al método add().

Como hemos visto, el método add() recibe un parámetro en el que se indican varios datos en notación de objeto. Uno de ellos puede ser el dato onComplete, en el que tenemos que indicar la función que queremos ejecutar cuando se termine esa animación de propiedad CSS.

capaAnimar.add({property: Prop.left, to: 20, duration: 1000, onComplete: function(){
   //código a ejecutar después de la animación
}});

Esta función callback puede servirnos para muchas cosas, pero una de las típicas sería hacer una animación en bucle infinito, llamando al inicio de la animación cuando todos los pasos de la misma hayan concluido. Por ejemplo:

function animacion() {
   capaAnimar.add({property: Prop.width, to: 200, duration: 1000});
   capaAnimar.add({property: Prop.width, to: 100, duration: 500});
   capaAnimar.add({property: Prop.left, to: 20, duration: 1000, onComplete: animacion});
}

Como vemos, en el último método add() estamos pasando el dato onComplete con el valor "animacion", que es la propia función que realiza varios pasos de una animación. Eso quiere decir que, cuando termine el último paso de la animación, se volverá a invocar la función y con ello se volverá a iniciar la animación.

Ejemplo con todos los usos avanzados de jsAnim vistos aquí

Ahora podemos ver una página que implementa los ejemplos de uso que hemos comentado en este artículo. Primero mostramos el código fuente del ejercicio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <script type="text/javascript" src="jsAnim.js"> </script>
   <script type="text/javascript">
   var manager;
   var capaAnimar;
   
   window.onload = function(){
      manager = new jsAnimManager();
      capaAnimar = manager.createAnimObject("micapa");
   }
   function animacion() {
    capaAnimar.add({property: Prop.left, to: 450, duration: 900, ease: jsAnimEase.backout(0.4)});
      capaAnimar.add({property: Prop.backgroundColor, to: new Col(00,100,33), duration:500});
      capaAnimar.add({property: Prop.width, to: 200, duration: 1000});
      capaAnimar.add({property: Prop.backgroundColor, to: new Col(255,127,00), duration:1000});
      capaAnimar.add({property: Prop.width, to: 100, duration: 500});
      capaAnimar.add({property: Prop.left, to: 20, duration: 1000, onComplete: animacion});
   }
   function parar(){
      manager.pause();
   }
   function proseguir(){
      manager.resume();
   }
   </script>
   <style type="text/css">
      #micapa{
         position: absolute;
         top: 100px;
         left: 20px;
         width: 100px;
         background-color: #ff8800;
         color: #fff;
         padding: 15px;
      }
   </style>
   <title>Ejemplo animacion jsAnim</title>
</head>

<body>

<div id="micapa">Capa que voy a animar para probar un poco más sobre la librería jsAnim!!!</div>

<button onclick="animacion()">Comenzar la animación</button>
<button onclick="parar()">Para la animación</button>
<button onclick="proseguir()">Proseguir con la animación</button>
</body>
</html>

Para acabar podemos ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir