Introducción a la animación con Javascript

Bueno, pues no recuerdo si he hablado de este tema anteriormente, pero por si las dudas, aquí va.

Voy a empezar esta serie sobre animación en javascript. Hay muchos lugares donde se puede aprender sobre el tema. El buen amigo Panino ha escrito unos tutoriales que valen la pena revisar. Y, aun que su material es excelente, aun siento la necesidad de tocar este tema, introducir nuevos conceptos y sobre todo explicarlo desde el principio para aquello que quieren aprender desde cero.

La base de todo.

Los navegadores no tienen un API para animaciones con javascript. No hay un método moveTo en la API del DOM, por el contrario, los desarrolladores debemos depender de temporizadores para lograr las animaciones.

Javascript, afortunadamente, cuenta con dos funciones que nos hacen la vida más fácil. Conoce a setTimeout y setInterval.

setTimeout toma dos parametros, uno es la función a ejecutar y el segundo es la cantidad de milisegundos que “esperaremos” antes de que la función sea ejecutada.

setTimeout(functiton(){alert('pasaron 200 ms');}, 200);

setInterval toma los mismos parametros, pero la función continuará ejecutandose indefinidamente cada x milisegundos donde x es la cantidad pasada como segundo parametro a la función.

setInterval(function(){alert('passaron 200 ms');}, 200); //No intenten esto en casa!

No vamos a tomar en cuenta setInterval ya que no es la mejor forma de hacer animaciones por razones de desempeño.

Una vez conocemos esto, podemos entrar de lleno. Pero por ahora esto es todo. Te invito a que juegues con setTimeout y setInterval para que en la proxima entrega de esta serie estés familiarizado con estas dos funciones que son la base fundamental de animaciones con javascript.

Lectura recomendada:

https://developer.mozilla.org/en/DOM/window.setTimeout

http://msdn.microsoft.com/en-us/library/ms536753%28v=VS.85%29.aspx

http://arguments.callee.info/2008/11/10/passing-arguments-to-settimeout-and-setinterval/

3 thoughts on “Introducción a la animación con Javascript

  1. Amigo, gracias por la mención! Dos temas quedaron pendientes en mi artículo y espero que los abordes:
    1)Agregar un patrón cola para encolar los efectos (algo mejor que el control burdo que hice en mi artículo a manera de ejemplo).
    2)Agregar un patrón observer o un sistema de broadcasting semejante al que usaste en el artículo acerca de fadein/out (https://imbuzu.wordpress.com/2009/11/17/fadeobj-js-nuevo-script/) para notificar onMotionProgress, onMotionStart, onMotionFinished.
    Un abrazo, Panino

  2. Tu artículo merece la mención amigo mio. Buenos puntos esos que mencionas. La verdad no los tenía en cuenta, pero me aseguraré de incluirlos. Hace tiempo ingenié una manera alterna de tratar tu segundo punto. Es algo que yo llamo walkers, de hecho tengo un borrador al respecto que necesita ser pulido un poco.

    Saludos.

Comments are closed.