La compatibilidad nativa con Animaciones web se envió por primera vez en Chrome 36 y se actualizó con el control de reproducción en Chrome 39. Se puede usar el método Element.animate() para activar animaciones imperativas directamente desde JavaScript, y se puede aprovechar el objeto que se muestra para controlar la reproducción de estas animaciones. Estos métodos se detallan en el borrador actual de la especificación del W3C de animaciones web.
Hay un polyfill enviado en desarrollo activo que realiza un seguimiento de todas las funciones de Web Animations implementadas de forma nativa y es compatible con todos los navegadores modernos. Estos métodos principales están listos para usarse en este momento y merecen formar parte de tu caja de herramientas para crear experiencias enriquecidas que se beneficien de las animaciones (como la aplicación web de Google I/O 2015).
Cambios de constructor y grupos
En la especificación de Animaciones web, también se describen grupos y secuencias, y constructores para animaciones y reproductores. Estas se encuentran disponibles en el polyfill web-animations-next, que se diseñó para mostrar funciones que aún se están debatiendo y que aún deben implementarse de forma nativa. En respuesta a los comentarios de los desarrolladores, el equipo que desarrolla Web Animations está cambiando el nombre de estas funciones para que sean más claras.
El FXTF se reunió hace poco en Sídney, Australia, y analizó los naming, a medida que varios desarrolladores plantearon puntos válidos sobre algunos de los nombres que eran confusos. Como resultado, se acordaron los siguientes cambios de nomenclatura:
- Animation se convierte en KeyframeEffect
- AnimationSequence se convierte en SequenceEffect
- AnimationGroup se convierte en GroupEffect.
- AnimationPlayer se convierte en Animation.
Recuerda que, si bien las animaciones y sus reproductores están disponibles de forma nativa en Chrome y como parte del polyfill, actualmente se crean directamente con el método Element.animate(). El código existente que usa el método Element.animate() no requerirá cambios.
Los nombres nuevos representan con mayor precisión el comportamiento proporcionado por cada objeto. KeyframeEffect, por ejemplo, describe efectos basados en fotogramas clave que pueden orientarse a elementos HTML. Por el contrario, el nuevo objeto Animation representa una animación en uno de muchos estados (como en reproducción, en pausa, etcétera).
SourceCodeEffect
Si usas partes de la especificación del borrador con el polyfill de web-animations-next, deberás actualizar tu código dentro del período de baja para reflejar estos nombres nuevos. Según la política de cambios de polyfill, nuestro objetivo es admitir una versión anterior durante tres meses y mostrar declaraciones de advertencia en la consola si tu sitio usa funciones o nombres obsoletos.
Si quieres probar estas funciones, mantente alerta con la versión 2 de polyfill para aprovechar estos nombres nuevos. Por último, asegúrate de suscribirte al grupo web-animations-changes para recibir información sobre cualquier otro cambio.