No final do ano passado, criei o site do Chrome Dev Summit. Eu queria que tivesse uma aparência do 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 tomar, especialmente ao lidar com as convenções da Web.
Um aspecto do site que foi particularmente difícil de criar foi o efeito de “preenchimento total” quando você clica em um cartão.
Para executar um efeito como esse a 60 fps, você precisa pensar, criar protótipos e fazer alguns ajustes interessantes. Na Conferência de Desenvolvedores do Chrome, falei sobre esse efeito e expliquei detalhadamente 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 mudar as 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:
- Meça a posição de todos os elementos no card quando ele está recolhido.
- Alterne as classes do card para expandi-lo (sem animação).
- Meça novamente a posição dos elementos no card agora que ele está aberto.
- Calcule as diferenças.
- Aplique transformações negativas para mover os elementos de volta às posições iniciais.
- Ative as animações.
- Remova as transformações negativas e veja os elementos voarem para 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 de a animação começar. Se ultrapassar esse limite, o usuário vai perceber um atraso. Você pode usar esse tempo para fazer trabalhos preparatórios caros para que possa executar de forma mais barata durante a própria animação. Há também uma janela ao final de cerca de 50 a 100 ms para organizar as tarefas, o que pode ser útil dependendo do que você está tentando fazer.
O trabalho dispendioso para fazer a animação é feito dentro desses primeiros 100 ms e, em um Nexus 5, o trabalho dura cerca de 70 ms, então há espaço de sobra.
Acessar o código
Se você tiver interesse em conhecer 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.