¡Buen dia amigos!Las API web están en constante evolución. Algunos de ellos, como Console o Canvas, están bien soportados por todos los navegadores, otros aún están en desarrollo.Una de las API en desarrollo es la API de animaciones web o WAAPI. A pesar del hecho de que la primera versión de la especificación se publicó en 2012, y la API en sí se implementó por primera vez en los navegadores Firefox y Chrome en 2014, me enteré recientemente (tampoco he oído hablar de eso antes, aproximadamente por persona).Permite a los desarrolladores trabajar con animaciones CSS usando JavaScript. Su sintaxis es similar a la sintaxis de las animaciones CSS tradicionales, pero tiene algunas características que facilitan a los desarrolladores la creación y modificación de animaciones.Veamos esta API con un ejemplo simple.A continuación vemos un cuadrado giratorio, cuyo color cambia con cada turno.
CSS podría verse así:#cube {
width: 40px;
height: 40px;
margin: 50%;
background-color: pink;
animation: rotateCube 1s infinite;
}
@keyframes rotateCube {
0% {
transform: rotate(0deg);
}
30% {
background-color: purple;
}
100% {
transform: rotate(180deg);
}
}
Ahora haz lo mismo con WAAPI.Crear animación
Todo comienza con la creación de un objeto Keyframes que contiene información similar a la contenida en la directiva @keyframes de nuestro CSS:let cubeRotating = [
{transform: 'rotate(0deg)', backgroundColor: 'pink'},
{backgroundColor: 'purple', offset: 0.3},
{transform: 'rotate(180deg)', backgroundColor: 'pink'}
]
Vemos dos diferencias principales:- Necesitamos agregar backgroundColor a otros pasos.
- No necesitamos determinar el tiempo para completar cada paso como un porcentaje.
WAAPI divide automáticamente la animación en partes iguales por el número de teclas, por lo que en nuestro caso el color de fondo cambiará aproximadamente la mitad de la animación.Sin embargo, queremos que esto suceda en un 30%, por lo que agregamos la propiedad offset con un valor de 0.3 en el segundo paso.Hay una cosa importante para recordar: un objeto Keyframes debe tener al menos dos claves. De lo contrario, se lanzará un NotSupportedError.A continuación, se crea un objeto que contiene propiedades de animación que son responsables de la duración y el número de repeticiones:let cubeTiming = {
duration: 1000,
iterations: Infinity
}
La duración de la animación se establece en milisegundos.En lugar de "infinito" usamos la palabra clave "Infinito".Finalmente, para ejecutar la animación, usamos el método Element.animate:document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
Hay varias opciones de sintaxis más. Los ejemplos se pueden encontrar aquí .Pero eso no es todo. ¡El hecho es que con WAAPI podemos controlar la reproducción de animaciones!Control de reproducción de animación
Llamar al método animado inicia la animación de inmediato, pero esto no siempre es lo que queremos. Por lo tanto, podemos llamar a los métodos de pausa y reproducción para detener e iniciar la animación, respectivamente:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
cubeAnimation.pause()
document.body.onclick = () => cubeAnimation.play()
En nuestro ejemplo, trabajamos con una animación, pero puede agregar varias "animaciones" a la página y administrarlas como desee.Entre los métodos WAAPI disponibles, también hay métodos de finalización, cancelación e inversión.También podemos controlar la velocidad de reproducción de la animación:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
document.body.onclick = () => cubeAnimation.playbackRate *= 1.5
Este código hace que el cuadrado gire más rápido al hacer clic.
Hasta ahora, hemos estado aprendiendo cómo crear una animación y controlar su reproducción. Otra característica de WAAPI es el acceso a todas las animaciones a la vez.Administra múltiples animaciones
WAAPI tiene un método getAnimations que le permite acceder a todas las animaciones creadas.Supongamos que queremos ralentizar todas las animaciones que están en la página si el usuario ha activado el movimiento de preferencia reducida (la función de medios CSS prefiere el movimiento reducido puede usarse para determinar si el usuario ha solicitado que el SO minimice la cantidad de animación o movimiento que usa - aprox. por):const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
if(mediaQuery.matches){
document.getAnimations().forEach(animation => {
animation.playbackRate *= 0.5
})
}
En el ejemplo anterior, buscamos la función de medios prefiere movimiento reducido y, si su valor es reducido, obtenemos todas las animaciones en la página y reducimos su velocidad de reproducción a la mitad.Esta es una de esas cosas que hacen que WAAPI sea muy útil. Podemos hacer cambios en varias animaciones cambiando una propiedad.Dependencias
Otra característica interesante de WAAPI es la capacidad de determinar la dependencia de las propiedades de una animación de las propiedades de otra.Por ejemplo, si tenemos dos cuadrados y queremos que el segundo gire dos veces más rápido que el primero, podemos hacerlo de dos maneras.Primera forma:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: 500,
iterations: Infinity
}
)
El tiempo de animación del primer cuadrado es de 1 segundo, el segundo - 500 milisegundos.Sin embargo, con este enfoque, cuando cambiamos el tiempo de animación del primer cuadrado, necesitamos hacer lo mismo para el segundo cuadrado.¿Imagina lo difícil que se vuelve cuando hay muchas animaciones o una gran cantidad de objetos animados?La mejor manera de resolver nuestro problema es establecer la dependencia de la rotación del segundo cuadrado en el primero:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: cube1Animation.effect.timing.duration / 2,
iterations: Infinity
}
)
Por lo tanto, usamos el tiempo de animación del primer cuadrado para determinar el tiempo de animación del segundo cuadrado. Ahora, al cambiar el tiempo de animación del primer cuadrado, el segundo siempre rotará el doble de rápido.
Actuación
Hablando de rendimiento, no noté mucha diferencia entre usar CSS y WAAPI. Pero esto puede deberse a la simplicidad de mi ejemplo.Una ventaja importante de WAAPI sobre otros métodos de creación de animación en JS es que se ejecuta en un hilo separado, lo que permite que el hilo principal se "olvide" de la animación y haga el resto del código.Soporte del navegador
WAAPI se encuentra actualmente en estado de borrador y es parcialmente compatible con versiones recientes de Firefox y Chrome, así como en los principales navegadores móviles.El soporte parcial significa que los navegadores soportan métodos tales como reproducir, pausar, revertir, finalizar y tasa de reproducción, pero no admiten getAnimations.
Hay una polyphile para WAAPI en todos los navegadores.¡Eso es todo para mí!Más información:Uso de la API de animacionesweb Ejemplos de la API de animaciones webGran serie "Hablemos de la API de animaciones web" de Dan WilsonGracias por su atención.