APNG – Animações em PNG

Postado em: 4 de março de 2009 por Pedro Rogério

O formato de arquivo APNG (Animated Portable Network Graphics) é uma extensão de imagens animada do PNG (Portable Network Graphics). Ele permite imagens animadas que funcionam de forma semelhante aos arquivos de formato GIF animado, mantendo a compatibilidade com arquivos PNG sem animação. Sua finalidade principal é considerada no uso dos aplicativos GUI e XUL.

O primeiro quadro de um arquivo APNG é armazenado como um fluxo PNG normal, e portanto a maioria dos decodificadores PNG antigos poderão exibir o primeiro quadro de um arquivo APNG. O quadro velocidade dos dados e quadros de animação extra são armazenados em blocos extras (conforme fornecido pela especificação PNG original).

APNG compete com Multiple-image Network Graphics (MNG), um formato poderoso para animações bitmap, criado pela mesma equipe do PNG. A vantagem do APNG é o menor tamanho da biblioteca e compatibilidade com as implementações mais antigas do PNG.

Querem ver um exemplo, olhem para a imagem abaixo, desculpem-me os usuários de Internet Explorer, mas APNG só funciona nos browsers mais recentes:

Spinfox

Verificar compatibilidade entre browsers

Existe uma forma bem simples de verificar se seu browser possui suporte a APNG, que eu acabei descobindo aqui, é um JavaScript que consiste no seguinte:

01.(function(_global) {
02.  var apng_test = new Image(),
03.  canvas = document.createElement("canvas"),
04.  ctx = canvas.getContext("2d");
05.  apng_test.src = "apng-test.png"; // a data URI will cause a security error so you _have_ to link to external resource
06.  // frame 1 (skipped on apng-supporting browsers): 0,0,0,255
07.  // frame 2: 0,0,0,0
08.  apng_test.onload = function() {
09.    ctx.drawImage(apng_test, 0, 0);
10.    _global.apng_supported = ( ctx.getImageData(0, 0, 1, 1).data[3] == 0 );
11.  }
12.})(this);

Esse script foi desenvolvido por Elijah Grey e você pode ver uma demonstração aqui.

Mais informações

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *