Last active
March 31, 2019 03:57
-
-
Save wintercn/f5107bc7ff1eb122191361f4d6c75fd5 to your computer and use it in GitHub Desktop.
贝塞尔曲线模拟二次曲线
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style> | |
| .ball { | |
| width:10px; | |
| height:10px; | |
| background-color:black; | |
| border-radius:5px; | |
| position:absolute; | |
| left:0; | |
| top:0; | |
| transform:translateY(180px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <label>运动时间：<input value="3.6" type="number" id="t" />s</label><br/> | |
| <label>初速度：<input value="-21" type="number" id="vy" /> px/s</label><br/> | |
| <label>水平速度：<input value="21" type="number" id="vx" /> px/s</label><br/> | |
| <label>重力：<input value="10" type="number" id="g" /> px/s²</label><br/> | |
| <button onclick="createBall()">来一个球</button> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function generateCubicBezier (v, g, t){ | |
| var a = v / g; | |
| var b = t + v / g; | |
| return [[(a / 3 + (a + b) / 3 - a) / (b - a), (a * a / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)], | |
| [(b / 3 + (a + b) / 3 - a) / (b - a), (b * b / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)]]; | |
| } | |
| function createBall() { | |
| var ball = document.createElement("div"); | |
| var t = Number(document.getElementById("t").value); | |
| var vx = Number(document.getElementById("vx").value); | |
| var vy = Number(document.getElementById("vy").value); | |
| var g = Number(document.getElementById("g").value); | |
| ball.className = "ball"; | |
| document.body.appendChild(ball) | |
| ball.style.transition = `left linear ${t}s, top cubic-bezier(${generateCubicBezier(vy, g, t)}) ${t}s`; | |
| setTimeout(function(){ | |
| ball.style.left = `${vx * t}px`; | |
| ball.style.top = `${vy * t + 0.5 * g * t * t}px`; | |
| }, 100); | |
| setTimeout(function(){ document.body.removeChild(ball); }, t * 1000); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment