javascript - 制作更流畅的跳跃动画

Question

我正在 JSFiddle 上做一个小项目只是为了好玩。我的灵感来自于一个简单的马里奥游戏。然而，我只是让一个球来回移动并跳跃。

初始代码正在运行。但我无法实现的是更平滑的跳跃。 尽你所能see here ，当您按下空格键(使球跳跃)并向左移动时，跳跃看起来不像是真实的物理现象。它使三 Angular 形像跳跃一样，而不是在半圆类型的运动中变得平滑。我的跳转代码是:

var top = false;
kd.SPACE.up(function () {
    var gravity = 0.3;
    var jump = setInterval(function () {
        cc();
        if (top) {                
            y += yv;
            yv -= gravity;
            if (y + r > height) {
                y = height - r;
                clearInterval(jump);
                top = false;
            }
        } else {
            y -= yv;
            yv += gravity;
            if (y < height - 60) {
                top = true;
            }
        }
        circle(x, y, r);
    }, 1000 / 30);
});

Answer 1

一般来说，如果您想针对重力加速度模拟逼真的“跳跃”，您应该只从最初的“跳跃”向上方向加速。这可以通过在第一帧(按下空格时)向您的 y 速度添加一个固定值来建模。在这一点之后，只需从每一帧的 y 速度中减去你的重力。

kd.SPACE.up(function () {
    var gravity = 0.3;
    yv -= 8;   // or whatever your jump accel. should be
               // you could also just assign this value to yv which is a different effect
    var jump = setInterval(function() {
        cc();
        if (y + r < height) {
            y += yv;
            yv += gravity;
        } else {
            y = height - r;
            clearInterval(jump);
        }
        circle(x,y,r);
     }, 1000 / 30);
});

这个 fiddle 或我的浏览器有些奇怪，但是 here it is I think.