작년 말에 Chrome Dev Summit 사이트를 만들었습니다. 저는 훌륭한 디자인 언어인 머티리얼 디자인의 디자인과 분위기를 원했고, 제가 만들고자 하는 사이트에도 잘 어울릴 것 같았습니다. 그러나 모든 새로운 디자인 언어와 마찬가지로 웹 규칙을 다룰 때는 질문, 과제 및 결정을 내려야 합니다.
이 사이트에서 특히 만들기가 어려운 부분은 카드를 클릭할 때 나타나는 '탈취' 효과였습니다.
이와 같은 효과를 60fps로 실행하려면 약간의 생각과 프로토타입 제작, 몇 가지 흥미로운 타협이 필요했습니다. Chrome Dev Summit에서 저는 이 효과에 대해 이야기하고 제가 어떻게 구축했는지 자세히 설명했습니다.
고성능 애니메이션 빌드
현재 적어도 고성능 애니메이션은 브라우저 컴포지터에 더 적합한 애니메이션입니다. 변형 및 불투명도 속성을 변경할 수 있다면 일반적으로 우수한 실적을 낼 수 있습니다. 카드 애니메이션에 대한 일반적인 접근 방식은 바로 다음과 같습니다.
- 카드가 접혀 있을 때 카드에 있는 모든 요소의 위치를 측정합니다.
- 애니메이션 없이 카드의 클래스를 전환하여 펼칩니다.
- 이제 카드가 펼쳐져 있는 카드의 요소 위치를 다시 측정합니다.
- 차이를 계산합니다.
- 네거티브 변환을 적용하여 요소를 다시 시작 위치로 이동합니다.
- 애니메이션을 사용 설정합니다.
- 네거티브 변환을 삭제하고 요소가 화면의 최종 위치로 활발히 움직이는 것을 관찰합니다.
이 모든 작업이 비싸 보일 수 있지만 애니메이션이 시작되기 전에 사용자가 상호작용하는 순간부터 100ms의 기간이 존재합니다. 이보다 높으면 사용자는 지연을 인지할 수 있습니다. 이 시간을 사용하여 비용이 많이 드는 준비 작업을 실행하면 애니메이션 중에 더 저렴하게 실행할 수 있습니다. 또한 약 50-100ms가 끝날 때 작업을 할 수 있는 창이 있는데, 이는 무엇을 하려고 하는지에 따라 유용할 수 있습니다.
애니메이션을 실행하는 데 비용이 많이 드는 작업이 첫 100ms 내에 완료되며, Nexus 5의 경우 70ms 영역에서 작업이 걸리므로 여유 공간이 있습니다.
코드 가져오기
이 사이트를 더 자세히 살펴보고 싶으시다면 GitHub에 코드가 출시되었다는 소식을 들으실 수 있으니 확인해 보세요.