Animação usando JavaScript? Ou animação usando CSS? Essa pergunta atinge a todos os desenvolvedores front end (pelo menos uma vez) durante nossas carreiras técnicas.
Com o tempo, os geeks de JavaScript criaram muitas bibliotecas para fazer animação Web no navegador, e todos parecem convencidos a usar essas bibliotecas como a solução pronta para uso.
Mas, espere, essa é a solução certa? Devemos fazer animações usando JavaScript? Ou podemos confiar na implementação nativa de CSS para fazer animações de uma maneira melhor e com melhor desempenho?
Animações CSS: o que se deve animar
Se você está lendo este tipo de artigo, provavelmente também faz animações ou está familiarizado com animações JavaScript (no mínimo, tem interesse pelo assunto).
Então, vamos explorar o conceito de “animação baseada em CSS” (CSS based animation) em detalhes e vários tipos de animação em CSS, juntamente com suas implicações de desempenho.
A base da animação na Web moderna se baseia em algumas propriedades CSS que você frequentemente usa/usará em implementações pesadas de CSS based animations:
position(absolute/relative)transformopacitytop,right,bottom,left- E mais
Para entrar na questão se animações CSS trazem mais benefícios que animações com JavaScript, vamos começar analisando os resultados de 2 experiências com propriedades CSS diferentes para animação.
Cenário 1: position absolute com left e top
See the Pen Animate with Top/Left by virendra (@vpsk) on CodePen.
Cenário 2: transform
See the Pen Animate with Translate by virendra (@vpsk) on CodePen.
Será que, só de observar estas animações CSS feitas de maneiras diferentes, é possível tirar conclusões sobre performance e tempo de renderização?
Ao examinar esses 2 exemplos, parece que funcionalidades semelhantes foram implementadas, apesar de abordagens diferentes terem sido usadas.
Métricas de performance das 2 técnicas de animação CSS
No entanto, quando as métricas de performance são aferidas (usando as DevTools do Chrome), é possível notar uma diferença real em termos de desempenho para ambos os casos.
Antes de um aprofundamento no entendimento dessas métricas de desempenho das animações, é preciso entender como o navegador processa a UI e todas as ações que ele executa quando qualquer atualização ocorre na interface.
Então, a criação da interface do usuário começa com:
- Calcular os estilos que serão aplicados aos elementos (Recalculate Style)
- Criação do layout dos elementos e posicioná-los em tela (Layout)
- Adicionar pixels em todos os layouts criados, algo como criar bitmap para cada camada; a GPU usa esse bitmap para renderizar a camada na tela (Paint)
- Por fim, criação das camadas na tela, construindo uma pilha de camadas; a vista superior dessa pilha será semelhante a uma página Web completa, na qual cada elemento terá sua própria posição (Composite Layers)
A criação da Composite Layer é um local onde a CPU conversa com a GPU para lidar com animações. Usando propriedades como transform e opacity, é possível forçar o navegador a fazer animação usando GPU em vez de CPU.
Como a GPU ajuda a executar animações suaves?
A GPU é outra maquininha para lidar com animações e pode lidar com um grande número de cálculos de UI.
Portanto, quando da criação da Composite Layer acontece, ela cria outra camada. Essa é outra maneira de ajudar a evitar a re-renderização do elemento que está sendo animado e outras partes dos elementos da interface.
Na figura mostrada abaixo, ambas as bolas vermelhas parecem estar na mesma camada, porém, quando se visualiza essas camadas em 3D, descobre-se que a animação Transform tem outra camada que foi criada para a bola vermelha, o que provê uma animação mais suave (smooth animation).
A GPU mantém essa árvore de objetos de renderização na memória e, sem renderizar novamente, pode colocar essa camada em cima das demais. Mas, no caso da animação com Top/Left, a mesma camada está sendo renderizada repetidamente devido a alterações nessas propriedades.
Se se verificar o comportamento dessas 2 propriedades CSS, é possível perceber que as propriedades left e top afetam o layout, causando também operações de repintura (repaint) e composição (composite).
Aqui dá para perceber mais facilmente o ponto:
A animação da bola acima tem uma clara diferença entre translate e top/left.
No caso da animação top/left, a bola é renderizada em cada posição até atingir o destino final e, quando começa a se mover para a posição inicial novamente, inicia a parte de renderização.
Ambas as imagens são screenshots da aba Performance das DevTools, evidenciando a diferença de desempenho entre animações CSS feitas com translate e top/left.
Ao evidenciar uma única task de cada uma, é possível começar a entender que a atividade executada pela task é diferente nos 2 casos.
No caso Top/Left, a tarefa executava a criação de layout (layout creation), pintura (painting) e recálculo de estilo (style recalculation); no caso Translate, uma única tarefa executada pela GPU move a camada composta sem renderizar nada no DOM.
Então, com a potência da GPU, é possível ficar com a main thread livre. Isso ajuda a melhorar a performance da animação e a main thread fica ocupada com a parte de rendering layout.
O gráfico da métrica de desempenho acima fornece mais evidências, explicando a extensão exata em que a main thread está ocupada com o recálculo de layout e estilo. Este gráfico reflete continuamente as alterações que estão acontecendo na UI.
Conclusão
Esta foi uma sucinta explicação (embasada com testes reais e gráficos de performance) dos benefícios de animação baseada em CSS (CSS based animation).
Além de conhecer um pouco mais sobre como se dá o processo de renderização de páginas Web, agora você sabe que há muitas vantagens em escolher animações CSS, especialmente associadas a técnicas corretas de animação, que se valem de otimizações e características nativas para conseguir as tão desejadas smooth animations.