jquery，如何製作平滑的跳躍動畫？

Question

我做了一個遊戲，裏面有一個球和一些阻止球落下的方塊。我使用setInterval方法使球的引力爲

setInterval(function(){ 
ball.offset({top: ballMoveY += gravitation}); 
$("p").html(ballMoveX + '<br>' + ballMoveY + '<br><br>' + blokPos + '<br><br>' + gravitation); 
if (ballMoveY > blok4Y+20){alert('game over'); return ballMoveY = 0; return ballMoveX = 0}; 
if ((ballMoveY == blok1Y && ballMoveX < blok1X && ballMoveX > 2) || 
    (ballMoveY == blok2Y && ballMoveX < blok2X && ballMoveX > 15) || 
    (ballMoveY == blok3Y && ballMoveX < blok3X && ballMoveX > 110) || 
    (ballMoveY == blok4Y && ballMoveX < blok4X && ballMoveX > 325)){ 

    return gravitation = 0; 
} 
else {return gravitation = 5;}; 
}, 5); 

但我不能讓跳轉順暢。跳躍是從頂點開始，而不是從底部開始然後再向上跳動，然後再跳下。我使用空格鍵來觸發球跳，箭頭鍵左右移動球。 這是跳躍代碼：

$(window).keyup(function(e){ 
    if (e.which === 32 && gravitation == 0){ 
     return gravitation -= 200; 
    } 
}) 

下面是完整的代碼https://jsfiddle.net/b2orwnrz/

Answer 1

重力基本上是速度在時間上的變化率，所以爲了模擬重力，您必須在系統中添加一個speed變量。此速度將根據gravity更改，並且speed將用於更改您的對象的position。 跳躍是與重力相反方向的瞬時速度變化。

以這種方式工作會讓你創建一個平滑的跳躍效果，但會要求你稍微修改一下你的其他代碼。但是，這樣的事情應該給你的想法：

$(document).ready(function() { 

     var ball = $("#ball"); 
     ballPos = ball.position(); 
     ballMoveX = ballPos.left; 
     ballMoveY = ballPos.top; 
     gravitation = 3, speed = 0; //You declare speed as well as gravitation. Setting speed to 0 is the equivalent of dropping a ball without any force. 

     var blok1 = $("#blok1").offset(); 
     blok1Y = blok1.top; 
     blok1X = parseInt(blok1.left) + parseInt($("#blok1").css("width")); 
     var blok2 = $("#blok2").offset(); 
     blok2Y = blok2.top; 
     blok2X = parseInt(blok2.left) + parseInt($("#blok2").css("width")); 
     var blok3 = $("#blok3").offset(); 
     blok3Y = blok3.top; 
     blok3X = parseInt(blok3.left) + parseInt($("#blok3").css("width")); 
     var blok4 = $("#blok4").offset(); 
     blok4Y = blok4.top; 
     blok4X = parseInt(blok4.left) + parseInt($("#blok4").css("width")); 

     blokPos = blok1Y + '<br>' + blok2Y + '<br>' + blok3Y + '<br>' + blok4Y + '<br>' + '<br>' + blok1X + '<br>' + blok2X + '<br>' + blok3X + '<br>' + blok4X; 


     setInterval(function() { 
      speed += gravitation; //The speed changes according to the gravitation. 
            //You can modulate the speed at which this rate changes by changing gravitation value. 
           //But if you want to stay close to reality, gravitation should be constant. 
      ball.offset({ 
       top: ballMoveY += speed // The position changes according to speed. 
             //Speed is basically difference of position in time. 
             //Since this difference of time is taken care of with setInterval, 
             //you set difference of position directly with speed. 
      }); 
      $("p").html(ballMoveX + '<br>' + ballMoveY + '<br><br>' + blokPos + '<br><br>' + speed); 
      if (ballMoveY > blok4Y + 20) { 
       alert('game over'); 
       return ballMoveY = 0; 
       return ballMoveX = 0 
      }; 
      //Since your position values are less precise than before you need 
      //to validate if they're greater than, not equal. 
      //You'll see that for now, this makes a strange effect of 
      //stopping the ball not exactly at the right place. 
      if ((ballMoveY > blok1Y && ballMoveX < blok1X && ballMoveX > 2) || (ballMoveY > blok2Y && ballMoveX < blok2X && ballMoveX > 15) || (ballMoveY > blok3Y && ballMoveX < blok3X && ballMoveX > 110) || (ballMoveY > blok4Y && ballMoveX < blok4X && ballMoveX > 325)) { 
       speed = 0; // IF ball is on block its speed gets back to 0 
       gravitation = 0;// Here, normally it should stop movement, not change the gravity, 
           //but this can be done this way. But if you were the refactorfurther, 
           //you should clear the interval when the ball is stopped 
           //and start it on keydown callback. 
       return speed = 0;// Not sure you need to return anything... 
      } else { 
       return gravitation = 3; 
      }; 
     }, 50); 




     $(window).keydown(function (e) { 
      if (e.which === 39) { 
       ball.offset({ 
        left: ballMoveX += 5 
       }); 
      } 
      if (e.which === 37) { 
       ball.offset({ 
        left: ballMoveX -= 5 
       }); 
      } 


     }) 

     $(window).keyup(function (e) { 
      console.log(e.which, gravitation); 
      if (e.which === 32 && gravitation == 0) { 
       return speed = -30;// That's where your jump happens. A jump is a force in up direction. 
            //A one time force will have the effect of changing the speed on one moment. 
            //Once the speed has changed, the gravitation continues to have 
            //an effect and makes the ball slow down, then fall. 
      } 
     }) 

    }) 

https://jsfiddle.net/3rfpL420/4/

Answer 2

而不是試圖創建自己的功能，你可以使用jQuery的，例如提供的動畫功能：

$('#ball').animate({'bottom':20}, bouncetime, 'easeInQuad'); 

我在這裏創建了一個例子： http://jsfiddle.net/xtggqcg5/1/

對於緩動我使用th e easeInQuad可以通過jQuery UI獲得，但您可以添加自己的緩動功能。