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