VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement pinch to zoom

Browse Source
This commit is contained in:
marlon-erler
2026-08-30 16:15:14 +02:00
parent ea50704f8a
commit 7eb02f07dc
160 changed files with 15806 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
node_modules/component-tween/examples/array.html
Generated Vendored
+48
View File
@@ -0,0 +1,48 @@
<style>
canvas {
border: 1px solid #eee;
}
</style>
<script src="../build/build.js"></script>
<canvas width=1000 height=500></canvas>
<script>
var Tween = require('tween');
var raf = require('component-raf');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var h = 500;
function random(n, f) {
var arr = [];
while (n--) arr.push(Math.random() * f);
return arr;
}
var tween = Tween(random(1000, 50))
.ease('out-bounce')
.to(random(1000, 400))
.duration(800);
tween.update(function(a){
canvas.width = canvas.width;
ctx.fillStyle = '#0070ff';
for (var i = 0; i < a.length; i++) {
ctx.fillRect(i, h - a[i], 1, a[i]);
}
});
tween.on('end', function(){
animate = function(){};
});
function animate() {
raf(animate);
tween.update();
}
animate();
</script>
node_modules/component-tween/examples/ball.html
Generated Vendored
+64
View File
@@ -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>
node_modules/component-tween/examples/circle.html
Generated Vendored
+45
View File
@@ -0,0 +1,45 @@
<style>
canvas {
border: 1px solid #eee;
}
</style>
<script src="../build/build.js"></script>
<canvas width=500 height=400></canvas>
<button onclick='tween.stop()'>Stop</button>
<script>
var Tween = require('tween');
var raf = require('component-raf');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var tween = Tween({ alpha: 0, border: 1, radius: 1 })
.ease('out-bounce')
.to({ alpha: 1, border: 15, radius: 150 })
.duration(1000);
tween.update(function(o){
canvas.width = canvas.width;
ctx.strokeStyle = 'black';
ctx.globalAlpha = o.alpha;
ctx.lineWidth = o.border;
ctx.arc(canvas.width / 2, canvas.height / 2, o.radius, 0, Math.PI * 2, false);
ctx.stroke();
ctx.fill();
});
tween.on('end', function(){
animate = function(){};
});
function animate() {
raf(animate);
tween.update();
}
animate();
</script>
node_modules/component-tween/examples/dom.html
Generated Vendored
+41
View File
@@ -0,0 +1,41 @@
<style>
body {
padding: 50px;
}
button {
padding: 15px 25px;
}
</style>
<button>Button</button>
<script src="../build/build.js"></script>
<script>
var Tween = require('tween');
var raf = require('component-raf');
var button = document.querySelector('button');
var tween = Tween({ rotate: 0, opacity: 0 })
.ease('out-bounce')
.to({ rotate: 360, opacity: 1 })
.duration(800);
tween.update(function(o){
button.style.opacity = o.opacity;
button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
});
tween.on('end', function(){
animate = function(){};
});
function animate() {
raf(animate);
tween.update();
}
animate();
</script>
node_modules/component-tween/examples/interactive.html
Generated Vendored
+62
View File
@@ -0,0 +1,62 @@
<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;
function Ball(x, y) {
this.moveTo(x, y);
this.rad = 10;
}
Ball.prototype.moveTo = function(x, y){
this.x = x;
this.y = y;
};
Ball.prototype.draw = function(ctx){
ctx.save();
ctx.fillStyle = 'red';
ctx.arc(this.x | 0, this.y | 0, this.rad, 0, Math.PI * 2, false);
ctx.fill();
ctx.restore();
};
var ball = new Ball(100, 100);
ball.draw(ctx);
canvas.onclick = function(e){
console.log('move');
var tween = Tween({ x: ball.x, y: ball.y })
.ease('out-bounce')
.to({ x: e.offsetX, y: e.offsetY })
.duration(1500);
tween.update(function(o){
canvas.width = canvas.width;
ball.moveTo(o.x, o.y);
ball.draw(ctx);
});
function animate() {
raf(animate);
tween.update();
}
animate();
};
</script>
node_modules/component-tween/examples/rect.html
Generated Vendored
+43
View File
@@ -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>