jQuery.easing-easeOutCubic-强调易用性

Question

我使用的是罗伯特（ http://gsgd.co.uk/sandbox/jquery/easing/ ）的jQuery轻松插件，我需要强调或拖延轻松效果。

基本上，我希望缓动效果真的很快，但在缓动过程中却大大放慢。

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

如何做到这一点？

Answer 1

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

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

$.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
            );
        });

});

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

http://jsfiddle.net/kJZxQ/

好了，现在您的问题是：您说您希望“ ...缓解效果确实很快，但是在缓解期间会大大降低。”

这是easeOutCubic的图形： 三次立方