in HTML5, come posso disegnare facilmente (codice complesso non troppo per favore) una GIF animata in una tela che funziona (con drawImage solo primo fotogramma è mostrato nella tela) di animazioneGIF animato in HTML5 canvas
Tela non fa parte delle specifiche HTML5. O tornare a GIF o considerare una libreria a base di JavaScript che rende SVG o scende di nuovo a tela/VML: http://raphaeljs.com/
Credo che siete alla ricerca di http://slbkbs.org/jsgif
Purtroppo, il DOM non espone i singoli fotogrammi di una GIF, quindi questo viene fatto scaricando la GIF (con XMLHttpRequest), analizzandola e disegnandola su un
<canvas>.
Beh, se l'animazione canvas automatizzata dei file gif non è disponibile, si potrebbe provare a utilizzare sprite-sheets, ma che in effetti richiederebbe un po 'più di codice.
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);
}
Ecco come affrontarei il problema. Spero che questo sia stato utile. (testato)
Questa è una specie di vecchio. Il modo in cui lo affronterei ora sarebbe molto diverso. Se non ti dispiace aggiungere una nuova libreria al tuo codice usa una delle tante alternative disponibili suggerite in questi commenti. Tenendo conto dell'avvento di ES6, questo sarebbe più facilmente ricostruito come una classe con molte più funzionalità. :) –
Per tutti coloro che hanno ancora problemi con questo, o coloro che non vogliono caricare le loro immagini in modo dinamico o capire quanti fotogrammi hanno bisogno di usare;
Lascia la GIF animata nella pagina HTML, imposta su display: blocco, visibilità: visibile e posizione: relativo nel CSS. Posizionalo dinamicamente sotto la tela con un margine-top/z-index negativo (o cosa hai). Quindi imposta un timer JavaScript che richiama drawImage ripetutamente, alla velocità necessaria per aggiornare correttamente l'immagine.
Se l'immagine non è visibile nel DOM, la routine drawImage non può acquisire i fotogrammi successivi dell'animazione. Se l'immagine è posizionata in modo assoluto sotto l'area di disegno, i ritardi di rendering.
Non è possibile eseguire questo tipo di stratificazione a meno che non si inseriscano più tele uno sopra l'altro – trinalbadger587
Oh, è stato modificato entro la fine del 2016? Perché funzionava perfettamente quando l'ho fatto sia su Chrome che sul VTC1010 nel 2014. – Ayelis
Bene, come già detto da altri, è necessario suddividere l'animazione in frame. Il mio modo di affrontare il problema è più di una preferenza personale, ma apro GIF in GIMP e usando un plugin converto tutti i fotogrammi che vengono visualizzati come singoli livelli in un foglio sprite. Quindi devo solo animare lo sprite sulla tela che è molto più semplice.
Ecco la link per il plugin: D
Questo può essere utile: https://github.com/matt-way/gifuct-js – JoeRocc