consecutives calls to requestAnimationFrame

Question

I played a bit with the javascript function called requestAnimationFrame(), and made this stroke by stroke kanji painter. It works well... the code is clean enough, considered my newbie-ness. I followed a nice tutorial here and landed on a structure like this :

function here_a_closure() {
    var some_state = 0;
    var last_frame = false;

    function machinery() {
        // do mysterious stuff
        return last_frame;
    }

    function frame_display() {
        handle = window.requestAnimationFrame(frame_display);
        if (machinery()) {
            window.cancelAnimationFrame(handle);
        }
        // do the display
    }
    frame_display();
}

However, I would like to extend this, and paint some more kanjis next to the first one. Should I wait for the end of the first animation to launch the next one ? I would prefer (more modularity and re-use), but how ? Or should I make the machinery more complex to animate more than one character in the same animation ?

Answer 1

Use a single requestAnimationFrame to drive all your animations.

If you have multiple animations that run with different timings then you can make use of the elapsed time that's automatically fed into each call.

function animate(time){
    requestAnimationFrame(animate);
}

This way you have the flexibility of running each of your animations either consecutively or serially without increasing the complexity of your 'machinery'.

if(time>doSomethingOnAnimation1whenThisTimeElapses){ ... }
if(time>doSomethingOnAnimation2whenThisTimeElapses){ ... }
if(time>doSomethingOnAnimation3whenThisTimeElapses){ ... }

Here's a more detailed code about using requestAnimationFrame's timer on a previous post:

How to control animation speed (requestAnimationFrame)?