MultiTimer for animation

General JUCE discussion
1

Hello there, 

I have an animation on a filmstrip that I have to overlay to my background image every X seconds. 
I have started a timer on the constructor and on the timerCallback I call the repaint function every 6 seconds. That works fine. 
Then, on the paint method I have a for loop so it draws one frame at a time, but it happens too quick that I can't see the animation. 
I want to implement a wait statement in between the for loop of some milliseconds, but I can't figure out how to make it work. 

This is what I have: 

MainContentComponent::MainContentComponent()
{
    startTime(0, 6000);
}

void MainContentComponent::paint (Graphics& g)
{
    g.drawImage(myBackground, 0, 0, 700, 250, 0, 0, 700, 250);

    for (i = 0; i < 25; i++)
    {
        g.drawImage(bgAnimation, 0, 0, 700, 250, 0, 250 * i, 700, 250);
        // Wait here.
    }
}


void MainContentComponent::timerCallback(int timerID)
{
    repaint();
}

I can't figure out how to make it work so it waits a couple of ms on each for cycle since I'm calling the whole paint method and every time the loop is triggered again. Is there a simpler way to just time wait(int ms)? 

2

No no no no no! You're totally misunderstanding how painting works!

Your paint method must draw the current state of your component at that moment in time, and must return immediately. Nothing that you draw in that method will actually hit the screen until after the method has actually returned, so it makes no sense to try looping or waiting in there.

If you're trying to animate something that moves, maybe try the ComponentAnimator class instead. Or look at some of the demo code that animates things, maybe you'll get the idea from that.

3

You could just use a member variable to hold your index, position, or whatever you need to change. Then you could do the calculations (like incrementing an index) that change that variable (probably what was in your for loop) in the timerCallback(), or as I would do, create a function (like updateFrame() or something) to encapsulate that functionality and call that in timerCallback(). I'm sure there's many ways to do something like this, but that's how I do it. You could even do the calculations in the paint() function.

If you're incrementing a variable and you need to "reset" it to 0 at a certain value, you could just use an if statement, do whatever comparison you need, and assign 0 to that variable inside of it.