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,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