티스토리 뷰

WebKit에서 GPU 가속 받는 CSS 애니메이션

pilot376 2013. 7. 14. 11:04

언제 GPU 가속을 받을까?

layout이 일어나지 않는 애니메이션만 GPU로 그린다.
layout은 element의 위치와 크기를 정하는 과정이고, reflow와 같은 개념으로 이해하면 될 듯하다.

  1. color, opacity 프로퍼티를 바꾸는 애니메이션은 GPU 가속을 받는다.
  2. transform은 layout없이 element의 위치, 크기를 바꾸기 때문에 GPU 가속을 받는다.
  3. left, top으로 움직이는 애니메이션은 GPU 가속을 받을 수 없다.


어떻게 확인할까?

크롬 브라우저 주소창에 “chrome://flags”라고 입력한다. 리스트 중 “합성된 렌더 레이어 테두리”를 사용을 클릭한 후 하단의 “지금 다시 시작”을 클릭한다.


이 옵션을 사용하면 화면에서 GPU 가속을 받고 있는 element에 border가 생긴다.


예제

아래 예제를 모바일에서 확인하면 GPU 가속을 받을 때와 받지 않을 때의 차이를 느낄 수 있다. (ios4 이상, android4 이상에서만 하드웨어 가속이 지원되므로 andriod2 버전에서는 차이가 없다.)

top,left
transform3d


참고자료 URL


댓글