Chrome 36 에 도입된 `element.animate()` 메서드는 JavaScript 로 선언적 애니메이션을 작성할 수 있게 하며, 기존 CSS 애니메이션과 동일한 엔진을 사용하여 효율적인 렌더링 (60fps) 을 보장합니다. 기존 CSS Transition 을 JS 로 제어할 때 필요했던 레이아웃 강제 계산 (reflow) 과 같은 복잡한 우회 방법을 제거하고, 직관적인 구문으로 애니메이션을 정의할 수 있습니다. 반…
9 min read
Web Animations API: element.animate() (Chrome 36)
Source
Evernote/IFTTT Feedly/Web Animations - element.animate() is now in Chrome 36.md
Summary
Chrome 36 에 도입된 element.animate() 메서드는 JavaScript 로 선언적 애니메이션을 작성할 수 있게 하며, 기존 CSS 애니메이션과 동일한 엔진을 사용하여 효율적인 렌더링 (60fps) 을 보장합니다. 기존 CSS Transition 을 JS 로 제어할 때 필요했던 레이아웃 강제 계산 (reflow) 과 같은 복잡한 우회 방법을 제거하고, 직관적인 구문으로 애니메이션을 정의할 수 있습니다. 반환되는 AnimationPlayer 객체를 통해 애니메이션의 취소 (cancel()) 와 완료 이벤트 (onfinish) 처리가 용이해졌습니다. 이는 선언적 (CSS) 과 명령형 (JS) 애니메이션의 통합을 위한 Web Animations 스펙의 첫 단계입니다.
Key Points
Chrome 36 에서 element.animate() 지원 시작 (Web Animations 스펙의 일부).
JS 로 애니메이션을 작성하되, 브라우저가 최적화하는 CSS 애니메이션/트랜지션과 동일한 엔진을 사용하여 성능 저하 없이 60fps 유지.
기존 JS 기반 CSS 트랜지션 제어 시 필요했던 레이아웃 강제 계산 (예: offsetWidth 읽기) 과 같은 복잡한 코드 제거.
반환된 AnimationPlayer 객체를 통해 애니메이션의 동적 취소 및 완료 시점 이벤트 핸들링 가능.
선언적 (CSS) 과 명령형 (JS) 애니메이션의 장점을 통합하여 코드 가독성과 유지보수성 향상.