4

ジャンプ距離、ジャンプの高さ、ジャンプの「速度」の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);
4

1 に答える 1

2

サインを考えていますか？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)   
};
于 2013-03-26T00:31:27.167 に答える