mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-01-18 15:02:09 +00:00
37 lines
1.4 KiB
HTML
37 lines
1.4 KiB
HTML
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>TweenTest</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<script src="../assets/js/libs/tween.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
const box = document.createElement('div');
|
|
box.style.setProperty('background-color', '#008800');
|
|
box.style.setProperty('width', '100px');
|
|
box.style.setProperty('height', '100px');
|
|
document.body.appendChild(box);
|
|
|
|
// Setup the animation loop.
|
|
function animate(time) {
|
|
requestAnimationFrame(animate);
|
|
TWEEN.update(time);
|
|
}
|
|
requestAnimationFrame(animate);
|
|
|
|
const coords = { x: 0, y: 0 }; // Start at (0, 0)
|
|
const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
|
|
.to({ x: 300, y: 200 }, 1000) // Move to (300, 200) in 1 second.
|
|
.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
|
|
.onUpdate(() => { // Called after tween.js updates 'coords'.
|
|
// Move 'box' to the position described by 'coords' with a CSS translation.
|
|
box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`);
|
|
})
|
|
.start(); // Start the tween immediately.
|
|
</script>
|
|
</body>
|
|
|
|
</html> |