Web Animations API는 JavaScript의 명령형 애니메이션을 설명하는 강력한 프리미티브를 제공합니다. 그런데 이것이 무슨 의미일까요? Google 데모 및 Codelab을 비롯하여 이용 가능한 리소스를 확인해 보세요.
배경
기본적으로 이 API는 Element.animate() 메서드를 제공합니다.
예를 살펴보겠습니다. 이 작업은 배경색을 빨간색에서 녹색으로 애니메이션 처리합니다.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
이 메서드는 모든 최신 브라우저에서 지원되며 뛰어난 폴리필 대체 기능을 제공합니다 (자세한 내용은 뒷부분 참고). Chrome 39의 일환으로 이 메서드와 해당 플레이어 객체에 관한 기본 지원이 광범위하게 제공되었습니다. Opera에서도 기본적으로 사용 가능하며 Firefox용은 적극 개발 중입니다. 이 도구는 도구상자에서 사용할 수 있는 강력한 프리미티브입니다.
Codelab
점점 더 많은 Codelab에서 Web Animations API를 사용할 수 있습니다. API의 다양한 개념을 보여주는 사용자 주도형 가이드입니다. 이 Codelab 대부분에서는 정적 콘텐츠를 사용하여 애니메이션 효과로 개선합니다.
이 Codelab 및 관련 링크나 리소스는 웹 애니메이션에서 사용할 수 있는 새로운 프리미티브를 이해하려는 경우 시작하기에 가장 좋은 출발점입니다. 어떤 앱을 만들 수 있을지 아이디어가 필요하다면 Android에서 영감을 받은 이 표시 효과를 확인해 보세요.
이를 시작하려고 하는 분은 지금 시작해 보세요.
데모
아이디어를 얻고 싶다면 GitHub에서 호스팅되는 소스로 머티리얼에서 영감을 받은 웹 애니메이션 데모를 확인하세요. 이 함수는 여러 가지 놀라운 효과를 보여주며 각 데모의 소스 코드를 인라인으로 볼 수 있습니다.
다채롭게 회전하는 은하계, 회전하는 지구, 평범한 기존 요소에 다양한 효과를 담아내는 것도 가능합니다.
폴리필
모든 최신 브라우저에서 제대로 지원하려면 polyfill 라이브러리를 사용하면 됩니다. Web Animations API는 Internet Explorer, Firefox, Safari 등 모든 최신 브라우저에서 사용할 수 있는 현재 폴리필을 사용할 수 있습니다.
모험을 원한다면 웹 애니메이션 다음 폴리필을 사용하면 됩니다. 이 폴리필에는 컴포저블 GroupEffect 및 SequenceEffect 생성자와 같이 아직 완료되지 않은 기능도 포함되어 있습니다.
두 polyfill의 비교는 홈페이지를 참조하세요.
코드에서 폴리필을 사용하는 방법에는 여러 가지가 있습니다.
cdnjs, jsDelivr 같은 CDN을 사용하거나 rawgit.com을 통해 특정 출시 버전을 타겟팅합니다.
NPM 또는 Bower를 통해 설치
$ npm install web-animations-js $ bower install web-animations-js ```
어떤 경우든 다른 코드보다 먼저 스크립트 태그에 polyfill을 포함하면 됩니다.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
기타 자료
보다 기술적인 소개를 읽고 싶다면 W3C 사양을 확인하세요.
댄 윌슨은 새로운 CSS motion-path 속성과 함께 웹 애니메이션을 사용하는 방법을 비롯하여 웹 애니메이션에 대한 다양한 게시물도 작성했습니다.
motion-path를 사용한 일부 샘플은 에릭 윌리거스의 문서를 참고하세요.