Resumo: o Chromium está atualizando os recursos de aceleração de hardware automaticamente para animações SVG, transformações baseadas em porcentagem e, em breve, cores de fundo e animações de clipe.
Quando se trata de desempenho de animação na Web, os termos "acelerada por hardware" e "acelerada por GPU" provavelmente surgirão. Mas o que isso significa? Estilos acelerados por hardware são aqueles que usam a GPU (Unidade de Processamento Gráfico) em vez da CPU (Unidade de Processamento Central) para renderizar estilos visuais. Isso ocorre porque a GPU pode renderizar mudanças visuais em uma página da Web mais rapidamente que a CPU.
O uso da GPU para descarregar transições e animações com muitos gráficos resulta em visuais mais suaves e menos instabilidade, já que essas animações não são afetadas pela linha de execução principal. Ao extraí-los da linha de execução principal, suas animações ignoram a massa de outros scripts ativos em execução na página, o que diminui a velocidade dos recursos visuais e cria instabilidade.
Como ativar animações aceleradas por hardware
As animações aceleradas por hardware são compostas como camadas e ajudam os desenvolvedores a alcançar animações de 60 QPS (quadros por segundo) suaves para melhorar o desempenho da renderização visual. Atualmente, há algumas maneiras de especificar e ativar animações e transições aceleradas por hardware na Web:
- Use as funções CSS
transformou faça a transição dos valoresopacityoufilter - Adicione a propriedade
will-changeao elemento. - Criar um desenho animado em tela com o
OffscreenCanvas - Criar um desenho 3D do WebGL
opacity, filter e
transform por enquanto, background-color e clip-path vão entrar na lista em breve. O que mais está sendo acelerado por hardware no Chromium? O pipeline terá algumas animações, como animações SVG, que os desenvolvedores solicitaram.
Animações SVG aceleradas por hardware
O SVG é uma ótima adição para qualquer site, e agora essas interações com SVG podem ter um desempenho melhor. A partir do Chromium 89, o Chrome se unirá ao Firefox para ativar a aceleração de hardware por padrão em animações SVG. O que você, como desenvolvedor, precisa fazer? Nada. Isso será aplicado automaticamente às animações SVG no Chromium 89 ou versões mais recentes.
Exemplo
Vejamos as diferenças entre uma animação SVG com e sem a aceleração de hardware. Indicadores de carregamento são elementos de interface usados com frequência, como este visto no facebook.com. Esses indicadores sugerem que o trabalho está sendo feito no servidor, enquanto o usuário aguarda uma resposta. No caso mostrado aqui, a resposta seria carregar resultados adicionais na barra lateral.
Ao abrir o DevTools, podemos começar a criar um perfil e realmente ver as diferenças entre uma experiência de animação acelerada por GPU e pela CPU.
Observe que, à esquerda (Chromium 87), a repintura ocorre sempre que o ícone de carregamento é animado (o que ocorre continuamente). À direita, não há repintura (Chromium 89 e Firefox). Podemos testar isso no painel de renderização do DevTools ao ativar a atualização do Paint.
Analisando mais de perto o painel "Desempenho", você pode ver novamente esse efeito e como ele afeta o desempenho geral da sua propriedade da Web. Você evita renderizar e pintar completamente o tempo da animação, o que significa animações mais suaves e aplicativos com melhor desempenho. Embora o Facebook não envie esse carregador baseado em SVG até que o suporte do navegador para SVG acelerado por hardware seja maior, isso permitiria mais flexibilidade em termos de temas, requisitos de dimensionamento e resolução e manutenção mais fácil.
Animações de porcentagem
A equipe do Interactions também está enviando suporte para animações de transformação de porcentagem no
Chromium 89. Animações baseadas em porcentagem descrevem interações que incluem movimento
baseado em porcentagem. Por exemplo, é possível aumentar algo em 20% ou deslizar um menu de barra lateral
responsivo do fora da tela usando algo como translateX: -100%.
Esses tipos de animações de interface são relativamente comuns, mas atualmente não usam a aceleração de hardware porque não era possível compor essas animações anteriormente. As porcentagens nas transformações dependem do tamanho da caixa (ou seja, layout), mas agora, desde que o tamanho do layout não mude a cada frame, o navegador pode pré-calcular os valores absolutos de transformação e executá-los como se o desenvolvedor tivesse fornecido valores de pixel. A boa notícia é que a equipe do Chromium está trabalhando nesse recurso e, em breve, esses tipos de animações serão compostos automaticamente e acelerados por hardware.
O que vem por aí?
Essas animações atualizadas vão deixar o estilo da Web muito mais suave. E, como mencionado acima, a equipe está sempre
tentando ver as próximas necessidades da Web. No momento, estamos programados para converter
background-color e clip-path para usar automaticamente a aceleração de hardware em versões futuras do
Chromium.
background-color é uma prioridade devido à alta contagem de
uso para transições e
efeitos, e o clip-path permite efeitos de transição com muito melhor desempenho em toda a Web. Quando o desempenho combina com a interatividade, todos ganham!
Imagem da capa: Siora Photography para o Unsplash.