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. El método Element.animate() se puede usar para activar animaciones imperativas directamente desde JavaScript, y su objeto que se muestra se puede aprovechar para controlar la reproducción de estas animaciones. Estos métodos se detallan en el borrador actual de la especificación de W3C para animaciones web.
Hay un polyfill enviado en desarrollo activo que realiza un seguimiento de todas las funciones de animaciones web implementadas de forma nativa y que es compatible con todos los navegadores modernos. Estos métodos principales están listos para usarse ahora mismo y merecen ser parte de tu caja de herramientas para crear experiencias enriquecidas que se beneficien de las animaciones (como en la app web de Google I/O 2015).
Cambios en el constructor y los grupos
La especificación de animaciones web también describe grupos y secuencias, y constructores para animaciones y reproductores. Estas funciones están disponibles en el polyfill web-animations-next, que se diseñó para mostrar funciones que aún están en discusión y que aún no se implementan de forma nativa. En respuesta a los comentarios de los desarrolladores, el equipo que desarrolla las animaciones web cambiará el nombre de estas funciones para que sean más fáciles de entender.
Recientemente, el FXTF se reunió en Sídney, Australia, y habló sobre los nombres, ya que varios desarrolladores plantearon puntos válidos sobre la confusión que generaban algunos de ellos. Como resultado, se acordaron los siguientes cambios de nombre:
- 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 a través del 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 que proporciona cada objeto. KeyframeEffect, por ejemplo, describe los efectos basados en fotogramas clave que pueden orientarse a elementos HTML. En cambio, el nuevo objeto Animation representa una animación en uno de muchos estados (como reproducción, pausa, etcétera).
SourceCodeEffect
Si usas partes de la especificación del borrador a través del polyfill web-animations-next, deberás actualizar tu código dentro del período de baja para que refleje estos nombres nuevos. Según la política de cambios de polyfill, nuestro objetivo es admitir una versión anterior durante tres meses y proporcionar declaraciones de advertencia de la consola si tu sitio usa funciones o nombres obsoletos.
Si quieres probar estas funciones, espera la versión 2 del polyfill para aprovechar estos nombres nuevos. Por último, asegúrate de suscribirte al grupo web-animations-changes para enterarte de cualquier otro cambio.