Estoy tratando de hacer una animación javascript con window.requestAnimationFrame . Debe activarse cuando se hace clic en un botón (como la animación "soltar" de un menú desplegable que aparece). Utilizo la variable timeElapsed para calcular el tiempo desde que se hace clic en el botón y calculo la nueva altura del objeto con timeElapsed. Paso el tiempo cuando se hace clic en el botón ( start ) como un argumento de la función. Según mi consola, aunque el start (computado fuera de la función) se calcula correctamente, por alguna razón cambia el tiempo desde que se carga la página una vez que se pasa a la función .
Esto es lo que tengo hasta ahora:
function mobileAppear(sTime) { console.log(sTime); //Prints milliseconds since page is loaded currTime = new Date().getTime(); timeElapsed = (currTime - sTime)/1000; newHeight = timeElapsed*10 ; wishlist.style.height = newHeight + "vh"; if (newHeight < 66){ window.requestAnimationFrame(mobileAppear); } } function toggleView() { //Some code here var start = new Date().getTime(); console.log(start); // works fine if (window.innerWidth < 768){ mobileAppear(start); } }¿Cuál es el problema aquí y cómo solucionarlo?
*Nota: probablemente haya otro error en la parte del código, pero por ahora estoy tratando de arreglar este.
Desea permitir que window.requestAnimationFrame maneje sus marcas de tiempo para que vea a continuación:
Aquí está la parte de los documentos de MDN que tuve que seguir en el pasado
const wishlist = document.getElementById('wishlist') const button = document.getElementById('button') button.addEventListener('click', toggleView) let startTime function mobileAppear(curTime) { if (startTime === undefined) startTime = curTime const timeElapsed = (curTime - startTime)/1000; const newHeight = timeElapsed * 10; wishlist.style.height = newHeight + "px"; // I changed this to pixels for the example if (newHeight < 66){ window.requestAnimationFrame(mobileAppear); } } function toggleView() { //Some code here // let requestAnimationFrame handle sending the current timestamp window.requestAnimationFrame(mobileAppear) } button.addEventListener('click', toggleView) <div id="wishlist" style="width: 200px; height: 1px; margin: 10px; background: red"></div> <button id="button">Toggle View</button>El problema de su código es que requestAnimationFrame pasará un DOMHighResTimeStamp a la función de devolución de llamada, en este caso, mobileAppear . Entonces sTime no será lo mismo que obtienes en toggleView .
Puede mover el start y sTime fuera de esta manera:
let sTime = 0; function mobileAppear() { console.log(sTime); //Prints milliseconds since page is loaded currTime = new Date().getTime(); timeElapsed = (currTime - sTime)/1000; newHeight = timeElapsed*10 ; wishlist.style.height = newHeight + "vh"; if (newHeight < 66){ window.requestAnimationFrame(mobileAppear); } } function toggleView() { //Some code here sTime = new Date().getTime(); console.log(sTime); // works fine if (window.innerWidth < 768){ mobileAppear(); } } Sin embargo, DOMHighResTimeStamp puede tratarse como elapsedTime . Entonces, una mejor manera de resolver su problema podría ser:
function mobileAppear(timeElapsed=0) { // console.log(sTime); // currTime = new Date().getTime(); // timeElapsed = (currTime - sTime)/1000; newHeight = timeElapsed*10 ; wishlist.style.height = newHeight + "vh"; if (newHeight < 66){ window.requestAnimationFrame(mobileAppear); } } function toggleView() { //Some code here // sTime = new Date().getTime(); // console.log(sTime); // works fine if (window.innerWidth < 768){ window.requestAnimationFrame( mobileAppear ); } }Hazme saber si esto funciona.