Las aprovecharemos en esta ocasión para un ámbito no siempre suficientemente explícito en nuestras codificaciones, la optimización del código, y más concretamente, mediante sprites animados.

Veremos cómo en esencia no precisaremos nada de JavaScript para ello; aunque sí lo usaremos como algo necesario para labores de control de las animaciones; por tanto minimizando al máximo su utilización.
Aún cabría un paso más en la optimización del código, algo que hemos tratado con anterioridad: la inclusión del sprite en forma de imagen embebida, pero eso es algo que dejamos para su posterior experimentación.

Respecto al manejo de sprites mediante CSS3, nos remitimos a nuestro anterior artículo HTML5 optimizado mediante CSS/CSS3. Sprites e imágenes embebidas.

En el presente artículo hablaremos de:

• El tratamiento de sprites mediante CSS3
• La animación de sprites mediante CSS3 puro
• El soporte dado para ello por los diferentes navegadores de Internet
• El modo de controlar las animaciones con código JavaScript complementario

Utilizaremos un sprite en formato PNG de fondo transparente y ocho imágenes, tal como se muestra en la figura adjunta:

Animación de un sprite mediante CSS3

La especificación de las animaciones CSS3 en modo borrador en su estado actual, en su forma última, se puede consultar en la siguiente dirección de Internet del World Wide Web Consortium (W3C): w3.org/TR/css3-animations

Esencialmente deberemos tratar con una regla y una propiedad, que describimos seguidamente:

La regla @keyframes es el núcleo de la definición de la animación en CSS3. Dentro de ella se especificará el estilo que se aplicará a la evolución de la animación. Esta regla se asocia a una propiedad correspondiente, de lo contrario no tendrá efecto alguno. Dicha propiedad es la denominada "animation". (w3schools.com/css3/css3_animations.asp)

• Para nuestro caso, se utilizarán las cotas from … to, que marcarán los estados inicial y final de la animación. Eso representa el valor inicial (0%) y el final (100%), interpolándose automáticamente los valores intermedios marcados en el valor de la función de iteración descrita en la propiedad de animación asociada –véase seguidamente-
• También sería posible utilizar valores porcentuales de evolución, marcando estadios de evolución al 10, 20, … 90%, por ejemplo
• Aunque no es obligatorio, es recomendable, en éste caso, también marcar los estados del 0 y 100%

La propiedad animation, por su parte, define las propiedades que tendrá la animación en sí. En ella se pasan una serie de parámetros –valores. (w3schools.com/cssref/css3_pr_animation.asp).

Su sintaxis es, en la forma más completa:
animation: name duration timing-function delay iteration-count direction;

Valor
name	Nombre del keyframe que contiene –define- la animación
duration	Especifica el tiempo que tardará la animación en reproducirse
timing-function	Normalmente indicará las etapas de la animación
delay	Tiempo de retardo antes de que comience la animación
iteration-count	Recuento del número de veces que se repetirá
direction	Indica, de repetirse, si se realizará en reversión o en ciclos con reinicio

Los valores pueden definirse separadamente, por ejemplo:
animation-duration: 0.8

• El valor animation-timing-function que utilizaremos es la función steps, que marca el número de etapas de la animación, que a su vez coincidirá con el número de fotogramas del sprite
• El valor animation-iteration-count puede tomar cualquier valor entero o infinite, que implica un bucle infinito
• El valor animation-direction puede valer normal –valor por defecto- o alternate, en éste último caso se llevará a cabo en ciclos alternos en modo inverso.

Soporte en los diversos navegadores

La animación de sprites mediante CSS3, tal cual las exponemos en el presente artículo, mediante código CSS3 con @keyframes y animation:

• Es soportado, tal cual se define por el W3C, en Internet Explorer 10, Opera y Firefox (Mozilla) en sus versiones más recientes
• Los restantes navegadores precisan, al menos en el momento presente, de soporte particular para su ejecución. Dicho lo dicho, todos disponen de tales soportes –webkit, …-. Naturalmente, eso es algo que puede cambiar es cualquier nueva versión de los respectivos navegadores

Ejemplo de animación de sprites mediante CSS3

El ejemplo que sigue ilustramos la animación del sprite mostrado en la imagen del inicio del artículo; el código se muestra en el Listado 1 y esencialmente consta de:

• La propiedad animation toma como primer parámetro el nombre de la propiedad que define la animación, véase más adelante
• Su segundo parámetro fija el tiempo en segundos en que se realizará el ciclo de una animación completa, 0.8s
• El tercer parámetro fija la función que realizará el ciclo de animación, se trata de steps, que toma a su vez de parámetros el número de etapas, 8, y se indica que eso marca el final del ciclo
• El cuarto y, para nuestro caso, último parámetro, indica que el ciclo se repetirá indefinidamente, se le da el valor infitite
• Respecto a la regla @keyframes, se da en su formato from … to
• Eso supone fijar su punto de comienzo y su punto de finalización, que serán interpolados en base a la función definida en la propiedad animation
• Dado que se trata de un sprite en línea, sólo se da el valor de la cota de "background-position". Nótese que la cota se pasa con valor negativo, siendo los datos del comienzo y del final del sprite
• Hemos dado el código con el soporte para los casos particulares de los diversos navegadores, aunque en sus versiones más recientes no los precisasen, como hemos comentado en el apartado anterior –Soporte en los diversos navegadores-

Nótese que se hace para todos los casos a modo de ilustración, dado que algunos, como las versiones anteriores a Internet Explorer 10, por poner un ejemplo, no dan soporte a este tipo de animación CSS3, mientras que la 10 no precisa de código particular alguno.

Listado 1: Ejemplo de animación de sprites con CSS3

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

<style>
@keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-ms-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-o-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-webkit-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-moz-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

.recorte {
width: 70px;
height: 112px;
background-image: url("cartero.png");
-ms-animation: cartero .8s steps(8, end) infinite;
-webkit-animation: cartero .8s steps(8, end) infinite;
-moz-animation: cartero .8s steps(8, end) infinite;
-o-animation: cartero .8s steps(8, end) infinite;
animation: cartero .8s steps(8, end) infinite;
}
</style>
</head>
<body>

<div class="recorte"></div>
</body>
</html>

Control de la animación mediante JavaScript

En el Listado 2 hemos incluido código JavaScript complementario, no para la animación en sí, sino para el control de la animación. Esto es, para la paralización y reanudación de la animación.

Lo añadido es muy simple, se trata de programar botones de comando que hagan uso de la función "stopAnimation" y "startAnimation", que modifiquen el estado del estilo de animación "animationPlayState": El código JavaScript se recoge en el breve listado inmediatamente debajo y sólo cabe resaltar:

• El valor de animationPlayState se permuta de paused a running, para, respectivamente, pausar y reanudar la ejecución de la animación
• El sobre qué se aplica el estilo se programa con una simple llamada DOM al elemento DIV que contiene la animación
• La codificación de los botones de comando se puede observar en el Listado 3, al final, en forma de dos componentes button que llaman a las funciones JavaScript cuando son pulsados

<script>

function startAnimation() {
document.getElementById("recorte").style.animationPlayState = "running";
}

function stopAnimation() {
document.getElementById("recorte").style.animationPlayState = "paused";
}

</script>

Con todo, el Listado 2 nos muestra nuestro ejemplo final, listo para utilizarse con los distintos navegadores, con las mismas consideraciones que hemos realizado al respecto en el ejemplo inicial.

Listado 2: Ejemplo de animación de sprites con CSS3 y controles de ejecución programados en JavaScript

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

<style>
@keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-ms-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-o-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-webkit-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

@-moz-keyframes cartero {
from {
background-position: 0px;
}

to {
background-position: -560px;
}
}

.recorte {
width: 70px;
height: 112px;
background-image: url("cartero.png");
-ms-animation: cartero .8s steps(8, end) infinite;
-webkit-animation: cartero .8s steps(8, end) infinite;
-moz-animation: cartero .8s steps(8, end) infinite;
-o-animation: cartero .8s steps(8, end) infinite;
animation: cartero .8s steps(8, end) infinite;
}
</style>

<script>

function startAnimation() {
document.getElementById("recorte").style.MsAnimationPlayState = "running";
document.getElementById("recorte").style.webkitAnimationPlayState = "running";
document.getElementById("recorte").style.MozAnimationPlayState = "running";
document.getElementById("recorte").style.OAnimationPlayState = "running";
document.getElementById("recorte").style.animationPlayState = "running";
}

function stopAnimation() {
document.getElementById("recorte").style.MsAnimationPlayState = "paused";
document.getElementById("recorte").style.webkitAnimationPlayState = "paused";
document.getElementById("recorte").style.MozAnimationPlayState = "paused";
document.getElementById("recorte").style.OAnimationPlayState = "paused";
document.getElementById("recorte").style.animationPlayState = "paused";
}

</script>

</head>
<body>
<div id="recorte" class="recorte"></div>
<button id="Pausar" name="Pausar" onclick="stopAnimation()">Pausar</button>
<button id="Animar" name="Animar" onclick="startAnimation()">Animar</button>
</body>
</html>

Conclusiones

A lo largo del presente artículo hemos expuesto el cómo programar una animación de sprites mediante CSS3 y cómo controlarla mediante algo de código JavaScript.

Hemos comprobado la simplicidad del código subyacente y una forma más de añadir animaciones a nuestras páginas web y además de forma optimizada. Tal como describíamos al comienzo, sólo nos quedaría un punto importante final, que dejamos a modo de ejercicio: insertar embebida la imagen en el archivo HTML, mediante "Base64", por ejemplo, tal como hicimos en el artículo cuya referencia hemos dado al comienzo.

Esperamos que todo lo expuesto les haya servido de ayuda. Hasta nuestro próximo artículo, felices horas de programación.