requestAnimationFrame動畫循環

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事件，然后刪除轉換值以將其設置回默認值。

 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>