Animar sprite de imágenes con jQuery

Motio es un plugin desarrollado con jQuery para la creación de animaciones, utilizando para ellos sprites de imágenes.

La idea de este plugin es igual de sencilla que el concepto básico de una animación, el mismo que utiliza imágenes estáticas pero que al ser armados en forma de fotogramas crean la ilusión de movimiento.

La gran ventaja de Motio es que utiliza sprite de imágenes, de esta manera evitamos tener que cargar una imagen nueva por cada fotograma, mejorando considerablemente el rendimiento y bajando los tiempo de carga al de una sola imagen.

Ejemplo de animación con jQuery

$('#kick').motio({ frames: 10, fps: 10, paused: 1 });

Dentro de los parámetros definimos:

• La cantidad de frames, este numero va a ser igual al numero de fotogramas o imágenes distintas contenidas en el sprite.
• Los FPS (fotogramas por segundo) cuando más elevando sea este numero más fluida se verá la animación.
• Pausa. No hace falta decir mucho 😛

Como comenté en un principio la idea y funcionamiento de este plugin es muy sencilla, no obstante con algo tan básico podemos hacer grandes cosas, como por ejemplo, un juego. En el sitio oficial del plugin van a encontrar un mini-juego que demuestra lo que les digo.

Web: Motio