JavaScript para controlar la animación de la imagen?

Question

Me gustaría tener un personaje animado en la página, con diferentes animaciones para diferentes comportamientos. Actualmente tengo dos ideas de cómo podría funcionar:

IDEA 1: Tenga cada comportamiento como un GIF animado y use JavaScript para cambiar los archivos GIF cuando cambie el comportamiento. Upside: las animaciones están en la imagen misma, lo que deja menos trabajo para JS. Desventaja: No hay forma (que yo sepa) de que JavaScript diga en qué marco está el GIF, cuándo termina la animación/loops, etc.

IDEA 2: Tenga cada fotograma de cada animación como una imagen PNG y use JS para alternar entre fotogramas, con algún preloader para asegurar que todas las imágenes estén listas antes de que comience la animación. Upside: mucho más control sobre la secuencia de animación. A la baja: muchos marcos ...

¿Cuál de estas dos ideas sería mejor? (Me gustaría evitar el uso de Flash para esto, por cierto)
Me estoy inclinando hacia la idea 2, para un mejor control que ofrece. Dado que el sitio ya tiene un temporizador que se ejecuta cada 50 ms, no sería demasiado agregar esta animación a ese sistema de temporizador.

Answer 1

Sé que esto es viejo, pero daría la opción 3, que es algo similar a la opción 2 con un giro.

En lugar de cargar marcos, tendría que cargar un gran mapa de sprites con todos los marcos y posiblemente un mapa de todas las coordenadas de animación +. Tendrás el sprite como fondo para un div usando la dimensión correcta. Tendría que mover la imagen de fondo al marco correcto.

Puede tener todos los eventos en una línea diferente y cada cuadro de animación en una columna diferente. Esto hará una cuadrícula que puedes controlar fácilmente.

Plus

• buen control sobre la animación y marcos
• probablemente más rápido a la carga y se cambia de imagen
• Usted no tiene que crear varias conexiones al servidor para cargar todas las animaciones
• Png le da mejor resultado alfa que gif

Minus

• usted tiene que manejar todas las animaciones por sí mismo

Answer 2

La idea 1 no funcionará, ya que JavaScript no tiene forma de controlar el marco actual de un GIF animado, ni en todos los navegadores, ni en alguna extensión específica (ActiveX/Mozilla específica) que yo sepa.

Creo que te queda la idea 2. No sé qué tan suaves son los resultados que puedes lograr con este método, sin embargo, tendrías que probar.

Answer 3

Para la idea 1, puede usar el método setTimeOut() para desencadenar un evento después del tiempo que el GIF lleva al bucle. El problema con esto, sin embargo, es que el GIF puede comenzar en un momento diferente al javascript.

Personalmente, iría por la idea 2; siempre que los marcos sean relativamente pequeños, el cliente descargará todas las imágenes con bastante rapidez (un PNG de 16x16px es ~ 500 bytes). La computadora del cliente no tendrá problemas para mover los marcos.

Otra idea sería poner todos los cuadros uno debajo del otro en una imagen larga, y usar CSS y jQuery (o JavaScript vainilla) para modificar la propiedad CSS background-position cada 50 ms. Esto significaría una imagen más pequeña y tal vez un poco menos de codificación.

Answer 4

Es posible que desee echar un vistazo a freezeframe.js. Utiliza un elemento canvas para extraer el primer fotograma de un GIF para pausarlo.