Jquery 找到正确的缓动函数答案

【问题标题】：Jquery finding the right easing functionJquery 找到正确的缓动函数
【发布时间】：2012-01-26 23:22:09
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案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/

【讨论】：

OP 不想要this 之类的东西吗？（我刚刚在您的代码中切换了 In 和 Out）
是的，我认为你是对的，但是基本点是一样的。使用两个动画，一个缓入，另一个缓出。感谢您的评论。
我在搞这个，我喜欢这个动画（这分为四个动画）：jsfiddle.net/b6L8M/14
这个看起来像框在页面上弹跳：jsfiddle.net/b6L8M/16（必须使用支持转换和转换的更新浏览器）
好的，最后一个，这个使点在“加载”文本上反弹：jsfiddle.net/b6L8M/17

【解决方案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，先快后慢。第二个是慢然后加速。我使用了链接系统，但它使元素在几毫秒内停止。您也可以使用“延迟”来不停地这样做。

【讨论】：

这会导致它们完全停止，它们永远不应该碰撞。

【解决方案3】：

在 fiddler 中摆弄并使用这篇文章 Help with custom jquery easing function 之后，我让它像我想要的那样工作 http://jsfiddle.net/b6L8M/24/ 和 WP7 加载差不多！

【讨论】：