如何控制動畫速度（requestAnimationFrame）？

我改變文字顏色與requestAnimationFrame(animate);功能：如何控制動畫速度（requestAnimationFrame）？

requestAnimationFrame(animate); 

function animate(time){ 
    ... // change text color here 
    if (offset_s < offset_e) {requestAnimationFrame(animate);} 
}

offset_s和offset_s指示開始和文本的顏色變化的結束位置。在某些情況下，動畫應該持續2秒，但在順序情況下 - 持續5秒，但在這兩種情況下，offset_e - offset_s可能是相同的。我能做什麼來控制基於給定時間的動畫速度，以秒/毫秒爲單位？

來源

2015-01-16 LA_

[使用requestAnimationFrame控制fps？]（http://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe） – joews

如果你只是改變顏色，你可以使用css動畫，用它來控制時間更容易 – Luizgrs

從問題的標籤，我只能看到你動畫畫在畫布上的東西，這就是爲什麼你不能使用CSS動畫或jQuery動畫。

您必須通過計算時間差來控制動畫的長度。

ü可以做類似這樣的例子

function start_animate(duration) { 
    var requestID; 
    var startTime =null; 
    var time ; 

    var animate = function(time) { 


    time = new Date().getTime(); //millisecond-timstamp 

    if (startTime === null) { 
     startTime = time; 
    } 
    var progress = time - startTime; 

    if (progress < duration) { 

     if(offset_s < offset_e){ 
     // change text color here 

     } 
     requestID= requestAnimationFrame(animate); 
    } 
    else{ 
     cancelAnimationFrame(requestID); 
    } 
    requestID=requestAnimationFrame(animate); 
    } 
    animate(); 
}

觸發動畫，並調用start_animate（2000）//持續時間1000毫秒= 1秒

來源

2015-01-16 12:30:08 micha

你應該清楚地分離關注。
運行一個requestAnimationFrame，它計算當前的動畫時間並調用每個更新並繪製相關函數。
然後，您的動畫將由處理當前動畫時間的函數（或類實例，如果您轉到OOP）處理。

只爲代碼中的一些方向：

var animationTime = -1; 
var _lastAnimationTime = -1; 

function launchAnimation() { 
    requestAnimationFrame(_launchAnimation); 
}  

function _launchAnimation(time) { 
    animationTime = 0; 
    _lastAnimationTime = time; 
    requestAnimationFrame(animate); 
} 

function animate(time){ 
    requestAnimationFrame(animate); 
    var dt = time - _lastAnimationTime ; 
    _lastAnimationTime = time; 
    animationTime += dt; 

    // here call every draw/update functions 
    // ... 
    animationHandler.update(animationTime); 
    animationHandler.draw(context); 
}

要開始你的「引擎」，只需撥打launchAnimation那麼你就會有一個有效的animationTime和dt處理。

我會讓animationHandler類AnimationHandler的一個實例，允許添加/刪除/更新/繪製動畫。

來源

2015-01-16 18:32:07 GameAlchemist

如何控制動畫速度（requestAnimationFrame）？

回答

相關問題