implement pinch to zoom

2026-08-30 16:15:14 +02:00
parent ea50704f8a
commit 7eb02f07dc
160 changed files with 15806 additions and 61 deletions
@@ -0,0 +1,64 @@
+
+<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 w = canvas.width, h = canvas.height;
+
+  var tween = Tween({ x: w/2, y: 20, r: 10, a: .5 })
+    .ease('out-bounce')
+    .to({ x: w/2, y: h-8, r: 10, a: .5 })
+    .duration(2000);
+
+  tween.update(function(o){
+    canvas.width = canvas.width;
+    ctx.fillStyle = 'red';
+    ctx.globalAlpha = o.a;
+    ctx.arc(o.x | 0, o.y | 0, o.r, 0, Math.PI * 2, false);
+    ctx.fill();
+  });
+
+  var n = 0;
+  tween.on('end', function(){
+    switch (n++) {
+      case 0:
+        tween
+          .to({ x: w/2, y: 20, r: 10, a: .5 })
+          .ease('out-sine')
+          .duration(500);
+        break;
+      case 1:
+        tween
+          .to({ x: w/2, y: h/2, r: 10, a: .5 })
+            .ease('in-out-back')
+            .duration(800);
+        break;
+      case 2:
+        tween
+          .to({ x: w/2, y: h/2, r: 80, a: 1 })
+          .ease('out-bounce')
+          .duration(1500);
+        break;
+      default:
+        animate = function(){};
+    }
+  });
+
+  function animate() {
+    raf(animate);
+    tween.update();
+  }
+
+  animate();
+</script>