Question

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

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

在查看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)选项，因此在创建另一个选择时不会创建打嗝中期动画（这不太可能发生这种情况，但是嘿:)）。

以下是演示：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，快速然后慢下来。第二个是缓慢然后加速。我使用了链接系统，但它使元素在某些ms期间停止。你也可以使用“延迟”来不停地这样做。

Answer 3

在提琴手摆弄并使用这篇文章Help with custom jquery easing function后，我得到了它像我想要的那样工作 http://jsfiddle.net/b6L8M/24/它与WP7加载大致相同！

Jquery找到了正确的缓动函数

3 个答案: