0

Tengo una barra de progreso que animo con d3.js (versión 4) de la siguiente manera:

d3.select("#timeline")
  .transition()
  .ease(function(t){return +t})
  .duration(30000)
  .style("width", "0px")
  .on("end", function() {
     console.log("GAME OVER");
  });
#timeline {
  width:100%;
  height: 20px;
  background-color: #6699aa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.js"></script>

<div id="timeline"><div>

Pero la animación se para cada vez que el usuario cambia de pestaña, lo cual es un problema porque es un juego y esto le permitiría hacer trampas (abriendo un buscador en otra ventana/pestaña y saltando de una a otra).

¿Por qué ocurre ese problema? ¿Y cómo puedo solucionarlo?

1 respuesta 1

0

El problema principal es que d3 utiliza requestAnimationFrame, por lo que cada vez que cambias de pestaña, el thread se duerme, para evitar sobrecargas en el sistema (el browser no dibuja, ya que el usuario no está mirando).

Una solución que se me ocurre, es que utilices la API de visibilidad, guardando el tiempo en el que dejó de ser visible tu tab y calculando la diferencia de tiempo, para luego aplicar un valor directo a tu animación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.