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:

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:

view sourceprint?

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

• Site Oficial
• Better animations in Firefox 3