缓动与二次函数 抛物线图练习
2012-05-28 21:57 VVG 阅读(1064) 评论(0) 编辑 收藏 举报我们知道抛物线的公式为:y = ax^2 + bx + c(按经过原点的时候c为0)
在这里我们可以把Y看成距离,x看成是时间,那么这个公式就是时间与位移的关系;
可以通过已知的起点,和终点坐标,求出a、b的值,下面是已经求出a、b值的一个公式的显示图
如果点击按钮没反应,请刷新
S=-0.002t^2+2t
y=ax^2+bx
s(位移500px) t(时间778ms)
moveMthod(移动距离,移动所需时间毫秒)
源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>S=-0.002t^2+2t</title> <style type="text/css"> #vvg p { text-align: center; font-size: 16px; font-weight: bold; } #vvg div#box { width: 520px; height: 20px; border: 1px solid #333; margin: 10px auto; position: relative; } #vvg div#sbox { width: 20px; height: 20px; position: absolute; left: 0; background: red; } #vvg div#map { width: 778px; background: #606060; height: 500px; margin: 0 auto; position: relative; overflow: hidden; } #vvg span.s { position: absolute; color: #fff; font-size: 12px; left: 10px; top: 6px; } #vvg span.t { position: absolute; color: #fff; font-size: 12px; left: 700px; top: 480px; } #vvg div.point { position: absolute; background: #fff; width: 2px; height: 2px; } </style> </head> <body> <div id="vvg"> <p>y=ax^2+bx</p> <div id="box"> <div id="sbox"> </div> </div> <div id="map"><span class="s">s(位移500px)</span> <span class="t">t(时间778ms)</span></div> <p align="center"> <input id="mydiy" type="text" value="moveMthod(500,250);"/> <input onclick="eval(document.getElementById('mydiy').value)" type="button" value="开始动画"/> </p> <p align="center">moveMthod(移动距离,移动所需时间毫秒)</p> </div> <script type="text/javascript"> var moveMthod = function (distance, time) { //参数为移动的最大距离,与 移动到最大距离所用时间 // 计算经过(distance,time),(0,2time)这两点的抛物线的A.B的值 var a = -(distance / Math.pow(time, 2)); var b = 2 * distance / time; //得到距离与时间的关系函数 function s(t) { return a * t * t + b * t; } //移动动画 function moveBox() { var sbox = document.getElementById('sbox'); var startT = new Date(); var timer = setInterval(function () { var thisTime = new Date() - startT; // 设置移动距离 var pos = Math.ceil(s(thisTime)); sbox.style.left = pos + "px"; // 绘制函数曲线 var top = 500 - pos; // 调用绘制函数 creatPoint(thisTime, top); if (thisTime - 0 > 1000 || top > 500) clearInterval(timer); if (parseInt(sbox.style.left) < 0) sbox.style.left = 0 + 'px'; }, 1000 / 60); } // 绘制路径 function creatPoint(left, top) { var map = document.getElementById('map'); var point = document.createElement('div'); point.className = "point"; point.style.left = left + 'px'; point.style.top = top + 'px'; map.appendChild(point); } moveBox(); }; </script> </body> </html>
具体详情请见,岑安的【前端应该知道的那些事儿】运动学基础
转载请注明出处:http://www.cnblogs.com/NNUF/