requestAnimationFrame动画循环

Question

I have the following code snippet:

function animate()
{
testdiv.style.transitionDuration="2500ms"
testdiv.style.transitionTimingFunction="linear"
testdiv.style.transform="rotate(45deg)"
window.requestAnimationFrame(animate)
}
window.requestAnimationFrame(animate)

This rotates the div 45 degrees and is working.
How can I turn this into an infinite animation loop so that the animation restarts automatically (from 0 degrees)?

Answer 1

Hi try with below code.

var FPS = 24;   //Frame per second. 
var prevTime,curTime;

function animate()
{
  curTime = new Date();
  if(prevTime === undefined || (curTime - prevTime) >= 1000/FPS)
  {
     testdiv.style.transitionDuration="2500ms"
     testdiv.style.transitionTimingFunction="linear"
     testdiv.style.transform="rotate(45deg)"

     prevTime = curTime;
  }

  window.requestAnimationFrame(animate);

}

window.requestAnimationFrame(animate)

Answer 2

It doesn't make sense to use requestAnimationFrame for either your current code, or the code you want to change to.

For the current code, you're setting a style and then letting CSS take over. There's no need to do anything after time has passed.

To change it to reset and repeat the loop, you want to trigger the new code when the animation has finished, not when the browser is ready to render a new frame. To do that, listen for the transitionend event and then remove the transform value to set it back to the default.

 var testdiv = document.querySelector("div"); testdiv.addEventListener("transitionend", animate); setTimeout(animate, 100); function animate() { if (testdiv.style.transform) { testdiv.style.transform = ""; } else { testdiv.style.transform = "rotate(45deg)"; } } 

 body { padding: 100px; } div { transition-Duration: 2500ms; transition-Timing-Function: linear; } 

 <div>....</div>