Web Animations API는 JavaScript의 명령형 애니메이션을 설명하는 강력한 프리미티브를 제공합니다. 그게 무슨 뜻일까요? Google 데모 및 Codelab을 비롯하여 사용 가능한 리소스를 알아보세요.
배경
API는 기본적으로 Element.animate() 메서드를 제공합니다.
배경 색상을 빨간색에서 녹색으로 애니메이션하는 예를
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
이 메서드는 모든 최신 브라우저에서 지원되며 뛰어난 polyfill 대체가 있습니다 (자세한 내용은 뒷부분에서 설명). Chrome 39와 함께 이 메서드와 그 플레이어 객체에 대한 기본 지원이 폭넓게 제공되었습니다. 또한 Opera에서도 기본적으로 사용 가능하며 Firefox용으로 현재 개발 중입니다. 이 파일은 도구 상자에 넣을 만한 강력한 프리미티브입니다.
Codelab
Web Animations API에 사용할 수 있는 Codelab이 점점 늘어나고 있습니다. 이 가이드는 API의 다양한 개념을 보여주는 사용자 주도형 가이드입니다. 대부분의 Codelab에서는 정적 콘텐츠를 애니메이션 효과로 개선합니다.
웹 애니메이션에서 사용할 수 있는 새로운 프리미티브를 이해하려는 경우 이 Codelab 및 관련 링크나 리소스는 가장 좋은 출발점입니다. 어떤 것을 빌드할지 아이디어를 얻으려면 Android에서 영감을 받은 이 표시 효과를 확인해 보세요.
이제 막 시작했다면 더 이상 고민하지 않아도 됩니다.
데모
아이디어를 얻고 싶다면 머티리얼에서 영감을 받은 웹 애니메이션 데모를 확인하세요. 소스 호스팅은 GitHub입니다. 이들은 다양하고 놀라운 효과를 시연하며 각 데모의 소스 코드를 인라인으로 볼 수 있습니다.
데모에는 화려하게 회전하는 은하, 회전하는 지구 또는 평범하고 오래된 요소에 다양한 효과가 포함되어 있습니다.
폴리필
모든 최신 브라우저에서 뛰어난 지원을 보장하려면 폴리필 라이브러리를 사용하면 됩니다. Web Animations API에는 현재 사용 가능한 폴리필이 있어 Internet Explorer, Firefox, Safari 등 모든 최신 브라우저에서 사용할 수 있습니다.
모험을 즐기고 싶다면 웹 애니메이션 다음 폴리필을 사용해 보세요. 구성 가능한 GroupEffect 및 SequenceEffect 생성자와 같이 아직 완성되지 않은 기능도 포함되어 있습니다.
두 폴리필을 비교하려면 홈페이지를 참조하세요.
몇 가지 옵션을 통해 코드에서 폴리필 중 하나를 사용할 수 있습니다.
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 사양을 확인하세요.
Dan Wilson은 새로운 CSS motion-path 속성과 함께 사용하는 방법을 비롯하여 웹 애니메이션에 대한 유용한 게시물을 작성했습니다.
motion-path를 사용한 샘플은 Eric Willigers의 문서를 참조하세요.