배율 변경 시 합성된 레이어를 다시 래스터링

Chris Harrelson
Chris Harrelson
X GitHub

요약

Chrome 53부터 will-change: transform CSS 속성이 없는 경우 변환 배율이 변경되면 모든 콘텐츠가 다시 래스터됩니다. 즉, will-change: transform는 '빠르게 애니메이션 처리'를 의미합니다.

이는 스크립트 조작을 통해 발생하는 변환 배율에만 적용되며 CSS 애니메이션 또는 웹 애니메이션에는 적용되지 않습니다.

이렇게 하면 사이트의 콘텐츠가 더 보기 좋게 표시될 수 있지만 아래에 설명된 몇 가지 간단한 변경을 하지 않으면 속도가 느려질 수도 있습니다.

웹 개발자에게 미치는 영향

이 변경사항에서 will-change: transform는 콘텐츠를 고정 비트맵으로 강제 래스터하는 것으로 간주할 수 있으며, 이렇게 하면 이후에 변환 업데이트에서 변경되지 않습니다. 이를 통해 개발자는 비트맵 이동, 회전 또는 크기 조정과 같은 변환 애니메이션의 속도를 높일 수 있습니다.

Google에서는 배율 변환과 변환 변환을 구별하지 않습니다.

매우 빠르게 (즉, 60fps) 애니메이션 속도를 변환해야 하는 경우 요소에 will-change: transform를 배치하세요. 그리고 모든 프레임에서 요소를 고화질로 래스터하는 것만으로는 빠르지 않을 것으로 예상됩니다. 그 외의 경우에는 will-change: transform를 사용하지 마세요.

성능 품질 절충점을 최적화하려면 애니메이션이 시작될 때 will-change: transform를 추가하고 종료될 때 삭제하는 것이 좋습니다. 그러나 will-change: transform를 추가하거나 삭제하면 일회성 성능 비용이 많이 발생하는 경우가 많습니다.

추가 구현 고려사항

will-change: transform를 삭제하면 콘텐츠가 선명한 크기로 다시 래스터되지만 requestAnimationFrame)를 통해 다음 애니메이션 프레임에서만 다시 래스터됩니다. 따라서 will-change: transform가 있는 레이어가 있고 단순히 다시 래스터를 트리거한 다음 애니메이션을 계속 실행하려면 will-change:transform을 삭제한 다음 requestAnimationFrame() callback으로 다시 추가해야 합니다.

애니메이션 중에 언제든지 현재 배율로 래스터화하려면 위의 기법을 적용하여 한 프레임에서 삭제하고 후속 프레임에서 will-change: transform를 다시 추가합니다.

이로 인해 콘텐츠가 합성된 레이어를 손실하는 부작용이 발생할 수 있으며, 위의 권장사항이 어느 정도 비용이 많이 들 수 있습니다. 이것이 문제가 된다면 이 작업 중에 합성된 레이어에 유지되도록 콘텐츠에 transform: translateZ(0)도 추가하는 것이 좋습니다.

영향 요약

이 변경사항은 렌더링된 콘텐츠 품질, 성능 및 개발자 제어에 영향을 미칩니다.

  • 렌더링된 콘텐츠 품질: 변환 배율을 애니메이션 처리하는 요소의 렌더링된 출력은 기본적으로 항상 항상 선명합니다.
  • 성능: will-change: transform가 있는 경우 변환을 애니메이션 처리하는 속도가 빠릅니다.
  • 개발자 제어: 개발자는 will-change: transform를 추가하고 삭제하여 요소별 및 애니메이션 프레임별로 품질과 속도 중에서 선택할 수 있습니다.

자세한 내용은 위의 참조된 디자인 문서를 참고하세요.

예

이 예에서 remainsBlurry ID가 있는 요소는 변경 후에도 흐리게 유지되지만 noLongerBlurry ID가 있는 요소는 선명해집니다. 전자에 will- change: transform CSS 속성이 있기 때문입니다.

실제 애플리케이션의 변환 크기 애니메이션의 예