Chrome 36에서 처음 출시된 Web Animations API는 브라우저에서 애니메이션을 JavaScript로 편리하게 제어할 수 있으며 Gecko 및 WebKit에서도 구현됩니다.
Chrome 50에는 다른 브라우저와의 상호 운용성을 개선하고 사양을 더 잘 준수하기 위한 변경사항이 도입되었습니다. 이러한 변경사항은 다음과 같습니다.
- 일정 취소
Animation.idpause()메서드의 상태 변경- 키프레임의 키로 대시 이름을 지원 중단함
Chrome 51에서는 다음 변경사항 중 일부가 완료됩니다.
- 키프레임에서 파선 이름을 키로 제거
일정 취소
Animation 인터페이스에는 애니메이션을 취소하는 메서드가 포함되어 있으며, 간단하게는 cancel()라는 메서드가 있습니다.
Chrome 50은 사양에 따라 메서드가 호출될 때 취소 이벤트 실행을 구현합니다. 이는 초기화된 경우 oncancel 속성을 통해 이벤트 처리를 트리거합니다.
Animation.id 지원
element.animate()를 사용하여 애니메이션을 만들 때 여러 속성을 전달할 수 있습니다. 다음은 객체의 불투명도를 애니메이션화하는 예입니다.
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id 속성을 지정하면 반환된 Animation 객체에 설정되므로 처리할 Animation 객체가 많은 경우 콘텐츠를 디버깅할 때 도움이 될 수 있습니다. 다음은 인스턴스화하는 애니메이션에 id를 지정하는 방법의 예입니다.
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
일시중지() 메서드의 상태 변경
pause() 메서드는 진행 중인 애니메이션을 일시중지하는 데 사용됩니다. playState 속성을 사용하여 애니메이션 상태를 확인하는 경우 paused() 메서드를 호출한 후 paused로 설정해야 합니다. 50 이전의 Chrome 버전에서는 애니메이션이 아직 시작되지 않았다면 playState 속성이 idle를 표시했지만, 지금은 올바른 상태(paused)를 반영합니다.
키프레임에서 파선 이름을 키로 제거
사양 및 기타 구현을 추가로 준수하기 위해 Chrome 50에서는 키프레임 애니메이션의 키에 대시 이름이 사용되는 경우 콘솔에 경고를 보냅니다. 사용해야 하는 올바른 문자열은 IDL 속성 변환 알고리즘에 대한 CSS 속성에 따른 CamelCase 이름입니다.
예를 들어 CSS 속성 margin-left의 경우 marginLeft을 키로 전달해야 합니다.
Chrome 51에서는 대시 이름에 대한 지원이 완전히 삭제되므로 이제 사양에 따라 올바른 이름으로 기존 콘텐츠를 수정하는 것이 좋습니다.
요약
이러한 변경사항으로 인해 Chrome의 웹 애니메이션 구현이 다른 브라우저 구현에 더 가까워지고 사양을 더 잘 준수할 수 있게 되어 웹페이지 콘텐츠 작성을 간소화하여 상호 운용성을 개선합니다.