Eu gostaria de sugerir uma solução alternativa. Ela dá um pouco mais de trabalho, mas te dá mais controle sobre a animação (permitindo que você não apenas pause, mas altere a a velocidade ou até mesmo reverta a direção frente/atrás). Ela utiliza uma excelente biblioteca chamada EaselJS.
O primeiro passo é converter o arquivo Gif para um formato de "folha de animação" (sprite sheet). Vou usar como exemplo esse Gif do Homer Simpson saltitando (fonte: We Love Animated Gifs):
O Gif animado contém uma série de imagens que são substituidas continuamente produzindo o efeito de animação. Nesse exemplo, a animação se dá pela intercalação de 10 imagens. Se você abrí-la em um editor como o Gimp (recomendadíssimo!), verá cada imagem em uma camada (layer) diferente:
A ideia é produzir a partir dessas camadas uma única imagem com cada camada disposta em uma matriz. Como são só 10 quadros, pode-se colocar uma ao lado da outra, produzindo o seguinte sprite sheet:
Bom, dá pra fazer isso com várias ferramentas (existem até algumas comerciais bacanas como o Texture Packer) ou até programando você mesmo alguma coisa, mas eu uso o Gimp mesmo (de graça!). :) Ah, com a ajuda de um ótimo plugin chamado G'MIC.
Funciona assim:
- Após abrir o arquivo Gif no Gimp, inverta as camadas (senão o empacotamento do G'MIC vai colocar os quadros de forma invertida do original). Para isso, execute a opção de menu CAMADA -> PILHA -> REVERTER ORDEM DAS CAMADAS.
- Então, com o G'MIC previamente instalado (na página do plugin a informações sobre como instalar), acesse-o por meio da opção de menu FILTROS -> G'MIC.
- Nos filtros disponíveis (conforme ilustração a seguir), encontre a opção "Layers to tiles" dentro da pasta "Layers" (selecionado em cinza no meio). Configure para utilizar uma linha no campo Y-TILES (indicado em vermelho na direita) e para processar todos as camadas e gerar uma nova imagem (indicados em vermelho na esquerda). Então, clique em OK.
Será gerada uma nova imagem com o sprite sheet desejado. Exporte-a para um png e construa o código como no exemplo a seguir:
<!DOCTYPE html>
<html>
<head>
<!-- Referência da biblioteca EaselJS -->
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script>
// Função de inicialização
function init() {
// Cria o palco com o canvas
g_oStage = new createjs.Stage("myCanvas");
var oHomerSpriteSheet = new Image();
oHomerSpriteSheet.onload = handleImageLoad;
oHomerSpriteSheet.onerror = handleImageError;
oHomerSpriteSheet.src = "homer_sheet.png";
// Atualiza o palco em uma taxa de 30 quadros por segundo
createjs.Ticker.addEventListener("tick", doUpdate);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(30);
}
// Função de tragamento do fim de carregamento da imagem
// Cria um sprite e adiciona ao palco.
function handleImageLoad() {
// Cria o sprite sheet (no código abaixo, 'this' é
// a referência para o objeto Image carregado)
var oSpriteSheet = new createjs.SpriteSheet({
images: [this], // this = objeto Image carregado
frames: {width: 270, height: 270, regX: 135, regY: 135},
animations: {
run: [0, 9, "run", 0.3]
}
});
// Cria o objeto sprite
var oSprite = new createjs.Sprite(oSpriteSheet);
oSprite.name = "Homer"; // Para facilitar o acesso
// Adiciona o sprite ao palco
g_oStage.addChild(oSprite);
// Centraliza o sprite no palco (note no sprite sheet que o ponto de
// registro é (135, 135), ou seja, no centro da imagem).
oSprite.x = g_oStage.canvas.width / 2;
oSprite.y = g_oStage.canvas.height / 2;
// Toca a animação chamada "run" (no exemplo, a única definida)
g_bPlaying = true;
oSprite.gotoAndPlay("run");
}
// Função de tratamento de erro do carregamento da imagem
function handleImageError() {
alert("Oops! Não consegui carregar a imagem do sprite sheet!");
}
// Função de atualização. Simplesmente atualiza o palco.
// A chamada de update no palco chama também o update de cada
// objeto contido (no exemplo, o sprite). Sem isso, a "animação"
// não acontece.
function doUpdate(oEvent) {
g_oStage.update();
}
// Função do botão para pausar/tocar a animação
function togglePause() {
var oButton = document.getElementById("toggleButton");
var oSprite = g_oStage.getChildByName("Homer");
g_bPlaying = !g_bPlaying;
if(g_bPlaying) {
oButton.innerHTML = "Pausar";
oSprite.play();
}
else {
oButton.innerHTML = "Tocar";
oSprite.stop();
}
}
</script>
</head>
<body onLoad="init();">
<canvas id="myCanvas" width="300" height="300">
Aqui deveria haver um canvas! :)
</canvas>
<button id="toggleButton" onclick="togglePause();">Pausar</button>
</body>
</html>
O código pode ser testado online no JSFiddle.
O código funciona assim:
- Na função
init
o palco (stage) é criado para representar o canvas na biblioteca createJS (o EaselJS faz parte desse pacote). Então, a imagem com o sprite sheet é carregada, com a indicação de uma função de tratamento do evento de término handleImageLoad
.
- Na função
handleImageLoad
o sprite sheet é criado e utilizado como parâmetro para o objeto Sprite
que é adicionado ao palco. O JSON com a definição do sprite sheet é bastante simples: ele indica a(s) imagem(ns) a ser(em) utilizada(s), configura os quadros (frames) da animação em termos de seu tamanho em pixels e da posição de registro (qual é o ponto que representa o x e y do objeto) e detalha as animações. As animações são construídas indicando um nome qualquer (no exemplo, "run"), o quadro de início (no exemplo, 0), o quadro de fim (no exemplo, 9 - lembrando que são 10 quadros), qual é a próxima animação a ser executada após o final desta (no exemplo, executa run
novamente) e um percentual de atualização relativo à taxa de atualização de 30 quadros por segundo (configurada no ticker
). Esse último valor pode ser ajustado para tornar a animação mais rápida (valores maiores) ou mais lenta (valores menores).
- A função
gotoAndPlay
executa uma animação com o nome dado (há a opção gotoAndStop
que executa uma única vez) e as funções stop
e play
respectivamente param e reiniciam a animação.
Por curiosidade, a reversão do sentido de animação pode ser realizada com a ajuda de um método chamado createjs.SpriteSheetUtils.addFlippedFrames
. Veja um exemplo neste link.
P.S.: Depois de tudo isso, pensei que talvez você não seja o produtor do Gif e por isso não consiga manipulá-lo previamente para gerar o sprite sheet. Bom, nesse caso, talvez seja possível utilizar algum outro código para converter online a imagem Gif em um sprite sheet (acho que vale uma pesquisa a respeito, mas a tarefa fica pra você ou pra outra pessoa que quiser/puder ajudar). :)
EDIT: O usuário @MisaelBraga excluiu sua resposta, mas nela ele citou uma fonte bacana em que o mesmo efeito (sprites em HTML5) é obtido diretamente com o uso do canvas, isto é, sem a necessidade de se utilizar a biblioteca EaselJS. A fonte pode ser acessada aqui. Se ele recriar a resposta com mais detalhes (pode até copiar o que eu estou escrevendo aqui, sem problemas), eu removo essa edição (por favor me avise para que eu o faça).
O princípio dessa solução é mesmo:
- Inicialmente ele cria um "palco" com o canvas e carrega a imagem do sprite sheet (função
onload
);
- Então, define um relógio de atualização (função
update
) com a ajuda da função setTimeout
do Javascript.
- Na função
update
está incluída a renderização (chamada para a função redraw
), onde o "sprite" é desenhado com a copia de um "pedaço" atual da imagem, ou seja, um quadro. A variável frame
controla o quadro atual, e a chamada de ctx.drawImage
indicando a posição inicial de cópia da imagem original com base no valor de frame
faz a "mágica". O tamanho do sprite é fixo em 96x54.
O sprite sheet utilizado no exemplo é o seguinte (reproduzido da fonte original):
E o código final (também reproduzido da fonte original) é esse:
<!doctype html>
<html>
<script type='text/javascript'>
var canvas = null;
var img = null;
var ctx = null;
var imageReady = false;
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
function onload() {
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext("2d");
img = new Image();
img.src = 'http://buildnewgames.com/assets/article/sprite-animation/simba.png';
img.onload = loaded();
resize();
}
function loaded() {
imageReady = true;
setTimeout( update, 1000 / 60 );
}
function resize() {
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
redraw();
}
function redraw() {
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (imageReady) {
ctx.drawImage(img, frame*96, 0, 96, 54,
canvas.width/2 - 48, canvas.height/2 - 48, 96, 54);
}
}
var frame = 0;
var lastUpdateTime = 0;
var acDelta = 0;
var msPerFrame = 100;
function update() {
requestAnimFrame(update);
var delta = Date.now() - lastUpdateTime;
if (acDelta > msPerFrame)
{
acDelta = 0;
redraw();
frame++;
if (frame >= 6) frame = 0;
} else
{
acDelta += delta;
}
lastUpdateTime = Date.now();
}
</script>
</head>
</script>
<body onresize='onresize()' onload='onload()' style='position: absolute; padding:0; margin:0; height: 100%; width:100%'>
<canvas id="gameCanvas"></canvas>
</body>
</html>
Também disponível no JSFiddle do autor.
Utilizando esse código, a "pausa" pode ser implementada facilmente evitando-se a atualização da variável frame
enquanto a pausa estiver ativada.