implement pinch to zoom

node_modules/ease-component/.npmignore

@@ -0,0 +1,2 @@
+components
+build

node_modules/ease-component/Makefile

@@ -0,0 +1,14 @@
+
+build: components index.js
+	@component build --dev
+
+components:
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+list:
+	@cat index.js | grep exports | sed 's/exports.//' | cut -f 1 -d ' '
+
+.PHONY: clean list

node_modules/ease-component/Readme.md

@@ -0,0 +1,106 @@
+
+# ease
+
+  Easing functions (for canvas etc)
+
+  - linear
+  - inQuad
+  - outQuad
+  - inOutQuad
+  - inCube
+  - outCube
+  - inOutCube
+  - inQuart
+  - outQuart
+  - inOutQuart
+  - inQuint
+  - outQuint
+  - inOutQuint
+  - inSine
+  - outSine
+  - inOutSine
+  - inExpo
+  - outExpo
+  - inOutExpo
+  - inCirc
+  - outCirc
+  - inOutCirc
+  - inBack
+  - outBack
+  - inOutBack
+  - inBounce
+  - outBounce
+  - inOutBounce
+
+## Aliases
+
+  - in-quad
+  - out-quad
+  - in-out-quad
+  - in-cube
+  - out-cube
+  - in-out-cube
+  - in-quart
+  - out-quart
+  - in-out-quart
+  - in-quint
+  - out-quint
+  - in-out-quint
+  - in-sine
+  - out-sine
+  - in-out-sine
+  - in-expo
+  - out-expo
+  - in-out-expo
+  - in-circ
+  - out-circ
+  - in-out-circ
+  - in-back
+  - out-back
+  - in-out-back
+  - in-bounce
+  - out-bounce
+  - in-out-bounce
+
+## Example
+
+```js
+var ease = require('ease');
+var requestAnimationFrame = require('raf');
+var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+
+var stop = false;
+function animate() {
+  if (stop) return;
+  requestAnimationFrame(animate);
+  draw();
+}
+
+var startx = 20;
+var x = startx;
+var destx = 300;
+var y = 400 / 2;
+var duration = 1000;
+var start = Date.now();
+var end = start + duration;
+
+function draw() {
+  var now = Date.now();
+  if (now - start >= duration) stop = true;
+  var p = (now - start) / duration;
+  val = ease.inOutBounce(p);
+  x = startx + (destx - startx) * val;
+  canvas.width = canvas.width;
+  ctx.fillStyle = 'red';
+  ctx.arc(x, y, 10, 0, Math.PI * 2, false);
+  ctx.fill();
+}
+
+animate();
+
+```
+
+# License
+
+  MIT

node_modules/ease-component/component.json

@@ -0,0 +1,15 @@
+{
+  "name": "ease",
+  "repo": "component/ease",
+  "description": "Easing functions (for canvas etc)",
+  "version": "1.0.0",
+  "keywords": ["ease", "easing", "tween"],
+  "dependencies": {},
+  "development": {
+    "component/raf": "*"
+  },
+  "scripts": [
+    "index.js"
+  ],
+  "license": "MIT"
+}

node_modules/ease-component/example.html

@@ -0,0 +1,46 @@
+
+<style>
+  canvas {
+    border: 1px solid #eee;
+  }
+</style>
+
+<script src="build/build.js"></script>
+
+<canvas width=500 height=400></canvas>
+
+<script>
+  var ease = require('ease');
+  var requestAnimationFrame = require('component-raf');
+  var canvas = document.querySelector('canvas');
+  var ctx = canvas.getContext('2d');
+
+  var stop = false;
+  function animate() {
+    if (stop) return;
+    requestAnimationFrame(animate);
+    draw();
+  }
+
+  var startx = 20;
+  var x = startx;
+  var destx = 300;
+  var y = 400 / 2;
+  var duration = 1000;
+  var start = Date.now();
+  var end = start + duration;
+
+  function draw() {
+    var now = Date.now();
+    if (now - start >= duration) stop = true;
+    var p = (now - start) / duration;
+    val = ease.inOutBounce(p);
+    x = startx + (destx - startx) * val;
+    canvas.width = canvas.width;
+    ctx.fillStyle = 'red';
+    ctx.arc(x, y, 10, 0, Math.PI * 2, false);
+    ctx.fill();
+  }
+
+  animate();
+</script>

node_modules/ease-component/index.js

@@ -0,0 +1,170 @@
+
+// easing functions from "Tween.js"
+
+exports.linear = function(n){
+  return n;
+};
+
+exports.inQuad = function(n){
+  return n * n;
+};
+
+exports.outQuad = function(n){
+  return n * (2 - n);
+};
+
+exports.inOutQuad = function(n){
+  n *= 2;
+  if (n < 1) return 0.5 * n * n;
+  return - 0.5 * (--n * (n - 2) - 1);
+};
+
+exports.inCube = function(n){
+  return n * n * n;
+};
+
+exports.outCube = function(n){
+  return --n * n * n + 1;
+};
+
+exports.inOutCube = function(n){
+  n *= 2;
+  if (n < 1) return 0.5 * n * n * n;
+  return 0.5 * ((n -= 2 ) * n * n + 2);
+};
+
+exports.inQuart = function(n){
+  return n * n * n * n;
+};
+
+exports.outQuart = function(n){
+  return 1 - (--n * n * n * n);
+};
+
+exports.inOutQuart = function(n){
+  n *= 2;
+  if (n < 1) return 0.5 * n * n * n * n;
+  return -0.5 * ((n -= 2) * n * n * n - 2);
+};
+
+exports.inQuint = function(n){
+  return n * n * n * n * n;
+}
+
+exports.outQuint = function(n){
+  return --n * n * n * n * n + 1;
+}
+
+exports.inOutQuint = function(n){
+  n *= 2;
+  if (n < 1) return 0.5 * n * n * n * n * n;
+  return 0.5 * ((n -= 2) * n * n * n * n + 2);
+};
+
+exports.inSine = function(n){
+  return 1 - Math.cos(n * Math.PI / 2 );
+};
+
+exports.outSine = function(n){
+  return Math.sin(n * Math.PI / 2);
+};
+
+exports.inOutSine = function(n){
+  return .5 * (1 - Math.cos(Math.PI * n));
+};
+
+exports.inExpo = function(n){
+  return 0 == n ? 0 : Math.pow(1024, n - 1);
+};
+
+exports.outExpo = function(n){
+  return 1 == n ? n : 1 - Math.pow(2, -10 * n);
+};
+
+exports.inOutExpo = function(n){
+  if (0 == n) return 0;
+  if (1 == n) return 1;
+  if ((n *= 2) < 1) return .5 * Math.pow(1024, n - 1);
+  return .5 * (-Math.pow(2, -10 * (n - 1)) + 2);
+};
+
+exports.inCirc = function(n){
+  return 1 - Math.sqrt(1 - n * n);
+};
+
+exports.outCirc = function(n){
+  return Math.sqrt(1 - (--n * n));
+};
+
+exports.inOutCirc = function(n){
+  n *= 2
+  if (n < 1) return -0.5 * (Math.sqrt(1 - n * n) - 1);
+  return 0.5 * (Math.sqrt(1 - (n -= 2) * n) + 1);
+};
+
+exports.inBack = function(n){
+  var s = 1.70158;
+  return n * n * (( s + 1 ) * n - s);
+};
+
+exports.outBack = function(n){
+  var s = 1.70158;
+  return --n * n * ((s + 1) * n + s) + 1;
+};
+
+exports.inOutBack = function(n){
+  var s = 1.70158 * 1.525;
+  if ( ( n *= 2 ) < 1 ) return 0.5 * ( n * n * ( ( s + 1 ) * n - s ) );
+  return 0.5 * ( ( n -= 2 ) * n * ( ( s + 1 ) * n + s ) + 2 );
+};
+
+exports.inBounce = function(n){
+  return 1 - exports.outBounce(1 - n);
+};
+
+exports.outBounce = function(n){
+  if ( n < ( 1 / 2.75 ) ) {
+    return 7.5625 * n * n;
+  } else if ( n < ( 2 / 2.75 ) ) {
+    return 7.5625 * ( n -= ( 1.5 / 2.75 ) ) * n + 0.75;
+  } else if ( n < ( 2.5 / 2.75 ) ) {
+    return 7.5625 * ( n -= ( 2.25 / 2.75 ) ) * n + 0.9375;
+  } else {
+    return 7.5625 * ( n -= ( 2.625 / 2.75 ) ) * n + 0.984375;
+  }
+};
+
+exports.inOutBounce = function(n){
+  if (n < .5) return exports.inBounce(n * 2) * .5;
+  return exports.outBounce(n * 2 - 1) * .5 + .5;
+};
+
+// aliases
+
+exports['in-quad'] = exports.inQuad;
+exports['out-quad'] = exports.outQuad;
+exports['in-out-quad'] = exports.inOutQuad;
+exports['in-cube'] = exports.inCube;
+exports['out-cube'] = exports.outCube;
+exports['in-out-cube'] = exports.inOutCube;
+exports['in-quart'] = exports.inQuart;
+exports['out-quart'] = exports.outQuart;
+exports['in-out-quart'] = exports.inOutQuart;
+exports['in-quint'] = exports.inQuint;
+exports['out-quint'] = exports.outQuint;
+exports['in-out-quint'] = exports.inOutQuint;
+exports['in-sine'] = exports.inSine;
+exports['out-sine'] = exports.outSine;
+exports['in-out-sine'] = exports.inOutSine;
+exports['in-expo'] = exports.inExpo;
+exports['out-expo'] = exports.outExpo;
+exports['in-out-expo'] = exports.inOutExpo;
+exports['in-circ'] = exports.inCirc;
+exports['out-circ'] = exports.outCirc;
+exports['in-out-circ'] = exports.inOutCirc;
+exports['in-back'] = exports.inBack;
+exports['out-back'] = exports.outBack;
+exports['in-out-back'] = exports.inOutBack;
+exports['in-bounce'] = exports.inBounce;
+exports['out-bounce'] = exports.outBounce;
+exports['in-out-bounce'] = exports.inOutBounce;

node_modules/ease-component/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "ease-component",
+  "description": "Easing functions (for canvas etc)",
+  "version": "1.0.0",
+  "keywords": ["ease", "easing", "tween"],
+  "dependencies": {},
+  "component": {
+    "scripts": {
+      "ease/index.js": "index.js"
+    }
+  },
+  "license": "MIT"
+}