Imagens de plano de fundo baseadas em telas

Eric Bidelman

Twitter GitHub Página inicial

Como animar imagens de plano de fundo de maneira programática

Há duas maneiras principais de animar imagens de plano de fundo:

1. Use CSS sprites para atualizar um background-position em JavaScript .
2. Hacks com .toDataURL() .

A primeira funciona muito bem se você tiver a imagem com antecedência, mas e se a origem precisar ser gerada de maneira programática, por exemplo, por um <canvas>? A solução no 1 é usar .toDataURL() na tela e definir o plano de fundo como o URL gerado:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

Há dois problemas com isso:

1. Os URLs data: adicionam uma sobrecarga de tamanho de aproximadamente 33% à imagem resultante.
2. Um monte de DOM tocando (el.style).

Os dois métodos são ineficientes: inaceitável para um app da Web de 60 qps sempre fluido.

Usar tela 2D como plano de fundo

DEMONSTRAÇÃO

Acontece que existe uma API não padrão que o WebKit tem há anos que pode usar o canvas como fonte para um segundo plano. No entanto, não há especificações publicadas para esse recurso.

Primeiro, em vez de especificar um URL para o verso:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

Use -webkit-canvas(), referenciando um identificador de string a um contexto de tela:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Em seguida, precisamos criar o contexto 2d com uma versão especial de .getContext():

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Observação:esse método está no objeto document, não na tela. O segundo argumento é o mesmo nome usado em -webkit-canvas().

Outras informações de Dave Hyatt:

Observação:há apenas uma tela CSS para um determinado identificador global por documento. Ao acessar o contexto de desenho, você também especifica o tamanho. A tela não será limpa se você solicitar o mesmo tamanho várias vezes. Especificar um novo tamanho é equivalente ao tipo de comportamento que você esperaria se redimensionasse um elemento <canvas>. Portanto, o buffer da tela será apagado.

Observação:todos os objetos que observam uma tela CSS de mesmo nome estão compartilhando essa tela. Isso significa que (semelhante à forma como os GIFs animados funcionam), você pode fazer animações e fazer com que elas aconteçam em conjunto em todos os clientes do canvas. As alterações no desenho serão propagadas para todos os clientes automaticamente.

Animações

Como mostrado na demonstração, podemos reutilizar requestAnimationFrame() para gerar uma animação. Isso é ótimo, porque assim que tudo é configurado, a associação entre CSS e o elemento canvas é preservada. Não é preciso mexer no DOM.

A demonstração não é animada no Chrome?

O canal estável atual do Chrome (versão 23) tem crbug.com/161699, que impede que uma animação requestAnimationFrame() atualize o plano de fundo corretamente. Isso foi corrigido no Chrome 25 (atualmente Canary). A demonstração também funciona bem no Safari atual.

Benefícios de desempenho

Estamos falando de canvas aqui. As animações aceleradas por hardware agora estão totalmente disponíveis, pelo menos para os navegadores em que esse recurso funciona. Só para reiterar, não é necessário violar o DOM do JS.

Usar o WebGL como segundo plano

Espere um pouco. Isso significa que podemos processar um plano de fundo CSS usando webgl? Claro que sim! WebGL é apenas um contexto 3D para canvas. Basta trocar "experimental-webgl" em vez de "2d" e pronto.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Veja uma prova de conceito que contém um div com o segundo plano desenhado usando sombreadores de vértice e fragmento: DEMO

Outras abordagens

É importante observar que o Mozilla tem o -moz-element() (MDN) há algum tempo. Isso faz parte das especificações CSS Image Values and Replaced Content Module Level 4 (Valores de imagens CSS e módulo de conteúdo substituído) e permite que você crie uma imagem gerada a partir de HTML arbitrário: vídeos, telas, conteúdo DOM etc. No entanto, há preocupações de segurança em ter acesso total às imagens de snapshot do DOM. Essa é principalmente a razão pela qual outros navegadores não adotaram esse recurso.