在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中计算跳跃动画

回答

相关问题