La API de Web Animations proporciona potentes primitivas para describir animaciones imperativas de JavaScript. ¿Qué significa eso? Obtén más información sobre los recursos que tienes disponibles, incluidas 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 (más adelante hablaremos de ello). La compatibilidad nativa para este método, y su objeto de reproductor, se volvió ampliamente disponible 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
Hay una cantidad cada vez mayor de codelabs disponibles para la API de Web Animations. Estas 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 los vínculos o recursos relacionados son el mejor punto de partida si deseas comprender las nuevas primitivas disponibles en Web Animations. Para tener una idea de lo que podrías crear, mira este efecto de revelación inspirado en Android.
Si recién comienzas, no busques más.
Demostraciones
Si buscas inspiración, asegúrate de revisar las demostraciones de animaciones web inspiradas en Material, con la fuente alojada en GitHub. Estos muestran una variedad de efectos sorprendentes, y puedes ver el código fuente de cada demostración de forma intercalada.
Las demostraciones incluyen una galaxia giratoria colorida, la Tierra en rotación o, incluso, una variedad de efectos sobre un elemento antiguo y liso.
Polyfill
Para garantizar una gran compatibilidad en todos los navegadores modernos, puedes usar una biblioteca de polyfills. La API de Web Animations tiene un polyfill disponible ahora mismo 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 cualquiera de los polyfills en tu código, tienes algunas opciones.
Usa una CDN, como cdnjs, jsDelivr, o realiza la segmentación para una versión específica mediante rawgit.com
Instalar mediante NPM o Bower
$ npm install web-animations-js $ bower install web-animations-js ```
En todos los casos, puedes simplemente incluir el polyfill en una etiqueta de script 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 las especificaciones del W3C.
Dan Wilson también escribió un gran conjunto de publicaciones sobre animaciones web, que incluye cómo usarlas junto con la nueva propiedad motion-path de CSS.
Para ver algunas muestras del uso de motion-path, consulta el documento de Eric Willigers.