blob: b20ad1f4d87364df88df986a66b65dac054ecfa2 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Spring timing function demo</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<style>
body {
background-color: #CECECE;
font-family: "Source Sans Pro", sans-serif;
color: #5E275A;
}
h1 {
font-size: 200%;
color: #5E275A;
border-bottom: 1px solid #888;
width: 500px;
margin-top: 0;
}
p {
width: 500px;
}
#canvas {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
#object {
position: absolute;
left: -20px;
top: -20px;
width: 40px;
height: 40px;
border-radius: 20px;
box-sizing: border-box;
border: 2px solid #6F6F6F;
background-color: #6E9FB7;
transform: translate(100px, 200px);
will-change: transform;
}
.useSystem #object {
transition-property: transform;
transition-duration: 10s; /* large enough to let the spring happen */
transition-timing-function: spring(1 100 10 0);
}
</style>
<script src="dat.gui.min.js"></script>
<script src="spring.js"></script>
<script>
var Spring = function(element)
{
this.element = element;
this.currentX = 100;
this.currentY = 200;
this.animationIsRunning = false;
this.mass = 1;
this.stiffness = 100;
this.damping = 10;
this.initialVelocity = 0;
this.useSystemSpring = false;
};
Spring.prototype = {
moveTo: function (x, y)
{
if (this._useSystemSpring) {
this.animationIsRunning = false;
this.element.style.transitionTimingFunction = `spring(${this.mass} ${this.stiffness} ${this.damping} ${this.initialVelocity})`;
this.element.style.transform = `translate(${x}px, ${y}px)`;
} else {
this.animationIsRunning = true;
var bounds = this.element.getBoundingClientRect();
this.currentX = bounds.left + 20;
this.currentY = bounds.top + 20;
this.startX = this.currentX;
this.startY = this.currentY;
this.targetX = x;
this.targetY = y;
this.startTime = Date.now() / 1000;
this.solver = new SpringSolver(this.mass, this.stiffness, this.damping, this.initialVelocity);
window.requestAnimationFrame(this.step.bind(this));
}
},
step: function()
{
if (!this.animationIsRunning) {
return;
}
var elapsed = Date.now() / 1000 - this.startTime;
var proportion = this.solver.solve(elapsed);
this.currentX = this.startX + (this.targetX - this.startX) * proportion;
this.currentY = this.startY + (this.targetY - this.startY) * proportion;
this.element.style.transform = `translate(${this.currentX}px, ${this.currentY}px)`;
// Keep animating for 10 seconds. Too bad if it hasn't finished by then.
if (elapsed < 10 * 1000) {
window.requestAnimationFrame(this.step.bind(this));
} else {
this.animationIsRunning = false;
}
},
get useSystemSpring()
{
return this._useSystemSpring;
},
set useSystemSpring(newValue)
{
this._useSystemSpring = newValue;
document.body.classList.toggle("useSystem", newValue);
}
};
window.addEventListener("load", function() {
var s = new Spring(document.getElementById("object"));
var gui = new dat.GUI();
gui.add(s, 'mass', 0, 20);
gui.add(s, 'stiffness', 0, 200);
gui.add(s, 'damping', 0, 50);
gui.add(s, 'initialVelocity', -50, 50);
gui.add(s, 'useSystemSpring');
document.getElementById("canvas").addEventListener("click", function (event) {
s.moveTo(event.clientX, event.clientY);
}, false);
}, false);
</script>
</head>
<body>
<h1>Spring timing function</h1>
<p>
Click/tap to move the object. Selecting "useSystemSpring" will run the
transition using the spring() timing function. Otherwise it
is the embedded JavaScript solver, which should be identical.
The <a href="https://lists.w3.org/Archives/Public/www-style/2016Jun/0181.html">
proposal is on www-style</a>.
</p>
<div id="canvas">
<div id="object"></div>
</div>
</body>
</html>