requestAnimationFrame动画循环

Question

我有以下代码片段：

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

这旋转45度，并正在工作。

如何将其转换为无限的动画循环，以便动画自动重新启动(从0度开始)？

Answer 1

对当前代码或要更改的代码使用requestAnimationFrame都是没有意义的。

对于当前代码，您将设置一个样式，然后让CSS接管。过了一段时间以后，没有必要做任何事情。

若要将其更改为重置并重复循环，您希望在动画完成时触发新代码，而不是在浏览器准备呈现新框架时触发。为此，侦听transitionend事件，然后删除transform值，将其设置为默认值。

​

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>

​

Answer 2

嗨，试试下面的代码。

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)