Permalink
Browse files

first version

  • Loading branch information...
1 parent c917d8e commit 921776873ffd302ff8cee1c4b6ae5939c2ade820 @CatChen committed Dec 29, 2011
Showing with 101 additions and 0 deletions.
  1. +22 −0 README.md
  2. +79 −0 requestAnimationFrame.js
View
22 README.md
@@ -0,0 +1,22 @@
+This is a `requestAnimationFrame` implementation in JavaScript.
+
+## What is requestAnimationFrame?
+
+If you don't know what `requestAnimationFrame` is, you can see the [latest draft of the spec](http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html). It's a browser API for script-based animation. It allows the browser to control the frame rate in order to make the animation smooth while saving computation power so you don't have to worry about that.
+
+## How to use it?
+
+ var animationHandle;
+
+ function startAnimation() {
+ drawAnimationFrame();
+ };
+
+ function stopAnimation() {
+ window.cancelRequestAnimationFrame(animationHandle);
+ };
+
+ function drawAnimationFrame() {
+ /* draw your animation frame here */
+ animationHandle = window.requestAnimationFrame(drawAnimationFrame);
+ };
View
79 requestAnimationFrame.js
@@ -0,0 +1,79 @@
+(function(window, undefined) {
+ /* Opera doesn't support requestAnimationFrame so far so the 'o' prefix is just a guessing. */
+ var prefixes = ['webkit', 'moz', 'ms', 'o'];
+ for (var i = 0, l = prefixes.length; !('requestAnimationFrame' in window ) && i < l; i++) {
+ if ((prefixes[i] + 'RequestAnimationFrame') in window) {
+ window.requestAnimationFrame = window[prefixes[i] + 'RequestAnimationFrame'];
+ window.cancelRequestAnimationFrame = window[prefixes[i] + 'CancelRequestAnimationFrame'];
+ }
+ }
+
+ if (!('requestAnimationFrame' in window )) {
+ var nextHandle = 1;
+ var frameQueue = [];
+ var timerEnabled = false;
+
+ var enqueue = function(callback) {
+ var handle = nextHandle++;
+ var bundle = {
+ handle: handle,
+ callback: callback
+ };
+ frameQueue.push(bundle);
+ return handle;
+ };
+
+ var dequeue = function() {
+ var bundle = frameQueue.shift();
+ if (bundle) {
+ return bundle.callback;
+ } else {
+ return;
+ }
+ };
+
+ var deleteFromQueue = function(handle) {
+ for (var i = 0, l = frameQueue.length; i < l; i++) {
+ if (frameQueue[i].handle === handle) {
+ frameQueue.splice(i, 1);
+ return;
+ }
+ }
+ };
+
+ var timer = function() {
+ while (frameQueue.length > 0) {
+ var callback = dequeue();
+ if (callback) {
+ try {
+ callback(+new Date());
+ } catch (error) {
+ /* do nothing about error */
+ }
+ }
+ };
+ disableTimer();
+ };
+
+ var enableTimer = function() {
+ if (!timerEnabled && frameQueue.length > 0) {
+ timerEnabled = true;
+ setTimeout(timer, 1000 / 60);
+ }
+ };
+
+ var disableTimer = function() {
+ timerEnabled = false;
+ };
+
+ window.requestAnimationFrame = function(callback) {
+ var handle = enqueue(callback);
+ enableTimer();
+ return handle;
+ };
+
+ window.cancelRequestAnimationFrame = function(handle) {
+ deleteFromQueue(handle);
+ };
+ }
+})(this);

0 comments on commit 9217768

Please sign in to comment.