requestAnimationFrame動畫循環

我有下面的代碼片段：requestAnimationFrame動畫循環

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

這旋轉格45度和工作。
如何將此變爲無限動畫循環，以便動畫自動重新啓動（從0度）？

來源

2017-02-28 Juergen

沒有嘗試這樣VAR CLR超時= setTimeout的（動畫，4000）; – Edison

看看[CSS動畫]（https://developer.mozilla.org/en-US/docs/Web/CSS/animation）（並且你不想在內部循環中使用requestAnimationFrame ... ）。 – K3N

它沒有意義的，使用無論是針對當前的代碼，或者你想改變的代碼。

對於當前的代碼，您正在設置樣式，然後讓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>

來源

2017-02-28 10:44:59 Quentin

嗨，試試下面的代碼。

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)

來源

2017-02-28 10:36:16 spankajd

requestAnimationFrame動畫循環

回答

相關問題