런타임 성능의 응용 과학

작년 말에 Chrome Dev Summit 사이트를 구축했습니다. 머티리얼 디자인 디자인은 훌륭한 디자인 언어이기 때문에 모양과 느낌이 들었으면 좋았고, 제가 만들고자 했던 사이트에도 잘 어울릴 거라고 생각했습니다. 그러나 여느 디자인 언어와 마찬가지로 웹 관습을 다룰 때는 특히 해결해야 할 질문, 과제, 결정이 있습니다.

사이트에서 카드 클릭 시 '전면 광고'를 생성할 때 특히 문제가 생깁니다.

60fps로 이러한 효과를 실행하려면 몇 가지 생각과 프로토타입 제작, 몇 가지 흥미로운 타협이 필요했습니다. 저는 Chrome Dev Summit에서 이 효과에 대해 이야기하고 제가 어떻게 구축했는지 자세히 설명해 주었습니다.

고성능 애니메이션 빌드

현재 고성능 애니메이션은 브라우저의 컴포지터를 선호하는 것입니다. 변형 및 불투명도 속성 변경을 고수할 수 있으면 일반적으로 우수한 성능을 확인할 수 있습니다. 카드 애니메이션에 대한 일반적인 접근 방식은 바로 이러한 작업을 수행합니다.

1. 카드가 접혀 있을 때 카드에 있는 모든 요소의 위치를 측정합니다.
2. 카드의 클래스를 전환하여 애니메이션 없이 펼칩니다.
3. 이제 카드가 펼쳐져 카드에서 요소의 위치를 다시 측정합니다.
4. 차이를 계산합니다.
5. 음수 변환을 적용하여 요소를 다시 시작 위치로 이동합니다.
6. 애니메이션을 사용 설정합니다.
7. 부정적인 변환을 제거하고 요소들이 화면에서 최종 위치로 향하는 모습을 지켜보세요.

이 모든 작업은 비용이 많이 들 수 있지만 사용자가 상호작용하는 순간부터 애니메이션이 시작되어야 하는 시점까지 100ms의 기간이 있습니다. 이 금액을 초과하면 사용자는 지연을 체감합니다. 이 시간을 사용하여 비용이 많이 드는 준비 작업을 실행하면 애니메이션 재생 중에 더 저렴하게 실행할 수 있습니다. 약 50~100ms가 지나면 작업 정리를 위한 창이 있습니다. 이는 하려는 작업에 따라 유용할 수 있습니다.

애니메이션 작업에 고가의 작업이 이 첫 100밀리초 이내에 완료되며, Nexus 5의 경우 70밀리초 영역에서 작업이 수행되므로 여유 공간이 있습니다.

코드 가져오기

이 사이트를 더 자세히 살펴보는 데 관심이 있다면 GitHub에 코드가 공개되었다는 소식을 전해드립니다. 한 번 방문해 보세요.