У меня есть следующий JavaScript:Отменяя requestAnimationFrame

function animate() { 
// call other function 

offset += 3; 
if (offset > 15) offset = 0; 

/// make the animation loop loop 
var request = requestAnimationFrame(animate); 
}

, а затем в моем HTML:

<body onload="animate()" >

Это все работает отлично, и он сохраняет анимацию непрерывно зацикливание, который является большим. Но я хочу выяснить, как сделать эту анимацию за 4 секунды, а затем остановиться.

«Вызов другой функции» - это просто линия, которая перемещается вниз, а затем сбрасывается, чтобы создать впечатление о движении по дорожке. На данный момент это все сделано в Canvas.

Любая помощь была бы высоко оценена!

источник

2013-11-17 Cactusman07

Вы можете использовать аргумент requestAnimationFrame «s, который истекшее время в миллисекундах - это даст вам очень точное время:

function loop(elapsedTime) { 

    if (elapsedTime >= 4000) return; /// break loop after 4 seconds 

    requestAnimationFrame(loop); /// provides elapsed time as arg. to loop 
} 

/// start loop with rAF to get a valid argument first time: 
requestAnimationFrame(loop);

Online demo here

Из documentation at MDN:

методу обратного вызова передается один аргумент, DOMHighResTimeStamp, который указывает время в миллисекундах, но с минимальной точностью 10 мкс, при которой планируется перекраска .

источник

2013-11-17 23:09:54 K3N

Спасибо за пример. Большое спасибо за помощь! – Cactusman07

Вы можете проверить 4000ms истекшее время, как это:

var start = Date.now(); 

function animate() { 

    if(Date.now()-start>4000){return;} 

    requestAnimFrame(loop); 

    // do stuff 

};

Таким образом, вы выездную перед вызовом следующего цикла с RAF (поэтому нет необходимости отменить).

источник

2013-11-17 06:14:47 markE

'Date.now()' или 'new Date()' а не 'new Date.now()', хотя. (И точка с запятой не нужна в конце объявления функции.) – rninty

Спасибо @minty ... Date.now() исправлено. – markE

Спасибо, это здорово – Cactusman07

Отменяя requestAnimationFrame

ответ

Online demo here

Смежные вопросы