彈跳球5次jquery/javascript初學者級別

我對js和jQuery相當陌生，想要實現一個簡單的動畫，這裏已經討論了很多次：一個彈跳球。然而，由於討論的話題已經變得更加複雜，我沒有找到我的具體問題的答案。彈跳球5次jquery/javascript初學者級別

我想要一個相當簡單的動畫：五次反彈，並保持與第六的地面。到目前爲止我已經取得了這一成績。但是，對於五次反彈，我想減少彈跳距離20％的初始距離。說距離是100，它應該先彈回到80，然後到60 ...到20到0.

你可以看到我的嘗試here。

或者只是JS代碼在這裏：

$(function() { 

    var time = 500; 
    var bounces = 5; 

    function bounceDown(){ 
     $(".ball").animate({top: 200}, time, function(){ 
     bounceUp(); 
     }); 
    }; 

    function bounceUp() { 
     $(".ball").animate({top: 100}, time); 
    }; 

    function shadowUp(){ 
     $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time,  
    function(){ 
     shadowDown(); 
     }); 
    }; 

    function shadowDown() { 
     $(".shadow").animate({width: 0, height: 0, left: 130, top: 225, opacity: 0}, time); 
    };  

    function finalDown(){ 
     $(".ball").animate({top: 200}, time); 
    }; 

    function finalShadow(){ 
     $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time);  
    }; 

    $(".button").on("click", function(){ 
     for (var i = 0; i < bounces; i++){ 
     setTimeout(function(){ 
      bounceDown(); 
      shadowUp();  
     }, time*2*i); 
     setTimeout(function(){ 
      finalDown(); 
      finalShadow(); 
     }, 5000); 
     };    
    }); 
});

來源

2013-03-04 user2132380

你可以宣佈你的初始top_bounce值：

var top_bounce = 100;

，然後改變你的bounceUp功能：

function bounceUp() { 
    $(".ball").animate({top: top_bounce}, time); 
    top_bounce = top_bounce + 20; 
};

你一樣可以在這裏看到：http://jsfiddle.net/darkajax/5wASf/

以及有關在您的評論中提到的「獎金問題」，這將會是類似的東西，聲明一個變量，如：var shadow_size = 0;，然後你的功能，如：

function shadowDown() { 
     console.log(shadow_size); 
     $(".shadow").animate({width: shadow_size*100, height: shadow_size*10, left: 110, top: 225, opacity: 0}, time); 
     shadow_size += 0.2; 

    };

可以看到小提琴更新，你也'd只需要做一些類似於left的設置，使它看起來更加中心化

來源

2013-03-04 16:00:30 DarkAjax

太好了！但我沒有明白。你只需設置一個新的變量100！ Yu用這個來表示球應該彈起多遠（= 100）。爲什麼最後加20 + 180到160就是120？我會假設只去120。反正謝謝你。也許作爲獎金問題。我怎樣才能平等地處理它不會完全消失的陰影，因爲球的彈跳高度減小，而是像寬度/高度：0/0第一反彈，20/2第二反彈，...... 80/8第四反彈等等與最後一個100/10。謝謝 – user2132380 2013-03-04 16:34:48

那麼從閱讀你的問題，我認爲你希望球每次反彈較少，所以在這種情況下，這是一個視角問題，考慮到最初的'top'是100，下一次將是120，所以這意味着當你的球向上時，它將離屏幕頂端更遠，等到最後一次迭代時，「頂端」應該是** 180 **，顯示球離屏幕頂端最遠並且給彈跳的錯覺只是一點點... – DarkAjax 2013-03-04 16:41:04

@ user2132380我剛剛更新了答案，順便請記得接受我的答案，如果你發現它有幫助... – DarkAjax 2013-03-04 16:54:01

彈跳球5次jquery/javascript初學者級別

回答

相關問題