├── .gitignore
├── Makefile
├── component.json
├── package.json
├── History.md
├── index.js
├── Readme.md
└── example.html


/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | build
3 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | 
 2 | build: components index.js
 3 | 	@component build --dev
 4 | 
 5 | components:
 6 | 	@component install --dev
 7 | 
 8 | clean:
 9 | 	rm -fr build components template.js
10 | 
11 | .PHONY: clean
12 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "raf",
 3 |   "repo": "component/raf",
 4 |   "description": "request animation frame",
 5 |   "version": "1.2.0",
 6 |   "keywords": [
 7 |     "animate",
 8 |     "requestAnimationFrame",
 9 |     "performance"
10 |   ],
11 |   "dependencies": {},
12 |   "development": {},
13 |   "scripts": [
14 |     "index.js"
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "component-raf",
 3 |   "description": "request animation frame",
 4 |   "version": "1.2.0",
 5 |   "keywords": [
 6 |     "animate",
 7 |     "requestAnimationFrame",
 8 |     "performance"
 9 |   ],
10 |   "dependencies": {},
11 |   "component": {
12 |     "scripts": {
13 |       "raf/index.js": "index.js"
14 |     }
15 |   },
16 |   "main": "index.js",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "https://github.com/component/raf.git"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 1.2.0 / 2014-09-14
 3 | ==================
 4 | 
 5 |   * remove never implemented -o and -ms prefixes (@darsain)
 6 |   
 7 | 1.1.3 / 2014-02-11
 8 | ==================
 9 | 
10 |   * package: rename to "component-raf"
11 |   * package: add "main" field
12 | 
13 | 1.1.2 / 2013-07-12
14 | ==================
15 | 
16 |   * fix .cancel() with fallback #4 @ilsken
17 | 
18 | 1.1.1 / 2013-07-12
19 | ==================
20 | 
21 |   * fix .cancel(), bitches when window is not the receiver...
22 | 
23 | 1.1.0 / 2013-07-12
24 | ==================
25 | 
26 |   * add .cancel(id)
27 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Expose `requestAnimationFrame()`.
 3 |  */
 4 | 
 5 | exports = module.exports = window.requestAnimationFrame
 6 |   || window.webkitRequestAnimationFrame
 7 |   || window.mozRequestAnimationFrame
 8 |   || fallback;
 9 | 
10 | /**
11 |  * Fallback implementation.
12 |  */
13 | 
14 | var prev = new Date().getTime();
15 | function fallback(fn) {
16 |   var curr = new Date().getTime();
17 |   var ms = Math.max(0, 16 - (curr - prev));
18 |   var req = setTimeout(fn, ms);
19 |   prev = curr;
20 |   return req;
21 | }
22 | 
23 | /**
24 |  * Cancel.
25 |  */
26 | 
27 | var cancel = window.cancelAnimationFrame
28 |   || window.webkitCancelAnimationFrame
29 |   || window.mozCancelAnimationFrame
30 |   || window.clearTimeout;
31 | 
32 | exports.cancel = function(id){
33 |   cancel.call(window, id);
34 | };
35 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # raf
 3 | 
 4 |   request animation frame
 5 | 
 6 | ## Installation
 7 | 
 8 |     $ component install component/raf
 9 | 
10 | ## Example
11 | 
12 |   Request the animation frame with `raf(fn)`, cancel with `raf.cancel(id)`.
13 | 
14 | ```js
15 | var x = 0;
16 | var y = 50;
17 | var canvas = document.querySelector('canvas');
18 | var ctx = canvas.getContext('2d');
19 | var raf = require('raf');
20 | 
21 | function animate() {
22 |   raf(animate);
23 |   draw();
24 | }
25 | 
26 | var prev = Date.now();
27 | function draw() {
28 |   var curr = Date.now();
29 |   var diff = curr - prev;
30 |   var p = diff / 16;
31 |   ctx.clearRect(0, 0, 900, 300);
32 |   ctx.beginPath();
33 |   ctx.globalAlpha = .5;
34 |   ctx.arc(x, y, 10, 0, Math.PI * 2, false);
35 |   ctx.fill();
36 |   x += 2;
37 |   y += Math.sin(x/20) * 5;
38 |   prev = curr;
39 | }
40 | 
41 | animate();
42 | ```
43 | 
44 | ## License
45 | 
46 |   MIT
47 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <style>
 3 |   body {
 4 |     padding: 50px;
 5 |   }
 6 |   canvas {
 7 |     border: 1px solid #eee;
 8 |   }
 9 | </style>
10 | 
11 | <script src="build/build.js"></script>
12 | 
13 | <canvas width=900 height=300></canvas>
14 | 
15 | <script>
16 |   var x = 0;
17 |   var y = 50;
18 |   var canvas = document.querySelector('canvas');
19 |   var ctx = canvas.getContext('2d');
20 |   var raf = require('raf');
21 | 
22 |   function animate() {
23 |     raf(animate);
24 |     draw();
25 |   }
26 | 
27 |   var prev = Date.now();
28 |   function draw() {
29 |     var curr = Date.now();
30 |     var diff = curr - prev;
31 |     var p = diff / 16;
32 |     ctx.clearRect(0, 0, 900, 300);
33 |     ctx.beginPath();
34 |     ctx.globalAlpha = .5;
35 |     ctx.arc(x, y, 10, 0, Math.PI * 2, false);
36 |     ctx.fill();
37 |     x += 2;
38 |     y += Math.sin(x/20) * 5;
39 |     prev = curr;
40 |   }
41 | 
42 |   animate();
43 | </script>


--------------------------------------------------------------------------------