A ciência aplicada do desempenho em tempo de execução

No final do ano passado, criei o site Chrome Dev Summit. Eu queria que tivesse um visual e um estilo de Material Design, já que é uma ótima linguagem de design, e achei que seria uma ótima opção para o tipo de site que eu queria criar. Mas, como acontece com qualquer nova linguagem de design, há perguntas, desafios e decisões a serem tomadas, especialmente ao lidar com as convenções da Web.

Um aspecto do site que foi particularmente desafiador de criar foi o efeito de preenchimento total ao clicar em um cartão.

Conseguir um efeito como esse para ser executado a 60 fps exigiu um pouco de reflexão, criação de protótipos e algumas concessões interessantes. Na Conferência de Desenvolvedores do Chrome, falei sobre esse efeito e expliquei em detalhes como eu o criei.

Como criar uma animação de alto desempenho

Animações de alto desempenho, hoje, pelo menos, são aquelas que favorecem o compositor do navegador. Se você conseguir manter a mudança de propriedades de transformação e opacidade, normalmente terá um ótimo desempenho. A abordagem geral que segui para a animação de cards faz exatamente isso:

1. Meça a posição de todos os elementos no card quando ele está recolhido.
2. Alterne as classes do card para expandi-lo (sem animação).
3. Meça novamente a posição dos elementos no card, agora que ele está aberto.
4. Calcule as diferenças.
5. Aplique transformações negativas para mover os elementos de volta para as posições iniciais.
6. Ative as animações.
7. Remova as transformações negativas e veja os elementos irem até os locais finais na tela.

Tudo isso pode parecer caro, mas há uma janela de 100 ms a partir do momento em que o usuário interage antes da animação começar. Se ultrapassar esse valor, o usuário vai perceber um atraso. Use esse tempo para fazer trabalhos preparatórios caros para que a execução seja mais econômica durante a animação em si. Há também uma janela no final de cerca de 50 a 100 ms para organizar o trabalho, o que pode ser útil dependendo do que você está tentando fazer.

O trabalho caro para fazer a animação é feito dentro desses primeiros 100 ms e, em um Nexus 5, o trabalho demora cerca de 70 ms, então há espaço de sobra.

Acessar o código

Se você quiser analisar o site em mais detalhes, vai gostar de saber que o código foi lançado no GitHub (link em inglês), então confira.