¿Cuáles son las implicaciones de rendimiento/eficiencia de la actualización continua de la propiedad currentTime de una animación web en milisegundos?
Lo que me gustaría hacer es vincular el punto actual de una animación web en su marco de tiempo con el usuario que mueve el dedo por la pantalla. Normalmente, esto se hace llamando a requestAnimationFrame desde un evento de movimiento de puntero y configurando las propiedades css directamente en el elemento. Pero, me gustaría usar animaciones web en su lugar.
let animatedObj = animatedEl.animate(props, timing) animatedObj.pause() el.addEventListener('pointermove', (event) => { animatedObj.currentTime = (.... percentage of pointer position ....) })Pero, ¿es más propenso a jak o consume mucha energía de la batería que requestAnimationFrame y establecer las propiedades css directamente? ¿La configuración de currentTime no está diseñada para actualizarse continuamente dentro de ms? ¿Sería mejor usar requestAnimationFrame sin dejar de configurar el tiempo actual de la animación?
Es bastante aceptable configurar el currentTime de esta manera y, en teoría, debería ser un poco más eficaz que configurar las propiedades de CSS directamente, ya que los valores de las propiedades de CSS no necesitan volver a analizarse en cada cuadro. En la práctica, sin embargo, la diferencia debería ser insignificante. Mediante el uso de animaciones web, también puede utilizar efectos de aceleración y similares, lo que podría ser una ventaja.
Supongo que animatedObj en su ejemplo está en pausa. Al pausarlo, puede asegurarse de que no activará actualizaciones de estilo innecesariamente cuando la posición panorámica no cambie.
Al usar requestAnimationFrame , se asegura de que su devolución de llamada se ejecute antes de que se actualice el estilo (pero después de que se haya actualizado el tiempo de animación), lo que, en algunos casos, puede significar que puede evitar ensuciar y actualizar el estilo dos veces, lo que produce un mejor rendimiento. Sin embargo, en última instancia, dependerá de su aplicación, ya que puede eliminar el estilo al leer los valores de getComputedStyle , innerHeight , etc.
Además, al usar requestAnimationFrame puede asegurarse de actualizar el estilo solo una vez por cuadro, incluso si llegan varios eventos al mismo cuadro.
Tenga en cuenta que el rendimiento aún no coincidirá con el de una animación web que se reproduce regularmente ya que, a diferencia de una animación normal, no será posible que el navegador descargue esta animación manual al compositor (lo que potencialmente puede reducir el uso de la batería porque el estilo no necesita ser actualizado en el hilo principal). La próxima función de animaciones con enlaces de desplazamiento debería ayudar con esto.