O melhor da web 2016: desempenho de animação na web

Com a proliferação de aplicativos online (aplicativos de uma página), é possível oferecer uma experiência de usuário enriquecida com interfaces animadas.

Como fazer animações suaves? Como analisar o desempenho? Como otimizar o desempenho? Seguem algumas dicas inspiradas na apresentação de Freddy Harris no best of web 2016.
equipeBOW
Hoje a web quer competir com aplicativos. Para fazer isso, desenvolvemos aplicativos de uma página. A dificuldade é otimizar essas interfaces animadas para tornar a experiência do usuário a melhor possível.
Como fazer animações suaves? Como analisar o desempenho?

mecanismo de renderização
esquema de renderização de página da web

O layout

O navegador calcula o layout e determina a posição e o tamanho das “caixas” de acordo com a interação que elas têm entre elas (pais e irmãos).
As principais propriedades CSS usadas para o layout (display) são:

  • layout de bloco
  • Layout embutido
  • Layout de tabela
  • Layout posicionado
  • Layout de caixa flexível
  • Layout de grade

A pintura

Após calcular as posições, o navegador aplica os estilos visuais.
As principais propriedades CSS usadas para pintura são:

  • fundo
  • cor
  • Sombra da caixa
  • Cor da borda
  • ...

O composto

Todos os elementos de bitmap (imagens, vídeos, canvas) são enviados para a GPU (processador gráfico).
A GPU aplica operações de textura, como transformações ou transparência. Certos elementos e operações como transformação 3D, vídeo e tela, animação css, transparência, filtros css, etc. levam à criação de camadas que serão achatadas pela GPU para obter a renderização da página.
Para otimizar os desenvolvedores compostos, às vezes, use um hack de CSS do translateZ(0). Este hack é fortemente desencorajado e é recomendado usar a propriedade CSS will-change. Essa propriedade informa ao navegador qual elemento será alterado e quais propriedades serão alteradas.

Animações CSS

A otimização das animações permite obter uma animação suave a 60 fps, ou seja, aproximadamente 16.6 ms entre cada imagem.
[youtube https://www.youtube.com/watch?v=pfiHFqnPLZ4&w=560&h=315] Vamos dar um exemplo simples de animação de um quadrado.

Um primeiro método consiste em animar as margens

#teste { largura: 160px; altura: 160px; margem: 15px; transição: margem 1s; } #test.change { margin-top:100px; margem esquerda:100px; }

Para fazer essa animação, entramos na área de trabalho:

  • 16.74ms entre cada quadro
  • 59 FPS
  • Processamento de CPU de 3.23 ms

e no celular:

  • 31.29ms entre cada quadro
  • 31 FPS
  • Processamento de CPU de 28.90 ms

Um segundo método é animar o próprio quadrado.

#test{ largura: 160px; altura: 160px; margem: 15px; transição: transformar 1s; } #test.change{ transform: translate(100px, 100px); }

Entramos na área de trabalho:

  • 16.74ms entre cada quadro
  • 59 FPS
  • Processamento de CPU de 3.23 ms

e no celular:

  • 50.66ms entre cada quadro
  • 19 FPS
  • Processamento de CPU de 29.84 ms

Finalmente, um terceiro método consiste em animar o quadrado adicionando a propriedade will-change

#test{ largura: 160px; altura: 160px; margem: 15px; transição: transformar 1s; vontade-mudança: transformar; } #test.change{ transform: translate(100px, 100px); }

Nós obtemos :

  • 16.58ms entre cada quadro
  • 60 FPS
  • Processamento de CPU de 0 ms

A propriedade will-change informa ao navegador quais propriedades serão alteradas. O navegador pode assim antecipá-lo e planejar os recursos necessários para otimizá-lo.

animações javascript

Animações da Web também podem ser projetadas em javascript. Vários métodos são possíveis para otimizar essas animações.

requestAnimationFrame

Durante uma animação devemos utilizar um timer para realizar as transformações a cada n ms. requestAnimationFrame permite otimizar animações agrupando-as no mesmo quadro.
Ele é chamado antes de renderizar a animação.

function desenhar() { requestAnimationFrame(desenhar); // seu código de animação } requestAnimationFrame(draw);

A animação é otimizada porque está perfeitamente sincronizada. Portanto, exigirá menos recursos do processador gráfico.
Debouncing permite que várias chamadas sejam agrupadas em uma. Esta função é útil para animações do tipo de evento de rolagem, mouse e toque porque os eventos são chamados com muita frequência e o manipulador de eventos não é feito para suportar tantos.

API de animação da Web

Esta técnica nativa de javascript permite criar animações mais complexas, controlá-las e seqüenciá-las com a mesma eficiência das animações CSS.

element. animate([ {transform: 'translate(200px, -100%)'}, { transform: 'translate(200px, ' + window.innerHeight + 'px)'}], { duration: 1500, iterations: 10, atraso: 300 });

Este tipo de animação não requer o carregamento de scripts externos, o que otimiza a animação.
Este artigo é inspirado na apresentação de Freddy Harris durante o melhor da web 2016.
harry
Antoine Duplouy, cientista de UX @UXRepublic