Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 434248007ab0d0987ff8e3a1a34dbb550fdbdba9 @tj tj committed Oct 7, 2012
Showing with 88 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +11 −0 Makefile
  3. +5 −0 Readme.md
  4. +12 −0 component.json
  5. +43 −0 example.html
  6. +15 −0 index.js
@@ -0,0 +1,2 @@
+components
+build
@@ -0,0 +1,11 @@
+
+build: components index.js
+ @component build --dev
+
+components:
+ @component install --dev
+
+clean:
+ rm -fr build components template.js
+
+.PHONY: clean
@@ -0,0 +1,5 @@
+
+# raf
+
+ request animation frame
+
@@ -0,0 +1,12 @@
+{
+ "name": "raf",
+ "repo": "component/raf",
+ "description": "request animation frame",
+ "version": "0.0.1",
+ "keywords": [],
+ "dependencies": {},
+ "development": {},
+ "scripts": [
+ "index.js"
+ ]
+}
@@ -0,0 +1,43 @@
+
+<style>
+ body {
+ padding: 50px;
+ }
+ canvas {
+ border: 1px solid #eee;
+ }
+</style>
+
+<script src="build/build.js"></script>
+
+<canvas width=900 height=300></canvas>
+
+<script>
+ var x = 0;
+ var y = 50;
+ var canvas = document.querySelector('canvas');
+ var ctx = canvas.getContext('2d');
+ var raf = require('raf');
+
+ function animate() {
+ raf(animate);
+ draw();
+ }
+
+ var prev = Date.now();
+ function draw() {
+ var curr = Date.now();
+ var diff = curr - prev;
+ var p = diff / 16;
+ ctx.clearRect(0, 0, 900, 300);
+ ctx.beginPath();
+ ctx.globalAlpha = .5;
+ ctx.arc(x, y, 10, 0, Math.PI * 2, false);
+ ctx.fill();
+ x += 2;
+ y += Math.sin(x/20) * 5;
+ prev = curr;
+ }
+
+ animate();
+</script>
@@ -0,0 +1,15 @@
+
+module.exports = window.requestAnimationFrame
+ || window.webkitRequestAnimationFrame
+ || window.mozRequestAnimationFrame
+ || window.oRequestAnimationFrame
+ || window.msRequestAnimationFrame
+ || fallback;
+
+var prev = new Date().getTime();
+function fallback(fn) {
+ var curr = new Date().getTime();
+ var ms = Math.max(0, 16 - (curr - prev));
+ setTimeout(fn, ms);
+ prev = curr;
+}

0 comments on commit 4342480

Please sign in to comment.