Se lee en 2 minutos

Animación sprite sheets con CSS3 es un ejemplo de uso de distintos fotogramas para crear sensación de movimiento.

Primero hay que crear una tira horizontal con todos los fotogramas que forman parte de la animación. Para ello se pueden utilizar diversas herramientas (incluso online). En este caso he utilizado Adobe Illustrator para posicionar y redimensionar cada forma vectorial en una mesa de trabajo independiente. Una vez colocados todos los fotogramas los he exportado como png y los he importado a Adobe Photoshop para generar el sprite sheet definitivo al tamaño adecuado. Cada fotograma ocupa un espacio de 300 x 300 píxels, con lo que el tamaño total del sprite sheet dependerá de la cantidad de fotogramas que tenga nuestra animación.

Ya en el HTML creamos los DIV contenedores con sus class correspondientes. Estos DIV serán los únicos elementos que tenga el BODY, ya que CSS es el encargado de toda la magia (¡no hace falta nada de JavaScript!). Los DIV tienen un tamaño de 300 x 300 píxels, coincidiendo con el tamaño de cada fotograma de su sprite sheet.

El truco está en añadir las tiras de fotogramas como fondo (background-image) de cada DIV. Creamos @keyframes (con los prefijos “-webkit-” y “-moz-” por compatibilidad) e indicamos las posiciones inicial y final de la tira de fotogramas. La posición inicial es 0 y la final es el ancho total de la tira de fotogramas. De esta manera la imagen recorre de lado a lado el DIV, en el tiempo que hayamos especificado en el CSS, pudiendo ir más rápido o más lento según los parámetros de la animación. Finalmente hacemos un loop infinito, ya que en este caso las animaciones no llevan interacción añadida.

Lo ideal es mirar el código del ejemplo para revisar cómo funciona todo.

Las ventajas que tiene utilizar sprite sheets son muchas respecto a usar gif animados. En primer lugar, tenemos un control total del fotograma que queremos mostrar en cada momento. Esto es muy útil por ejemplo en los juegos 2D. En estos casos utilizaremos además JavaScript para “escuchar” la interacción del usuario y mostrar a nuestro personaje en la posición o situación adecuada (andando, saltando, agachado…)

Además mediante el uso de @keyframes controlamos la velocidad de la animación, que sería el equivalente a los fps (frames por segundo). Esto nos permitiría por ejemplo crear aceleraciones…

El peso del archivo y la calidad de imagen también son una ventaja en muchos casos.

Aquí puedes ver el ejemplo.

 

Suscríbete a tonalidad.es