jQuery找到合適的緩動功能

Question

大家好，我試圖用html和JQuery創建加載動畫，看起來像Windows Phone 7加載動畫。 我已經走了這么遠

http://jsfiddle.net/b6L8M/5/

但是緩動功能與我想要的相反，我希望它在邊緣時能快速移動，而在其中心時則放慢速度。

當查看http://jqueryui.com/demos/effect/easing.html時 ，似乎沒有內置函數，那么我將如何創建該函數？

Answer 1

如果解散動畫分成兩個部分，你可以ease-in市中心和ease-out中心：

function moveDot(dotItem, delay) {
    var dotItem = $(dotItem);
    dotItem.delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutCirc',  function() {
        dotItem.animate({left : '100%'}, 1000, 'easeInCirc', function () {
            moveDot(dotItem[0], 0);
        });
    });
}

我還緩存了$(dotItem)選擇，因此它在創建另一個選擇時不會造成打mid的中間動畫（這種情況發生的可能性不大，但是::）。

這是一個演示： http : //jsfiddle.net/b6L8M/13/

Answer 2

有時，您必須使用多個動畫函數來執行所需的操作。

我不知道Windows Phone 7的動畫效果如何，但是我根據您所說的進行了嘗試：

$(dotItem).delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutQuart',  function() {
    $(this).animate({left: '100%'}, 1000, 'easeInQuart', function() {
        moveDot(dotItem, 0);
    });
});

第一個，easeOutQuart，先快后慢。 第二個是緩慢然后加速。 我使用了鏈接系統，但是它使元素在幾毫秒內停止。 您也可以使用“延遲”來做到這一點。

Answer 3

在擺弄小提琴手並使用此帖子后，使用了自定義jquery緩動功能幫助，使它能夠像我想要的一樣工作http://jsfiddle.net/b6L8M/24/，它與WP7加載大致相同！