Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error requestAnimationFrame in ie9 any alternate solution

I am creating Canvas (I am new to this Canvas) object cylinder this is working fine Chrome & Firefox but when i open the same file in ie9.

I am getting error as 'requestAnimationFrame' is undefined

When i google the error it says requestAniationFrame won't work on ie9.

Can any body help me with this do we have any alternate way to solve this.

and here is my code

var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var degreeAngle = 0;
        requestAnimationFrame(animate);

        function drawRotatedCylinder(x, y, w, h, degreeAngle) {
            context.save();
            context.translate(x + w / 10, y + h / 10);
            context.rotate(degreeAngle * Math.PI / 180);
            drawCylinder(-w / 10, -h / 10, w, h);
            context.restore();
        }   
function animate() {
        //requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
}

Kindly help me for the above solution

Thanks Regards Maha

like image 316
user3820621 Avatar asked Jul 10 '14 12:07

user3820621


People also ask

How do I get rid of requestAnimationFrame?

cancelAnimationFrame() The window. cancelAnimationFrame() method cancels an animation frame request previously scheduled through a call to window.

How many times does requestAnimationFrame run?

requestAnimationFrame() is 1 shot. You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint.

Can you have multiple requestAnimationFrame?

Any requests registered before the execution of the next repaint gets added to the frame; there's no limit on how many requests can be included in each frame. The handle returned by requestAnimationFrame is a request ID, unique to that particular request, not a frame ID unique to the frame.

Is requestAnimationFrame blocked?

Animations with requestAnimationFrame are non-blocking, which means if you make subsequent calls to requestAnimationFrame, the resulting animations will all occur at same time. The goal is 60 frame per second(fps) to appear smooth animation.


1 Answers

Erik Möller developed a robust polyfill that Paul Irish now hosts in his blog post about requestAnimationFrame. If you use this code, you can use requestAnimationFrame in pretty much any browser transparently:

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
like image 187
user1449556 Avatar answered Oct 29 '22 23:10

user1449556