La API de Web Animations proporciona elementos primitivos potentes para describir animaciones imperativas desde JavaScript, pero ¿qué significa eso? Descubre los recursos disponibles, incluidas las demostraciones y los codelabs de Google.
Fondo
En esencia, la API proporciona el método Element.animate().
Veamos un ejemplo que 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 una excelente alternativa de polyfill (más sobre esto más adelante). La compatibilidad nativa con este método y su objeto de reproductor estuvo disponible de forma generalizada como parte de Chrome 39. También está disponible de forma nativa en Opera y se encuentra en desarrollo activo para Firefox. Es una herramienta primitiva potente que merece un lugar en tu caja de herramientas.
Codelabs
Hay cada vez más codelabs disponibles para la API de Web Animations. Son guías de aprendizaje a tu propio ritmo 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 los vínculos o recursos relacionados, son el mejor lugar para comenzar si deseas comprender las nuevas primitivas disponibles en Web Animations. Para tener una idea de lo que puedes crear, consulta este efecto de revelación inspirado en Android:
Así que, si recién estás comenzando, no busques más.
Demostraciones
Si buscas inspiración, no dejes de consultar las demostraciones de Web Animations inspiradas en Material, con el código fuente alojado en GitHub. En ellas, se muestran una variedad de efectos increíbles, y puedes ver el código fuente de cada demostración de forma intercalada.
Las demostraciones incluyen una galaxia colorida que gira, la Tierra en rotación o incluso solo una variedad de efectos en un elemento simple.
Polyfill
Para garantizar una excelente compatibilidad con todos los navegadores modernos, puedes usar una biblioteca de polyfill. La API de Web Animations tiene un polyfill disponible ahora mismo que la lleva a todos los navegadores modernos, incluidos Internet Explorer, Firefox y Safari.
Si te sientes aventurero, puedes usar el polyfill web-animations-next, que también incluye funciones que aún no se finalizaron, como los constructores GroupEffect y SequenceEffect componibles.
Para obtener una comparación entre los dos polyfills, consulta la página principal.
Para usar cualquiera de los polyfills en tu código, tienes algunas opciones.
Usa una CDN, como cdnjs, jsDelivr o segmenta una versión específica a través de rawgit.com.
Instala con 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 de 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 quieres leer una introducción más técnica, consulta la especificación de W3C.
Dan Wilson también escribió un excelente conjunto de publicaciones sobre Web Animations, incluido cómo usarlo junto con la nueva propiedad motion-path de CSS.
Para ver algunos ejemplos que usan motion-path, consulta el documento de Eric Willigers.