javascript - jQuery.easing - easeOutCubic - 强调轻松

Question

我正在使用 Robert ( http://gsgd.co.uk/sandbox/jquery/easing/ ) 的 jQuery 缓动插件，我需要强调或拖出缓动效果。

基本上，我希望缓动效果非常快，但在缓出过程中会大大减慢。

我相信我可以做到这一点，jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)但我不知道如何正确使用它。

如何做到这一点？

score 19 · Accepted Answer

您不需要缓动插件来使用 jQuery 进行自定义缓动。您只需要您要使用的一个缓动函数的源 JavaScript 代码。

这是easeOutCubic从 jQuery UI 源代码中获得的函数。有关更多信息，请参阅此线程。

$.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

现在您可以编辑函数和/或重命名它...

$.easing.myEasing = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

（以下所有示例都使用 375 像素的蓝色方块，slideToggle()持续时间为 3 秒。您可以更改 3 秒（3000 毫秒）的持续时间以根据自己的喜好演示效果。我选择了 3 秒以使其足够慢以查看差异。）

然后你把它放在你的jQuery中，也许是这样的......

$(document).ready(function(){

        $.easing.myEasing = function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        }

        $("#button").click(function() {
            $('#myDiv').slideToggle(
                3000, // <-- Animation Duration (3000 ms)
                'myEasing'  // <-- the Name of your easing function
            );
        });

});

这是上述代码的演示，其中包含easeOutCubic重命名为myEasing并应用于slideToggle()持续时间为 3 秒的多维数据集的函数。

http://jsfiddle.net/kJZxQ/

好的，现在到你的问题：你说你想要“......缓动效果非常快，但在缓出过程中会大大减慢。”

这是一个图表easeOutCubic：轻松户外