La API de Web Animations proporciona primitivas potentes para describir animaciones imperativas desde JavaScript, pero ¿qué significa eso? Obtén información sobre los recursos disponibles, incluidas las demos y los codelabs de Google.
Segundo plano
En su 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 de esto más adelante). La compatibilidad nativa con este método y su objeto de reproductor estuvo 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. Estas son guías autoguiadas que demuestran diferentes conceptos en 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 quieres comprender las nuevas primitivas disponibles en Animaciones web. Para tener una idea de lo que podrías crear, consulta este efecto de revelación inspirado en Android:
Si recién estás empezando, no busques más.
Demostraciones
Si buscas inspiración, asegúrate de consultar las demostraciones de animaciones web inspiradas en Material, con el código fuente alojado en GitHub. En ellas, se muestra una variedad de efectos increíbles, y puedes ver el código fuente de cada demo intercalado.
Las demostraciones incluyen una galaxia giratoria colorida, una Tierra en rotación o incluso 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 en este momento 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 están finalizadas, 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 o jsDelivr, o segmenta una versión específica a través de rawgit.com.
Cómo instalarlo a través de 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 las especificaciones del W3C.
Dan Wilson también escribió un excelente conjunto de publicaciones sobre animaciones web, incluidas las instrucciones para usarlas junto con la nueva propiedad motion-path de CSS.
Para ver algunos ejemplos que usan motion-path, consulta el documento de Eric Willigers.