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