웹 애니메이션에 대한 네이티브 지원은 Chrome 36에서 처음 제공되었으며 Chrome 39에서 재생 컨트롤로 업데이트되었습니다. Element.animate() 메서드는 JavaScript에서 직접 명령형 애니메이션을 트리거하는 데 사용할 수 있으며, 반환된 객체를 활용하여 이러한 애니메이션의 재생을 제어할 수 있습니다. 이러한 메서드는 웹 애니메이션 W3C 사양의 현재 초안에 자세히 설명되어 있습니다.
네이티브로 구현된 모든 웹 애니메이션 기능을 추적하고 모든 최신 브라우저에서 지원되는 출시된 폴리필이 활발히 개발 중입니다. 이러한 핵심 메서드는 지금 바로 사용할 수 있으며 애니메이션의 이점을 활용하는 풍부한 환경을 빌드하기 위한 도구 상자에 포함되어야 합니다 (예: Google I/O 2015 웹 앱).
생성자 및 그룹 변경사항
Web Animations 사양에서는 그룹 및 시퀀스, 애니메이션 및 플레이어의 생성자도 설명합니다. 이러한 기능은 아직 논의 중이며 아직 네이티브로 구현되지 않은 기능을 보여주기 위해 설계된 web-animations-next 폴리필에서 사용할 수 있었습니다. 개발자 의견에 따라 웹 애니메이션을 개발하는 팀에서는 이러한 기능의 이름을 더 명확하게 변경하고 있습니다.
FXTF는 최근 오스트레일리아 시드니에서 회의를 열고 이름 지정에 관해 논의했습니다. 일부 개발자가 이름 지정이 혼란스럽다는 타당한 지적을 제기했기 때문입니다. 이에 따라 다음과 같은 이름 변경에 동의했습니다.
- 애니메이션이 KeyframeEffect로 변경됨
- AnimationSequence가 SequenceEffect로 변경됨
- AnimationGroup이 GroupEffect로 변경됨
- AnimationPlayer가 Animation이 됨
애니메이션과 애니메이션 플레이어는 Chrome에서 기본적으로 제공되며 폴리필의 일부로 사용할 수 있지만 현재는 Element.animate() 메서드를 통해 직접 만들어집니다. Element.animate() 메서드를 사용하는 기존 코드는 변경할 필요가 없습니다.
새 이름은 각 객체에서 제공하는 동작을 더 정확하게 나타냅니다. 예를 들어 KeyframeEffect는 HTML 요소를 타겟팅할 수 있는 키프레임 기반 효과를 설명합니다. 반면 새 Animation 객체는 재생, 일시중지 등 여러 상태 중 하나의 애니메이션을 나타냅니다.
SourceCodeEffect
web-animations-next polyfill을 통해 초안 사양의 일부를 사용하는 경우 이러한 새 이름을 반영하도록 지원 중단 기간 내에 코드를 업데이트해야 합니다. 폴리필 변경사항 정책에 따라 Google은 이전 버전을 3개월 동안 지원하고 사이트에서 지원 중단된 기능이나 이름을 사용하는 경우 콘솔 경고 문을 제공하는 것을 목표로 합니다.
이러한 기능을 사용해 보고 싶다면 이러한 새 이름을 활용할 수 있는 폴리필의 v2 출시를 기다려 보세요. 마지막으로 web-animations-changes 그룹을 구독하여 다른 변경사항에 대한 소식을 확인하세요.