如何構建自定義jQuery緩動/彈跳動畫？

我熟悉jQuery的動畫功能，我也經歷了各種各樣的jQuery UI easing functions。不幸的是，他們沒有一個顯示爲我正在尋找的動畫效果，因此可以創建自己的緩動功能？如何構建自定義jQuery緩動/彈跳動畫？

我嘗試的動畫可以在Apple Mac webopage的頂部看到動態加載的產品小部件。初始項目似乎從頂部滑入，然後在着陸後產生反彈效果。是否有可能使用自定義jQuery代碼重新創建這種緩動風格？或者可能建立自己的第三方簡單功能？

我已經包含了我正在談論的屏幕，並希望有人可以提供解決方案。感謝提前:)

Mac animated menu

highlighted graphics

2013-01-22 Jake

看一看這個 - http://stackoverflow.com/questions/5916058/jquery-easing-function-variables-comprehension它應該幫助您瞭解如何建立或者將緩動類型添加到緩動函數中。 http://forrst.com/posts/How_to_create_custom_jQuery_easing_functions-OKb –

任何看着這個動畫在頁面上的JavaScript是在http://images.apple.com/global/scripts/productbrowser.js和動畫添加在行addVendorEventListener （「animationStart」，M）;用於產品網格中的每個元素。 –

事實上，您提供的示例頁面在IE中（第10版以下）不能正常工作，這表明它實際上（主要）是CSS動畫。只有一些項目實際上是使用JavaScript/JQuery進行動畫製作的，例如包含滑入視圖中的產品類別的單獨DIV，並且底部的插入符號似乎也通過使用JS進行動畫。查看[Animate.css示例]（http://daneden.me/animate/），看看其中的任何一個是否符合您的需求，或者您是否可以根據CSS動畫/轉換自定義__其中描述的技術。 – TildalWave

見我demo here

主要思想是通過執行easeOutCubic效應2個連續動畫：

HTML：

<div class='left'></div> 
<div class='center'></div> 
<div class='right'></div>

JS：

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){ 
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic"); 
}); 

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){ 
    $('div.center').animate({top: 400}, 300, "easeOutCubic"); 
}); 

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){ 
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic"); 
});

來源

2013-01-28 04:45:08 phnkha

這是jQuery的一個很好的解決方案，謝謝。享受賞金！我將在使用CSS3關鍵幀搜索解決方案時打開另一個問題。 – Jake

如何構建自定義jQuery緩動/彈跳動畫？

回答

相關問題