Estoy usando la API de animaciones web para animar elementos DOM. Quiero mostrar el progreso de la animación después de 1 segundo.
Esto es lo que he probado.
const animation = div.animate({ opacity: 0 }, { duration: 2000 }); setTimeout(() => console.log(animation.effect.getComputedTiming().progress), 1000);Espero que se muestre 0.5 porque la función setTimeout se invoca cuando la animación está a la mitad. El problema es que se imprime 0.0083
Las animaciones generadas usando animate() (o animaciones/transiciones CSS para el caso) no comienzan inmediatamente.
Más bien, los navegadores realizan primero el trabajo de configuración necesario, como dividir el contenido en capas adecuadas, renderizar esas capas, pasar las capas y la información de animación al proceso/proceso del compositor y luego iniciar la animación (y resolver la promesa ready del archivo Animation ). objeto que devuelve animate() ).
Debido a que este costo de configuración a menudo no es cero (especialmente en dispositivos de gama baja), si los navegadores no hicieran esto, la animación saltaría cuando comenzara porque para cuando el navegador finalmente pudiera mostrar la animación, la hora actual de la animación sería ya ha pasado 0ms. Por ejemplo, si el navegador tardó 100 ms en configurar la animación, la primera media docena de fotogramas se perderían y la animación saltaría.
(Por si sirve de algo, una de las motivaciones detrás will-change fue permitir a los autores pagar este costo de configuración por adelantado para que la animación pueda comenzar más rápidamente).
Todos los navegadores realizan esta optimización, pero el momento preciso varía de un navegador a otro y el costo de configuración variará entre dispositivos y plataformas. Se proporciona la promesa Animation.ready para que pueda esperar hasta que la animación realmente haya comenzado, independientemente del navegador/plataforma/dispositivo.
Sin embargo, puede forzar el inicio inmediato de la animación configurando el tiempo de startTime directamente. Por ejemplo,
const animation = elem.animate(...); animation.startTime = document.timeline.currentTime;Sin embargo, esto puede provocar que se pierdan los primeros fotogramas de la animación, especialmente en dispositivos de gama baja.