javascript - jQuery.easing-easeOutCubic-强调易用性

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

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

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

如何做到这一点？

最佳答案

您无需使用缓动插件即可使用jQuery进行自定义缓动。您只需要要使用的一个缓动函数的源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
            );
        });

});

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

http://jsfiddle.net/kJZxQ/

好了，现在您的问题是:您说您希望“...缓解效果真的很快，但是在缓解期间会大大放慢速度。”

这是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公式，但仅在前面更快，在结尾更慢。

关于javascript - jQuery.easing-easeOutCubic-强调易用性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7748617/