Question

我有以下代码段：

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

这将div旋转45度并正在工作如何将其转换为无限动画循环以便动画自动重启（从0度开始）？

Answer 1

您可以尝试使用以下代码。

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

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

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

要将其更改为重置并重复循环，您希望在动画结束时触发新代码，而不是在浏览器准备好渲染新帧时触发。为此，请侦听transitionend事件，然后删除转换值以将其设置为默认值。

＆＃13;

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)";
    }
}

＆＃13;

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

＆＃13;

<div>....</div>

＆＃13;

requestAnimationFrame动画循环

2 个答案: