Chrome Dev Summit 2014 - 런타임 성능의 응용 과학

카드 탈취 효과

작년 말에 Chrome Dev Summit 사이트를 만들었습니다. 저는 훌륭한 디자인 언어인 머티리얼 디자인의 디자인과 분위기를 원했고, 제가 만들고자 하는 사이트에도 잘 어울릴 것 같았습니다. 그러나 모든 새로운 디자인 언어와 마찬가지로 웹 규칙을 다룰 때는 질문, 과제 및 결정을 내려야 합니다.

이 사이트에서 특히 만들기가 어려운 부분은 카드를 클릭할 때 나타나는 '탈취' 효과였습니다.

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

고성능 애니메이션 빌드

현재 적어도 고성능 애니메이션은 브라우저 컴포지터에 더 적합한 애니메이션입니다. 변형 및 불투명도 속성을 변경할 수 있다면 일반적으로 우수한 실적을 낼 수 있습니다. 카드 애니메이션에 대한 일반적인 접근 방식은 바로 다음과 같습니다.

  1. 카드가 접혀 있을 때 카드에 있는 모든 요소의 위치를 측정합니다.
  2. 애니메이션 없이 카드의 클래스를 전환하여 펼칩니다.
  3. 이제 카드가 펼쳐져 있는 카드의 요소 위치를 다시 측정합니다.
  4. 차이를 계산합니다.
  5. 네거티브 변환을 적용하여 요소를 다시 시작 위치로 이동합니다.
  6. 애니메이션을 사용 설정합니다.
  7. 네거티브 변환을 삭제하고 요소가 화면의 최종 위치로 활발히 움직이는 것을 관찰합니다.

이 모든 작업이 비싸 보일 수 있지만 애니메이션이 시작되기 전에 사용자가 상호작용하는 순간부터 100ms의 기간이 존재합니다. 이보다 높으면 사용자는 지연을 인지할 수 있습니다. 이 시간을 사용하여 비용이 많이 드는 준비 작업을 실행하면 애니메이션 중에 더 저렴하게 실행할 수 있습니다. 또한 약 50-100ms가 끝날 때 작업을 할 수 있는 창이 있는데, 이는 무엇을 하려고 하는지에 따라 유용할 수 있습니다.

애니메이션의 인식 창

애니메이션을 실행하는 데 비용이 많이 드는 작업이 첫 100ms 내에 완료되며, Nexus 5의 경우 70ms 영역에서 작업이 걸리므로 여유 공간이 있습니다.

코드 가져오기

이 사이트를 더 자세히 살펴보고 싶으시다면 GitHub에 코드가 출시되었다는 소식을 들으실 수 있으니 확인해 보세요.