用JavaScript计算跳跃动画

Question

我正在尝试使用3个变量来制作跳跃动画：跳跃距离、跳跃高度和可能的跳跃“速度”。

这里有一个可工作的JSFiddle演示。然而，我希望跳跃动画是一个完美的抛物线。

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);

- Mottenmann

---

这并没有告诉我们足够的信息。也许会有用，但是当你说“弓”，你是指想要一个完美的半圆吗？因为使用您当前的数字，这就是您将得到的结果。此外，这是跳跃动画吗？这是一种需要多次使用的动画，还是只需要发生一次，并且始终在相同的位置、速度和高度发生的事情？ - Norguard

嗨，是的，我想重复使用它，这是我的主要观点，并且我认为它不是一个半圆形，而更像是一个半椭圆形。目前，我已经将其硬编码，以便随着时间的推移，高度的减少变得更小，并且当它达到“跳跃高度”时，它会改变方向。 - Mottenmann

Answer 1

我想这个应该是在谈论正弦函数？假设 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)   
};

- Brandon

---

我已经尝试过了，但似乎对我没有用：链接。但我相信这种方法是解决我的问题的正确方法。 - Mottenmann