CODEWITHSUNDEEP
javascriptanimationsetintervalrequestanimationframe
akinuri
akinuri

Reputation: 12037

From interval to requestAnimationFrame

Revisiting one of my old experiments. I'm using an interval to rotate an element. Now I want to change the interval to rAF. I tried to rewrite the Rotation.start method a few times, but I couldn't succeed. Since I'm new to this requestAnimationFrame thing, I don't know what else to try.

Relevant JS code:

function Rotation(mass) {
    this.mass       = mass;
    this.angle      = 0;
    this.velocity   = 1;
    this.fps        = 1000/25; // for interval
    this.handler    = null;
    this.rotate     = function () {
                        // when called from rAF "this" refers to window, method fails
                        this.angle  = (this.angle + this.velocity) % 360;
                        var transform   = "rotate(" + this.angle + "deg)";
                        this.mass.elm.style.webkitTransform = transform;
                    };
    this.start      = function () {
                        var rotation = this; // this = Rotation
                        rotation.handler = setInterval(function () {
                            // inside the interval "this" refers to window
                            // that's why we set rotation to "this" at the beginning
                            // so we can access the Rotation obj
                            rotation.rotate();
                        }, rotation.fps);

                        /* requestAnimationFrame(rotation.rotate); */
                    };
}

Fiddle (full code)

Upvotes: 0

Views: 308

Answers (1)

Aweary
Aweary

Reputation: 2312

You can bind the value of this using the bind() method

function Rotation(mass) {
    this.mass       = mass;
    this.angle      = 0;
    this.velocity   = 1;
    this.handler    = null;
    this.rotate     = function () {

                        this.angle  = (this.angle + this.velocity) % 360;
                        var transform   = "rotate(" + this.angle + "deg)"
                        this.mass.elm.style.webkitTransform = transform;

                        //call bind on this.rotate so we can properly associate this
                        window.requestAnimationFrame(this.rotate.bind(this));
                    };
    this.start      = function () {
                        //then just start the animation by using this.rotate()
                        this.rotate();
                    };
}

Working JSFiddle: http://jsfiddle.net/gvr16mcL/

Upvotes: 1

Related Questions