控制動畫

Question

我正在創建一個捶打鼴鼠風格的遊戲，其中給出了總和，並且從容器底部向上數字設置了數字。遊戲的目的是點擊正確的答案並收集儘可能多的正確答案。

我還添加了一些額外的圖標，使遊戲更有趣。其中一個圖標是加速動畫5秒鐘的火焰。

目前，它使所有的圖標一次移動得非常快。與其發生這種情況，我希望流程像往常一樣繼續，但速度更快。

這是我迄今爲止..

$(".character").click(clickThrottled(function() { 
    if ($(this).hasClass("heat")) { 
     $(this).effect("explode", 400); 
     $("#container").children().css('top', '400px').fadeIn(1000).animate({ 
      'top': '-100px' 
     }, 3000).fadeOut(1000); 
    } 
})); 

有人能告訴我，我錯了？查看演示並點擊火焰圖標以更好地理解問題。

小提琴：http://jsfiddle.net/pUwKb/52/

Answer 1

看的jQuery UI提供的不同easings，他們應該解決您的問題。要使用它們只需設置屬性緩動animate（如果您需要更高級的屬性，則還應該包含jQuery UI）。

要進一步定製，您可以使用animate的step回調。

Answer 2

寬鬆將使所有元素安心的同時頂部，但在時尚的方式（就像他們在年底放緩。）

你真正需要做的是保持所謂的「標誌isFlameOn'或'speedModifier'會更好。點擊火焰圖標時，將'speedModifier'設置爲等於2或3，這會使速度提高兩倍或三倍。

刪除此：

$("#container").children().css('top', '400px').fadeIn(1000).animate({ 
     'top': '-100px' 
}, 3000).fadeOut(1000); 

因爲你將單獨改變物體的速度。

現在下去，無論你管理每個圖標（移動它們）而不是說：item [i] .y - = item [i] .speed;

Do item [i] .y - = item [i] .speed * speedModifier;

如果您讓它們成爲動畫以達到頂部，那麼您需要跟蹤每個動畫間隔並重置它們。因此，如果您創建了一個項目然後使其具有動畫效果，則需要刪除該動畫效果，並使用補償後的speedModifier百分比創建一個新項目。如果你逐幀完成，你將有一個簡單的日子:)。

當您想要火焰效果用完時，只需將speedModifier設置回1.如果您爲每個項目設置動畫，則需要再次刪除當前的.animate並將其替換爲正常速度。請務必跟蹤每個項目的隨機速度，以便在效果消失後將其速度重置爲原始速度。