代码改变世界

缓动与二次函数 抛物线图练习

2012-05-28 21:57  VVG  阅读(1056)  评论(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">&nbsp;</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>

具体详情请见，岑安的【前端应该知道的那些事儿】运动学基础