Wtfaq

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 laslibrerí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 presenteartí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 estilosdiferentes 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 unadocumentació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 existeun 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 elpará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í encadenaremosdiversas 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 quecomenzar 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),...