制作更流畅的跳跃动画

Question

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

初始代码正在运行。但我无法实现的是更顺畅的跳跃。 正如see here 所言，当您击中空间（使球跳跃）并向左移动时，跳跃看起来不像具有真实的物理特性。它使三角形像跳跃，而不是在半圆形运动中平滑。我的跳转代码是：

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

这个小提琴或者我的浏览器有点奇怪，但是here it is I think.

Answer 2

您可以让您的 mario 遵循二次曲线来呈现令人愉悦的跳跃。

演示：http://jsfiddle.net/m1erickson/qDQBh/

在给定 0.00 到 1.00 之间的区间值 (T) 的情况下，此函数会沿二次曲线返回 XY。

T==0 位于曲线的起点。
T==1.00 在曲线的末端。

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}