Start and stop animations (requestAnimationFrame), one after another

[lehni]

As reported by Eskel on the mailing list:

I'm trying to run something like an onFrame animation (requestAnimationFrame cycle) and once it's done, stop it. Then run another and also stop it once it's finished.

The problem is, once I detach the first event, the second doesn't quite work right anymore.

I've made a little demo of this, take a look at the console while running it. Whichever function you choose to run first, it ends up the same, the second time the cycle doesn't start.

http://jsfiddle.net/kJAEL/

Any ideas why this might be happening and how to fix it? Is it a bug in the library?

I've came up with this approach after reading this thread: https://groups.google.com/forum/#!searchin/paperjs/detach/paperjs/URQNpYl-KfI/r7MN1C5AO4AJ

Thanks a lot for any suggestion.

[lehni]

I've changed your example slightly to better see what's going on,

With the code below you'll see that both events use the same counter. Once you have started the first animation, event.count returns the total amount of frames that were already played.

If you want to keep separate counter, I recommend storing the current frame in the moment you start an animation and calculate the difference yourself.

This is intended behavior, not a bug. Closing.

$(window).load(function(){
/* FIRST ANIMATION */

function startFirstAnimation()
{
    paper.view.attach('frame', firstAnimation);
    console.log("first animation start");
}

function firstAnimation(event)
{
    if(event.count <= 50)
    {
        firstLabel.content = 'First animation count: ' + event.count;
    }
    else
    {
        paper.view.detach('frame', firstAnimation);
        firstLabel.content = "first animation finished";
    }
}

/* SECOND ANIMATION */

function startSecondAnimation()
{
    paper.view.attach('frame', secondAnimation);
    console.log("second animation start");
}

function secondAnimation(event)
{
    if(event.count <= 50)
    {
        secondLabel.content = 'Second animation count: ' + event.count;
    }
    else
    {
        paper.view.detach('frame', secondAnimation);
        secondLabel.content = "second animation finished";
    }
}

/* SCENE SETUP */

var canvas = document.getElementById('canvas');
// Create an empty project and a view for the canvas:
paper.setup(canvas);

var firstLabel = new paper.PointText({
    content: 'First animation count: ',
    point: new paper.Point(20, 30),
    fillColor: 'black'
});
var secondLabel = new paper.PointText({
    content: 'Second animation count: ',
    point: new paper.Point(20, 60),
    fillColor: 'black'
});

paper.view.draw();

/* EVENT HANDLERS */

$(document).on("click", "#startFirst", function(){
    startFirstAnimation();
});
$(document).on("click", "#startSecond", function(){
    startSecondAnimation();
});
});