movimiento - GIF animado en lienzo HTML5
canvas to gif (5)
Bueno, como ya dijeron otras personas, tienes que dividir la animación en cuadros. Mi forma de abordar el problema es más una preferencia personal, pero abro el GIF en GIMP y, usando un complemento, convierto todos los cuadros que se muestran como capas individuales en una hoja de sprites. Entonces solo tengo que animar el sprite en el lienzo, que es mucho más fácil.
Aquí está el link para el complemento: D
En HTML5, ¿cómo puedo dibujar fácilmente (sin código complejo demasiado por favor) un GIF animado en un lienzo que funciona (con drawImage solo se muestra el primer cuadro en el lienzo)
Bueno, si la animación de lienzo automatizada de los archivos .gif no está disponible, puede intentar usar hojas de sprites, pero eso requeriría un poco más de código.
var img_obj = {
''source'': null,
''current'': 0,
''total_frames'': 16,
''width'': 16,
''height'': 16
};
var img = new Image();
img.onload = function () { // Triggered when image has finished loading.
img_obj.source = img; // we set the image source for our object.
}
img.src = ''img/filename.png''; // contains an image of size 256x16
// with 16 frames of size 16x16
function draw_anim(context, x, y, iobj) { // context is the canvas 2d context.
if (iobj.source != null)
context.drawImage(iobj.source, iobj.current * iobj.width, 0,
iobj.width, iobj.height,
x, y, iobj.width, iobj.height);
iobj.current = (iobj.current + 1) % iobj.total_frames;
// incrementing the current frame and assuring animation loop
}
function on_body_load() { // <body onload=''on_body_load()''>...
var canvas = document.getElementById(''canvasElement'');
// <canvas id=''canvasElement'' width=''320'' height=''200''/>
var context = canvas.getContext("2d");
setInterval((function (c, i) {
return function () {
draw_anim(c, 10, 10, i);
};
})(context, img_obj), 100);
}
Así es como abordaría el problema. Espero que esto haya sido de ayuda. (probado)
Creo que estás buscando http://slbkbs.org/jsgif
Desafortunadamente, el DOM no expone marcos individuales de un GIF, por lo que esto se hace descargando el GIF (con XMLHttpRequest), analizándolo y dibujándolo en un
<canvas>.
La animación de lienzo no es parte de la especificación de HTML5. Puede volver a GIF o considerar una biblioteca basada en JavaScript que represente SVG o que vuelva a Canvas / VML: http://raphaeljs.com/
Para cualquiera que todavía tenga problemas con esto, o para aquellos que no quieran cargar sus imágenes dinámicamente o averiguar cuántos marcos necesitan usar;
Deje el GIF animado en la página HTML, configúrelo para mostrar: bloque, visibilidad: visible y posición: relativa en el CSS. Sitúelo dinámicamente debajo del lienzo con un margen negativo superior / z-índice (o lo que sea). Luego configure un temporizador de JavaScript que invoque a drawImage repetidamente, tan rápido como lo necesite para refrescar la imagen correctamente.
Si la imagen no está visible en el DOM, la rutina drawImage no puede adquirir marcos posteriores de la animación. Si la imagen está absolutamente posicionada debajo del lienzo, la reproducción se retrasa.