Analizamos la librería que nos permite crear animaciones CSS, por medio de Javascript, de una forma muy sencilla.
Este artículo es de una librería que ya no está disponible, por lo que lo hemos marcado como obsoleto. Recomendamos investigar las animaciones CSS.
Vamos a hablaros de unas librerías creadas en el lenguaje de programación Javascript, que sirven para realizar animaciones de diversos tipos. Se trata de jsAnim, un producto gratuito y de fácil uso, que se encuentra en fase beta, pero que ya tiene muchas funciones muy útiles para aplicar dinamismos a las páginas web sin por ello perder accesibilidad.
Empezamos por decir que esta librería nos ayuda a crear animaciones CSS utilizando como lenguaje Javascript para alterar los atributos de estilos de una manera suavizada y a lo largo del tiempo, lo que permite crear el efecto de animación. La gran ventaja de utilizar Javascript supone que podremos visualizar las animaciones en cualquier navegador actual.
La última versión a la hora de escribir este artículo es la 0.2 y su peso es de 25kb. Realmente es un peso bastante reducido, al menos para las posibilidades de las librerías, y gracias a ello no supondrá un problema para nuestro servidor y ni para los clientes que tengan que descargar el código fuente a la hora de visualizar el sitio.
Podemos descargar jsAnim desde el enlace: YA NO EXISTE ESTE ENLACE!!!
Instalación de la librería jsAnim
Lo primero que tenemos que hacer es descomprimir la carpeta donde viene jsAdmin y subirla a nuestro servidor. Una vez subida tenemos que colocar el siguiente código en la cabecera de nuestra página para que pueda ser accesible el script de las librerías.<script type="text/javascript" src="ruta_al_archivo/jsAnim.js"> </ script>
Como podemos ver, vamos a trabajar con Javascript por lo que puede ser util disponer de un archivo .js para realizar nuestras funciones, en ese caso incluiríamos dicho archivo desde la cabecera, de la misma forma que hemos añadido la librería.
Una vez incluidos los archivos, comenzaremos a crear nuestras funciones en el nuevo archivo .js que hemos creado. Lo primero que debemos de hacer es crearnos una instancia a un objeto jsAnimManager. Este objeto controla la animación de varios objetos.
var manager= new jsAnimManager();
Casi todas las propiedades de cualquier elemento de una página se pueden animar pero para ello es necesario crear primero un objeto jsAnimObject, indicando el identificador del elemento de la página que deseamos animar:
var anim=manager.createAnimObject(?id_del_elemento?);
Una vez que hemos creado el objeto, nos queda animar una propiedad del elemento:
anim.add({property: Prop.top, from: 50, to: 500, duration: 2000});
La linea de código anterior inicializa la animación, que parte de 50 y va hacia 500, en dos segundos.
Con esto ya tendríamos la parte del código Javascript creada y hemos visto que es bastante sencilla.
Ahora sólo nos faltaría la parte del HTML y CSS, pero veremos que es tan simple como crear los elementos y aplicarles los estilos que queramos. En este caso vamos a animar una imagen, y lo único importante es ponerle el identificador a esa imagen igual al identificador que utilizamos para acceder al elemento desde el código Javascript.
Código CSS:
.ejemp{
witdh:600px
backgroud-color: green;
}
Código HTML:
<div class=ejemp>
<img src="images/figura.gif" id="id_del_elemento" />
</div>
Con esto ya nos funcionaría nuestra animación. A continuación colocamos el código completo de un primer ejemplo de jsAnim en un único archivo HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jsAnim.js"> </script>
<script type="text/javascript">
function animacion() {
var manager= new jsAnimManager();
shroom = document.getElementById("elementId");
shroom.style.position = "relative";
var anim = manager.createAnimObject("elementId");
anim.add({property: Prop.left, to: 450, duration: 2000});
}
</script>
<title>Ejemplo animacion con jsAnim</title>
</head>
<body>
<div class="ejemp" style="border: medium solid Fuchsia; width: 600px; height: 200px;">
<img src="images/figura.jpg" id="elementId" />
</div>
<button onclick="animacion()">Animate!</button>
</body>
</html>
En el siguiente articulo complicaremos un poco más el ejemplo para realizar otros movimientos.
Ejemplo avanzado con la librería JSAnim
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.
Ya hemos conocido jsAnim, que sirve para realizar todo tipo de animaciones basadas en la alteración suavizada de propiedades CSS a lo largo del tiempo. A continuación presentaremos varios casos de uso y un nuevo ejemplo de animación basado en la librería.
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});
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>