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() 메서드의 상태 변경
pause() 메서드는 진행 중인 애니메이션을 일시중지하는 데 사용됩니다. playState 속성을 사용하여 애니메이션의 상태를 확인하면 paused() 메서드가 호출된 후 paused로 설정되어야 합니다. 50 이전의 Chrome 버전에서는 애니메이션이 아직 시작되지 않은 경우 playState 속성이 idle를 나타냈지만 이제는 올바른 상태인 paused를 반영합니다.
키프레임에서 대시 이름을 키로 삭제
사양 및 기타 구현을 더욱 준수하기 위해 Chrome 50은 키프레임 애니메이션의 키에 대시 이름이 사용된 경우 콘솔에 경고를 보냅니다. 사용할 올바른 문자열은 CSS 속성에서 IDL 속성 변환 알고리즘에 따른 camelCase 이름입니다.
예를 들어 CSS 속성 margin-left의 경우 marginLeft를 키로 전달해야 합니다.
Chrome 51에서는 대시 이름 지원이 완전히 삭제되므로 이제 사양에 따라 올바른 이름으로 기존 콘텐츠를 수정할 때입니다.
요약
이러한 변경사항으로 인해 Chrome의 웹 애니메이션 구현이 다른 브라우저 구현에 더 가까워지고 사양을 더 준수하게 되며, 이는 모두 상호 운용성을 개선하기 위해 웹페이지 콘텐츠 작성을 간소화하는 데 도움이 됩니다.