La Web Animations API proporciona potentes primitivas para describir animaciones imperativas de JavaScript, pero ¿qué significa eso? Descubre los recursos disponibles para ti, como las demostraciones y los codelabs de Google.
Información general
En esencia, la API proporciona el método Element.animate().
Veamos un ejemplo, en el que se anima el color de fondo de rojo a verde.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Este método es compatible con todos los navegadores modernos, con un excelente resguardo de polyfill (hablaremos sobre esto más adelante). La compatibilidad nativa para este método (y su objeto de reproductor) comenzó a estar disponible de forma general como parte de Chrome 39. También está disponible de forma nativa en Opera y se encuentra en desarrollo activo para Firefox. Esta es una primitiva potente que merece un lugar en tu caja de herramientas.
Codelabs
Cada vez hay más codelabs disponibles para la API de Web Animations. Son guías de autoaprendizaje que demuestran diferentes conceptos de la API. En la mayoría de estos codelabs, tomarás contenido estático y lo mejorarás con efectos de animación.
Estos codelabs y vínculos o recursos relacionados son la mejor manera de comenzar si quieres comprender las nuevas primitivas disponibles en Web Animations. Para tener una idea de lo que podrías crear, mira este efecto revelador inspirado en Android.
Así que si recién comienzas, no busques más.
Demostraciones
Si buscas inspiración, asegúrate de consultar las demostraciones de animaciones web inspiradas en Material, con fuente alojada en GitHub. En ellas, se muestra una variedad de efectos asombrosos, y se puede ver el código fuente de cada demostración intercalado.
Las demostraciones incluyen una galaxia giratoria colorida, una Tierra giratoria o incluso diversos efectos sobre un elemento antiguo y plano.
Polyfill
Para garantizar una gran compatibilidad con todos los navegadores modernos, puedes usar una biblioteca de polyfill. La API de Web Animations tiene un polyfill disponible en este momento que lo lleva a todos los navegadores modernos, incluidos Internet Explorer, Firefox y Safari.
Si te gusta la aventura, puedes usar el polyfill web-animations-next, que también incluye funciones que aún no se completaron, como los constructores componibles GroupEffect y SequenceEffect.
Para ver una comparación entre los dos polyfills, consulta la página principal.
Para usar polyfill en tu código, tienes varias opciones.
Usa una CDN, como cdnjs o jsDelivr, o bien oriéntate a una versión específica mediante rawgit.com.
Instalación mediante NPM o Bower
$ npm install web-animations-js $ bower install web-animations-js ```
En todos los casos, puedes incluir el polyfill en una etiqueta de secuencia de comandos antes que cualquier otro código.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Otros recursos
Si deseas leer una introducción más técnica, revisa la especificación del W3C.
Dan Wilson también escribió un excelente conjunto de publicaciones sobre Web Animations, que incluye información sobre cómo usarlo junto con la nueva propiedad motion-path de CSS.
Para ver algunas muestras que usan motion-path, consulta el documento de Eric Willigers.