작년 말에 Chrome Dev Summit 사이트를 만들었습니다. 훌륭한 디자인 언어인 Material Design 스타일과 느낌을 적용하고 싶었습니다. 제가 만들고 싶었던 사이트 유형에 잘 어울릴 것 같았기 때문입니다. 하지만 모든 새로운 디자인 언어와 마찬가지로 질문, 과제, 결정을 내려야 하며, 특히 웹의 규칙을 다룰 때는 더욱 그렇습니다.
사이트에서 특히 만들기 어려웠던 부분은 카드를 클릭할 때 발생하는 '테이크오버' 효과였습니다.
이러한 효과를 60fps로 실행하려면 몇 가지 흥미로운 절충안을 생각하고 프로토타입을 만들어야 했습니다. Chrome Dev Summit에서 이 효과에 관해 이야기하고 이 효과를 빌드하는 방법을 자세히 설명했습니다.
고성능 애니메이션 빌드
고성능 애니메이션은 적어도 현재는 브라우저의 컴포지터를 선호하는 애니메이션입니다. 변환 및 불투명도 속성을 변경하는 데 문제가 없다면 일반적으로 우수한 성능을 확인할 수 있습니다. 카드 애니메이션에 사용한 일반적인 접근 방식은 다음과 같습니다.
- 카드가 축소되었을 때 카드에 있는 모든 요소의 위치를 측정합니다.
- 카드의 클래스를 전환하여 애니메이션 없이 펼칩니다.
- 카드가 펼쳐졌으므로 카드에 있는 요소의 위치를 다시 측정합니다.
- 차이를 계산합니다.
- 요소를 시작 위치로 다시 이동하려면 음수 변환을 적용합니다.
- 애니메이션을 사용 설정합니다.
- 음수 변환을 삭제하고 요소가 화면의 최종 위치로 이동하는 것을 확인합니다.
이 모든 것이 비용이 많이 드는 것처럼 보일 수 있지만 사용자가 상호작용한 순간부터 애니메이션이 시작되기까지 100ms의 시간이 있습니다. 이보다 길면 사용자가 지연을 인식합니다. 이 시간을 사용하여 비용이 많이 드는 준비 작업을 수행하면 애니메이션 자체를 더 저렴하게 실행할 수 있습니다. 정리 작업을 실행할 수 있는 50~100ms 정도의 시간도 있으므로, 실행하려는 작업에 따라 유용할 수 있습니다.
애니메이션을 실행하는 데 필요한 비용이 많이 드는 작업은 처음 100ms 내에 완료되며 Nexus 5에서는 이 작업이 약 70ms가 걸리므로 여유가 있습니다.
코드 가져오기
사이트를 자세히 살펴보고 싶다면 코드가 GitHub에 공개되었으니 확인해 보세요.