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

我们知道抛物线的公式为: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>

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

 

你可能感兴趣的:(函数)