Web Animations API는 JavaScript에서 명령형 애니메이션을 설명하는 강력한 기본 요소를 제공합니다. 하지만 이게 무슨 의미일까요? Google의 데모 및 Codelab을 비롯해 사용할 수 있는 리소스를 알아보세요.
배경
핵심적으로 API는 Element.animate() 메서드를 제공합니다.
배경 색상을 빨간색에서 녹색으로 애니메이션 처리하는 예를 살펴보겠습니다.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
이 메서드는 모든 최신 브라우저에서 지원되며, 훌륭한 폴리필 대체가 있습니다 (자세한 내용은 나중에 설명). 이 메서드와 플레이어 객체에 대한 기본 지원은 Chrome 39의 일부로 널리 제공되었습니다. Opera에서도 기본적으로 사용 가능하며 Firefox용으로 활발하게 개발되고 있습니다. 이는 도구 상자에 포함할 만한 강력한 기본 요소입니다.
Codelab
Web Animations API에 사용할 수 있는 Codelab이 점점 늘어나고 있습니다. API의 다양한 개념을 보여주는 자체 학습형 가이드입니다. 이러한 Codelab 대부분에서는 정적 콘텐츠를 가져와 애니메이션 효과로 개선합니다.
이 Codelab과 관련 링크 또는 리소스는 Web Animations에서 사용할 수 있는 새로운 기본 요소를 이해하려는 경우 시작하기에 가장 좋은 곳입니다. 빌드할 항목에 대한 아이디어를 얻으려면 Android에서 영감을 받은 공개 효과를 확인하세요.
이제 막 시작하는 단계라면 더 이상 고민하지 마세요.
데모
아이디어를 얻고 싶다면 GitHub에 소스가 호스팅된 Material 기반 Web Animations 데모를 확인하세요. 다양한 멋진 효과를 보여주며 각 데모의 소스 코드를 인라인으로 볼 수 있습니다.
데모에는 다채로운 회전하는 은하, 회전하는 지구, 일반적인 요소에 적용된 다양한 효과가 포함됩니다.
폴리필
모든 최신 브라우저에서 원활하게 지원되도록 하려면 polyfill 라이브러리를 사용하면 됩니다. Web Animations API에는 Internet Explorer, Firefox, Safari를 비롯한 모든 최신 브라우저에서 사용할 수 있는 지금 바로 사용할 수 있는 폴리필이 있습니다.
모험심이 있다면 아직 최종 확정되지 않은 기능(예: 컴포저블 GroupEffect 및 SequenceEffect 생성자)도 포함된 web-animations-next 폴리필을 사용할 수 있습니다.
두 폴리필을 비교하려면 홈페이지를 참고하세요.
코드에서 폴리필을 사용하려면 몇 가지 옵션이 있습니다.
cdnjs, jsDelivr와 같은 CDN을 사용하거나 rawgit.com을 통해 특정 버전을 타겟팅합니다.
NPM 또는 Bower를 사용하여 설치
$ npm install web-animations-js $ bower install web-animations-js ```
어떤 경우든 다른 코드 앞에 스크립트 태그에 폴리필을 포함하면 됩니다.
<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 사양을 참고하세요.
Dan Wilson은 새 CSS motion-path 속성과 함께 사용하는 방법을 비롯해 Web Animations에 관한 훌륭한 게시물 모음도 작성했습니다.
motion-path을 사용하는 샘플은 Eric Willigers 문서를 참고하세요.