44

Quero colocar no meu site, um sistema igual o do 9gag, onde as pessoas podem pausar e dar play em um .gif. Eu sei que tenho que usar duas imagens, um .jpg e um .gif, mas tentei algumas funções e não consegui.

Achei essa função :

    function is_gif_image(i) {
        return /^(?!data:).*\.gif/i.test(i.src);
    }

    function freeze_gif(i) {
        var c = document.createElement('canvas');
        var w = c.width = i.width;
        var h = c.height = i.height;
        c.getContext('2d').drawImage(i, 0, 0, w, h);
        try {
            i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
        } catch(e) { // cross-domain -- mimic original with all its tag attributes
            for (var j = 0, a; a = i.attributes[j]; j++)
                c.setAttribute(a.name, a.value);
            i.parentNode.replaceChild(c, i);
        }
    }

    function unfreeze_gif(id, src) {
     i = document.getElementById(id);
        i.src = src;
    }

Mas eu não sei o que passar por parâmetro e nem como usá-las no HTML.

0

2 Respostas 2

26

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):

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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:

  1. 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.
  2. 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.
  3. 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.

inserir a descrição da imagem aqui

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:

  1. Inicialmente ele cria um "palco" com o canvas e carrega a imagem do sprite sheet (função onload);
  2. Então, define um relógio de atualização (função update) com a ajuda da função setTimeout do Javascript.
  3. 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):

inserir a descrição da imagem aqui

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.

19

+1 por uma pergunta interessante.

Essa(s) funções que você colocou funcionam bem. Não é de facto possivel parar um .gif que é por natureza animado. As outras soluções que conheço são:

  • substituír o gif por uma imagem estática (que você referiu)
  • repôr a cada milisegundo o img.src para o gif estar sempre na primeira frame. Desaconselho pois tem custos altos de performance.

Deixo aqui um exemplo e código comentado:

Exemplo

Javascript comentado:

window.onload = function () { // quando a página carregar, fazer o que está dentro da função
    document.body.appendChild(i); // juntei ao meu documento a imagem criada em baixo
    var parar = document.getElementById('parar');         // botão exemplo
    var continuar = document.getElementById('continuar'); // botão exemplo
    parar.addEventListener('click', function () {  // chamar a função freeze_gif() quando carrego no botão parar
        freeze_gif(i)
    });
    continuar.addEventListener('click', function () {
        unfreeze_gif('minhaImagem', src)   // chamar a função unfreeze_gif() quando carrego no botão continuar
    });
}

function is_gif_image(i) { // verificar se o elemento i tem um src válido
    return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) { 
    var c = document.createElement('canvas'); // criar um elemento canvas (que na verdade nunca se usa na página)
    var w = c.width = i.width;   // dar a mesma largura que a imagem
    var h = c.height = i.height; // dar a mesma altura que a imagem
    c.getContext('2d').drawImage(i, 0, 0, w, h); // desenhar a imagem nesse canvas que está na memória
    try {
        // este método do canvas permite guardar o estado/imagem actual do canvas numa imagem
        // assim atribui à imagem (src do elemento i) o conteudo retornado por .toDataURL()
        i.src = c.toDataURL("image/gif"); 
    } catch (e) { 
        console.log('Erro: ',e); // adicionei este log para a console. Aqui dispara um erro no caso de a imagem estar num dominio diferente. Isso não é aceite.
        for (var j = 0, a; a = i.attributes[j]; j++)
        c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}

function unfreeze_gif(id, src) {
    i = document.getElementById(id); // ir buscar o elemento passado a ID, aqui você pode modificar para passar o proprio elemento, depende de como vai usar depois
    i.src = src;  // voltar a atribuir a imagem original, que é animada, ao elemento img. Aqui a imagem começa da primeira frame
}

var i = document.createElement('img'); // crio um elemento img
i.id = 'minhaImagem';  // dou-lhe um ID para poder chamar mais tarde
var src = 'http://www.thisiscolossal.com/wp-content/uploads/2013/01/1.gif'; // aqui usei em vez deste link, a mesma imagem mas em Base64. Assim conseguí fazer a demo sem ter problemas de CORS
i.src = src; // atribuir o link ao src da img
1
  • 3
    Que interessante ! +1 - muito legal isto, não sabia que dava de fazer Commented 19/02/2014 às 11:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .