No fim do ano passado, criei o site do Chrome Dev Summit. Queria que ele tivesse a aparência do Material Design, já que é uma ótima linguagem de design e achei que seria uma boa opção para o tipo de site que eu queria criar. Mas, como em qualquer nova linguagem de design, há dúvidas, desafios e decisões a serem tomadas, principalmente ao lidar com as convenções da Web.
Um aspecto do site que foi particularmente difícil de criar foi o efeito de "assumir o controle" quando você clica em um card.
Para conseguir um efeito como esse a 60 fps, foi preciso pensar, criar protótipos e fazer algumas concessões interessantes. No Chrome Dev Summit, falei sobre esse efeito e expliquei em detalhes como o criei.
Como criar uma animação de alta performance
Animações de alta performance, pelo menos hoje, são aquelas que favorecem o compositor do navegador. Se você conseguir manter a mudança nas propriedades de transformação e opacidade, geralmente terá uma ótima performance. A abordagem geral que usei para a animação do card faz exatamente isso:
- Meça a posição de todos os elementos no card quando ele estiver recolhido.
- Alterne as classes do card para abrir (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 irem para os locais finais na tela.
Tudo isso pode parecer caro, mas há uma janela de 100 ms entre o momento em que um usuário interage e o início da animação. Se for maior, o usuário vai perceber um atraso. Você pode usar esse tempo para fazer um trabalho preparatório caro e executar a animação de forma mais econômica. Há também uma janela de 50 a 100 ms no final para fazer um trabalho de limpeza, o que pode ser útil dependendo do que você está tentando fazer.
O trabalho caro para fazer a animação é feito nos primeiros 100 ms e, em um Nexus 5, o trabalho leva algo em torno de 70 ms, então há espaço de sobra.
Acessar o código
Se você quiser analisar o site com mais detalhes, vai gostar de saber que o código foi lançado no GitHub. Confira!