Преобразование jQuery рекурсивный анимировать requestAnimationFrame

Question

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

Ширина полосы выполнения увеличивается каждые 100 мс на 20 пикселей. Я использую jQuery's animate() для анимации ширины.

Регистрация Date.now(), ясно, что время меняется и неточно.

http://jsfiddle.net/trustweb/az3aE/23/

function animateProgress() { 
    console.log(Date.now() - progressTime); 
    progressTime = Date.now(); 

    progress_width = $(progress).width(); 

    if (progress_width < progressLimit) { 
     $(progress).animate(
      { width: '+=20' }, '' + progressTime, "linear", animateProgress 
     ); 
    } 
} 

Я был reading about requestAnimationFrame, и я предполагаю, что это правильный путь; как я могу преобразовать функцию выше, чтобы использовать requestAnimationFrame, или достичь точного времени каким-то другим способом?

Answer 1

Не требуется requestAnimationFrame. Используйте переход вместо и setInterval:

var progressBar = document.getElementById("progress"); 
var start = new Date(); 

var timer = setInterval(function() { 
    var t = new Date() - start; 

    if (t < 500) { 
     progressBar.style.width = (t * 20/100 | 0) + "px"; 
    } else { 
     progressBar.style.width = "100px"; 
     clearInterval(timer); 
    } 
}, 100); 

Demo (если я правильно понимаю - ваша jsFiddle не имеет каких-либо элементов, участвующих, так что трудно сказать)