implement pinch to zoom

node_modules/component-tween/examples/rect.html

@@ -0,0 +1,43 @@
+
+<style>
+  canvas {
+    border: 1px solid #eee;
+  }
+</style>
+
+<script src="../build/build.js"></script>
+
+<canvas width=500 height=400></canvas>
+
+<script>
+  var Tween = require('tween');
+  var raf = require('component-raf');
+  var canvas = document.querySelector('canvas');
+  var ctx = canvas.getContext('2d');
+
+  var tween = Tween({ w: 1, h: 1, border: 1, alpha: 0 })
+    .ease('out-circ')
+    .to({ border: 5, w: 150, h: 100, alpha: 1  })
+    .duration(800);
+
+  tween.update(function(o){
+    canvas.width = canvas.width;
+    ctx.strokeStyle = 'black';
+    ctx.globalAlpha = o.alpha;
+    ctx.lineWidth = o.border;
+    ctx.rect(canvas.width / 2 - o.w / 2, canvas.height / 2 - o.h / 2, o.w, o.h);
+    ctx.stroke();
+    ctx.fill();
+  });
+
+  tween.on('end', function(){
+    animate = function(){};
+  });
+
+  function animate() {
+    raf(animate);
+    tween.update();
+  }
+
+  animate();
+</script>