-
-
Save jeongsd/64f68e9779f231ec32b04d24f080d24b to your computer and use it in GitHub Desktop.
Limit the frame-rate being targeted with requestAnimationFrame
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| limitLoop.js - limit the frame-rate when using requestAnimation frame | |
| Why use it? | |
| ---------------- | |
| A consistent frame-rate can be better than a janky experience only | |
| occasionally hitting 60fps. Use this trick to target a specific frame- | |
| rate (e.g 30fps, 48fps). | |
| Solution | |
| ---------------- | |
| When we draw, deduct the last frame's execution time from the current | |
| time to see if the time elapsed since the last frame is more than the | |
| fps-based interval or not. Should the condition evaluate to true, set | |
| the time for the current frame which will be the last frame execution | |
| time in the next drawing call. | |
| Prior art / inspiration | |
| ------------------------ | |
| http://cssdeck.com/labs/embed/gvxnxdrh/0/output | |
| http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/ | |
| and the comment by Yannick Albert | |
| */ | |
| // rAF | |
| window.requestAnimationFrame = function() { | |
| return window.requestAnimationFrame || | |
| window.webkitRequestAnimationFrame || | |
| window.mozRequestAnimationFrame || | |
| window.msRequestAnimationFrame || | |
| window.oRequestAnimationFrame || | |
| function(f) { | |
| window.setTimeout(f,1e3/60); | |
| } | |
| }(); | |
| var limitLoop = function (fn, fps) { | |
| var defaultFps = 60; | |
| var then = new Date().getTime(); | |
| var oldtime = 0; | |
| fps = fps || defaultFps; | |
| return (function loop(time) { | |
| requestAnimationFrame(loop); | |
| var interval = 1000 / (this.fps || fps); | |
| var now = new Date().getTime(); | |
| var delta = now - then; | |
| if (delta > interval) { | |
| // update time | |
| then = now - (delta % interval); | |
| // calculate fps | |
| var frames = 1000 / (time - oldtime) | |
| oldtime = time; | |
| // call the fn, pass current fps to it | |
| fn(frames); | |
| } | |
| }(0)); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Feel free to play with this over at http://jsfiddle.net/addyo/Y8P6S/. | |
| You can either use the Chrome DevTools Timeline or FPS counter to confirm | |
| if you're hitting a consistent fps. | |
| */ | |
| // define a reference to the canvas's 2D context | |
| var context = television.getContext('2d'); | |
| // create a buffer to hold the pixel data | |
| var pixelBuffer = context.createImageData(television.width, television.height); | |
| function drawStatic() { | |
| var color, | |
| data = pixelBuffer.data, | |
| index = 0, | |
| len = data.length; | |
| while (index < len) { | |
| // choose a random grayscale color | |
| color = Math.floor(Math.random() * 0xff); | |
| // red, green and blue are set to the same color | |
| // to result in a random gray pixel | |
| data[index++] = data[index++] = data[index++] = color; | |
| // the fourth multiple is always completely opaque | |
| data[index++] = 0xff; // alpha | |
| } | |
| // flush our pixel buffer to the canvas | |
| context.putImageData(pixelBuffer, 0, 0); | |
| }; | |
| // rAF | |
| window.requestAnimationFrame = function() { | |
| return window.requestAnimationFrame || | |
| window.webkitRequestAnimationFrame || | |
| window.mozRequestAnimationFrame || | |
| window.msRequestAnimationFrame || | |
| window.oRequestAnimationFrame || | |
| function(f) { | |
| window.setTimeout(f,1e3/60); | |
| } | |
| }(); | |
| var limitLoop = function (fn, fps) { | |
| var defaultFps = 60; | |
| var then = new Date().getTime(); | |
| var oldtime = 0; | |
| fps = fps || defaultFps; | |
| return (function loop(time) { | |
| requestAnimationFrame(loop); | |
| var interval = 1000 / (this.fps || fps); | |
| var now = new Date().getTime(); | |
| var delta = now - then; | |
| if (delta > interval) { | |
| // update time | |
| then = now - (delta % interval); | |
| // calculate fps | |
| var frames = 1000 / (time - oldtime) | |
| oldtime = time; | |
| // call the fn, pass current fps to it | |
| fn(frames); | |
| } | |
| }(0)); | |
| }; | |
| limitLoop(drawStatic, 30); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment