jQuery.easing - easeOutCubic -强调易用性

Question

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

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

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

如何才能做到这一点？

Answer 1

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

下面是从jQuery UI源代码获得的easeOutCubic函数。参见this thread for more。

$.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/

好了，现在来谈谈你的问题:你说你想要"...the ease effect真的很快，但在ease过程中会大大减慢。“

以下是easeOutCubic的图表：

​

你有两个选择，你可以操纵缓和方程本身，或者我们可以看看其他一些缓和函数是否有类似的曲线，但更陡峭(更快)，直到缓出部分。

这个演示页面直观地向你展示了所有的缓和曲线...

http://api.jqueryui.com/easings/

如你所见，有几条曲线的形状类似于(7)-easeOutCubic，但在前端更陡峭。这里有几个例子。

(10)-easeOutQuart

easeOutQuart Demo

(13)-easeOutQuint

easeOutQuint Demo

(16)-easeOutExpo

easeOutExpo Demo

它似乎是最后一个，easeOutExpo是可用的最陡峭的股票函数。通过比较上面包含的方程中的差异，我们还可以操纵easeOutExpo方程来进一步使曲线变得陡峭。

这个自定义方程快得离谱，然后又慢得离谱……

http://jsfiddle.net/kJZxQ/11/

甚至比上一次更极端。

http://jsfiddle.net/kJZxQ/12/

上一次演示的持续时间增加到6秒，以夸大效果…

http://jsfiddle.net/kJZxQ/13/

通过比较上述演示的数学方程，您可以看到哪个变量正在被操作以增强效果，并相应地进行您自己的微调。

我真的认为easeOutExpo更像你所描述的那样。从本质上讲，这就是你的easeOutCubic方程，只是前面更快，最后更慢。