Как управлять скоростью анимации (requestAnimationFrame)?

Question

изменить цвет текста с requestAnimationFrame(animate); функции:

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 может быть одинаковым в этих двух случаях. Что я могу сделать, чтобы контролировать скорость анимации в зависимости от заданного времени в секундах/миллисекундах?

Answer 1

Из тегов вопроса я могу видеть только то, что вы анималируете что-то нарисованное на холсте, и поэтому вы не можете использовать css-анимацию или jquery-animation.

Вы должны контролировать длину анимации, вычисляя разницу во времени.

и может сделать его похожим на данном примере

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 сек

Answer 2

Вы должны отделить проблемы четко.
У вас есть один запросAnimationFrame, который вычисляет текущее время анимации и вызывает каждое обновление и выполняет связанные функции.
Тогда ваши анимации будут обрабатываться функцией (или экземпляром класса, если вы идете ООП), которая имеет дело с текущим временем анимации.

Просто некоторые направления для кода:

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, который позволяет добавлять/удалять/обновлять/рисовать анимации.