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加载大致相同！