2

I have seen a lot of usages where the requestAnimationFrame is being called and stopped, but I haven't seen anything regarding stopping it after x seconds. I have written this code:

http://codepen.io/anon/pen/PbvrVZ

And one snippet from my code, is like this:

function drawloop() {
        if (focused) {
            requestAnimationFrame(drawloop);
        }

I just can't understand how to stop the animation after, let's say, 4 seconds. I am a newbie in JavaScript. Should I use timeOut or intervals?

Edit: So, what I did is, this:

function drawloop() {
  var start = Date.now() // note this
    if (focused & Date.now() - start < 4000) {

        requestAnimationFrame(drawloop);
    }

Yet this is still not working. What am I doing wrong here?

halfer
  • 19,824
  • 17
  • 99
  • 186
Siyah
  • 2,852
  • 5
  • 37
  • 63
  • Well, as I said: I can find that, but I can't find how to combine that with a timer! That's my question. – Siyah Dec 26 '16 at 12:08
  • `cancelAnimationFrame` + `setTimeout`. – dfsq Dec 26 '16 at 12:09
  • I am not sure that it really enters the `if(focused & Date.now() - start < 4000)` condition. Try checking by puting a `debugger`there – Ishank Dec 26 '16 at 16:46
  • inserted the code snippet – Ishank Dec 26 '16 at 17:00
  • Nope, not entering there. Is there an efficient manner to do so, instead of having to change the entire code? I don't why it's not getting the and operator. – Siyah Dec 26 '16 at 23:38

2 Answers2

3

var myReq, start;
function step(timestamp){
if(!start)start = timestamp;


document.getElementById("aDiv").style.width = (parseInt(document.getElementById("aDiv").style.width,10)-.001)+"px";


if(
(timestamp - start) < 4000
){
myReq = requestAnimationFrame(step);
}
}

window.requestAnimationFrame(step);
<div id="aDiv" style="width:400px;height:100px;background-color:blue;">Test</div>
<button onclick="window.cancelAnimationFrame(myReq);">Stop Animation</button>
<button onclick="window.requestAnimationFrame(step);start=''">Start Animation</button>

var myReq, start;
function step(timestamp){
if(!start)start = timestamp;


document.getElementById("aDiv").style.width = (parseInt(document.getElementById("aDiv").style.width,10)-05)+"px";


if(parseInt(document.getElementById("aDiv").style.width,10)< 50 || 
(timestamp - start) > 4000
){
window.cancelAnimationFrame(myReq);
}else
myReq = requestAnimationFrame(step);
}

window.requestAnimationFrame(step);
<div id="aDiv" style="width:200px;height:100px;background-color:blue;">Test</div>
Ishank
  • 2,860
  • 32
  • 43
  • Thanks, but what is meant with step? Is that a function name? – Siyah Dec 26 '16 at 12:18
  • Thats a call back function that has the timestamp argument. check this- https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame – Ishank Dec 26 '16 at 12:38
  • This answer is theoretically superior to the other one since it’s using the timestamp argument, so it’s using the API properly. However, this answer could _really_ benefit from some explanation. Code-only answers are discouraged. – Sebastian Simon Feb 26 '22 at 10:40
3

The simplest way is use a variable to store when the rendering process start.

If it has been over 4 seconds, do not run the next frame

You probably don't need other function to finish your purpose. 

function animateFor4Second() {
    var start = Date.now() // note this
    function loop() {
        console.log('rendering')
        if (Date.now() - start < 4000) { //note this also
            requestAnimationFrame(loop);
        }
    }
    loop(); // fire the initial loop
}

animateFor4Second()
Jerry
  • 938
  • 7
  • 13