在JavaScript中計算跳躍動畫

我想要使用3個變量來跳動動畫：跳躍距離，跳躍高度和跳躍「速度」。在JavaScript中計算跳躍動畫

Here is a working JSFiddle demo。不過，我希望動畫跳躍是一個完美的拋物線。

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

來源

2013-03-26 Mottenmann

這實際上並沒有告訴我們足夠的信息。它可能，但是當你說「鞠躬」時，你的意思是你想讓它成爲一個完美的半圓？因爲這就是你所得到的，使用你現在的數字。另外，這是一個跳躍動畫？它是一種需要多次使用的動畫，還是僅僅只發生過一次，而且會始終發生在同一個地方，速度和高度？ – Norguard 2013-03-26 00:16:26

嘿，是的，我想重用它，這就是我的主要觀點，我不認爲它是一個半圓形，它更像是一個半橢圓形。 Atm我已經對它進行了硬編碼，以便隨着時間的推移減少高度，當它達到「jumpheight」時，它將以相反的方式進行減法。 – Mottenmann 2013-03-26 00:32:23

我在想什麼是正弦？假設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-26 00:31:27 Brandon

我試過了，它似乎沒有爲我工作：[鏈接]（http://jsfiddle.net/Mottenmann/EhWAR/2/）。但我敢打賭，這是解決我的問題的正確方法。 – Mottenmann 2013-03-26 00:39:43

對不起，這裏是jsfiddle：http://jsfiddle.net/pScUY/ – Brandon 2013-03-26 00:42:20

確切的說，它:) – Mottenmann 2013-03-26 00:46:18

在JavaScript中計算跳躍動畫

回答

相關問題