2013년 11월 7일 목요일

[튜토리얼/한글화] 고성능 애니메이션(High Performance Animations)

+Paul Lewis+Paul Irish 의 '고성능 애니메이션(High Performance Animations)' 튜토리얼이 등록되었습니다. 지난번 바캠프 요약에서 이에 대해 언급해드린 적이 있는데 브라우저의 GPU 가속과 연관된 HTML5 애니메이션의 성능 최적화에 관심있으신 분들은 반드시 읽어보시기를 권해드립니다.

"추가로 단지 애니메이션에만 해당하는 부분은 아닙니다. GPU와 관련된 웹 페이지의 렌더링 패스에 대한 이해는 프론트엔드에서 반응성 있는 웹페이지를 구현하는데 중요한 축입니다. +Paul Lewis 는 WebGL 기반의 3D 엔진인 three.js의 개발자로 렌더링 성능과 관련된 유용한 튜토리얼을 이미 올린바 있습니다. 이에 대한 부분은 참고 링크들에서 찾아보시기 바랍니다."

TL;DR;


CSS3 Animation과 Transition을 구현할 때 어떠한 속성이 하드웨어 가속이 가능한지 그리고 크롬 개발자 도구 '프레임(Frame)' 모드에서 볼수 있는 렌더링의 과정에 대해 각 엘리먼트가 어떻게 레이어로 변환되어 픽셀화(Rasterization) 과정이 이루어지는지에 대한 개괄적으로 설명합니다.

left, top을 이용한 위치 이동(좌)과 transform: translate()를 이용한 위치 이동(우)의 비교

본문에서 강조하는 고성능 애니메이션을 위한 CSS 속성 4가지는 다음과 같습니다.

  • 위치 이동
    • transform: translate()
  • 확대/축소
    • transform: scale()
  • 회전
    • transform: rotate()
  • 투명도
    • opacity: 0 ~ 1

참조 링크



p.s. 프로젝트로 번역이 많이 밀려있는데 차주에 예정된 3종에 대한 번역 커밋을 진행할 예정입니다. :)