Jquery找到正确的轻松函数

Question

大家好，我正在尝试用html和JQuery创建一个加载动画，看起来像windows phone 7的加载动画。我已经走到这一步

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

但是缓动功能做的与我想要的相反，我希望它在边缘时快速移动，然后在中心时减速。

在查看http://jqueryui.com/demos/effect/easing.html时，似乎没有内置的函数，那么我如何创建该函数呢？

Answer 1

在小提琴和使用这篇文章Help with custom jquery easing function后，我让它像我想要的http://jsfiddle.net/b6L8M/24/一样工作，它与WP7加载或多或少是相同的！

Answer 2

如果将动画分割为两个部分，则可以ease-in to the center和ease-out of the center：

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)选择，这样在创建另一个选择时，它就不会在动画中途产生一个卡顿(这种情况发生的可能性不大，但嘿:)。

这是一个演示：http://jsfiddle.net/b6L8M/13/

Answer 3

有时，您必须使用多个动画函数来执行您想要的操作。

我不知道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，它先快后慢。第二个是慢，然后是加速。我使用了链式系统，但它会使元素在某些ms期间停止。您还可以使用“延迟”来不间断地执行此操作。