How can I pass argument with requestAnimationFrame?

javascript requestanimationframe
Torfiks picture Torfiks · Nov 10, 2013 · Viewed 22.4k times · Source

In the main program I randomly choose an object which I'd like to animate, so I call the function with the object as the argument. The first loop is okay, x is finely set, but in the next turn it becomes undefined.

Something like this:

var anim = {
        mainFunc: function(x) {
            anim.update(x);
            anim.redraw(x);
            window.requestAnimationFrame(anim.mainFunc);
        },

        update: function(x) {

        },

        redraw: function(x) {

        }
};

var n=Math.floor(Math.random() * (ArrayOfAnimObject.length));
anim.mainFunc(ArrayOfAnimObject[n]);

Answer

kalley picture kalley · Nov 10, 2013

You either need to create a reference or wrap the function call in another function like so:

mainFunc: function(x) {
    anim.update(x);
    anim.redraw(x);
    window.requestAnimationFrame(function() {
        anim.mainFunc(x);
    });
}

Related questions

Controlling fps with requestAnimationFrame?

It seems like requestAnimationFrame is the de facto way to animate things now. It worked pretty well for me for the most part, but right now I'm trying to do some canvas animations and I was wondering: Is there any …

Read More
$(window).scroll in vanilla JavaScript

What's the equivalent of the following in plain JS? $(window).scroll(function() { }); I'm also looking to animate scroll, e.g.: $('html, body').animate({scrollTop:1750}, 'slow'); Should I be using requestAnimationFrame? http://paulirish.com/2011/requestanimationframe-for-smart-animating/ Are there any examples that trigger …

Read More
How to use requestAnimationFrame?

I'm new to animation, but I have recently created an animation using setTimeout. The FPS was too low, so I found a solution to use requestAnimationFrame, described in this link. So far, my code is: //shim layer with setTimeout fallback …

Read More