用JavaScript计算跳跃动画

我试图用三个变量来制作跳跃动画：跳跃距离，跳跃高度，也许还有跳跃“速度”

。然而，我希望动画跳跃是一个完美的抛物线

var y = 300;
var x = 0;
var jh = 100;
var jw = 200;
var c = 0;

    var inter = setInterval(function () {
        c++;
        // if box reaches jump height it should fall down
        y = (c >= jh) ? y + 1 : y - 1;
        // if box reaches jump distance
        if (x == jw) clearInterval(inter);

        x++;

        $('.box').css({
            'top': y + 'px',
            'left': x + 'px'
        });

    }, 20);

---

我在想什么？假设jh是“跳跃高度”，jw是“距离”，而不清理现有代码，则可以执行以下操作：

var y = 300;
var x = 0;
var jh = 100;
var jw = 200;
var c = 0;
var speed = 3;

var inter = setInterval(function () {
    c++;
    y = getHeightAtX(x);
    if (x >= jw) clearInterval(inter);

    x+=speed;

    $('.box').css({
        'bottom': y + 'px',
        'left': x + 'px'
    });

}, 20);

function getHeightAtX(x) {
 return jh*Math.sin(x*Math.PI/jw)   
};

---

这并没有告诉我们足够的信息。可能吧，但当你说“弓”的时候，你的意思是希望它是一个完美的半圆吗？因为这就是你得到的，用你现在的数字。还有，这是跳跃动画吗？这是一个你需要能够多次使用的动画，还是一个只需要发生一次，并且总是发生在同一个地方，速度和高度的动画？嘿，是的，我想重复使用它，这是我的主要观点，我不认为它是一个半圆，它更像是一个半椭圆。Atm我对它进行了硬编码，这样随着时间的推移，高度会减少，当它达到“跳跃高度”时，它就会反过来。我试过了，但它似乎对我不起作用：。但我打赌这是解决我问题的正确方法。