jQuery.easing - easeOutCubic - 强调轻松

Question

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

基本上,我希望缓和效果非常快,但在缓出期间会大大减慢.

我相信我可以使用jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)但我无法弄清楚如何正确使用它.

怎么能实现这一目标？

Answer 1

你不需要一个缓动插件来使用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:

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

这个演示页面直观地显示了所有缓动曲线......

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

如您所见,几条曲线的形状类似于(7) - easeOutCubic但前端更陡峭.以下是几个例子......

(10) - easeOutQuart easeOutQuart演示

(13) - easeOutQuint easeOutQuint演示

(16) - easeOutExpo easeOutExpo演示

它似乎是最后一个,easeOutExpo是最陡峭的股票功能.通过比较上面包含的方程的差异,我们还可以操纵easeOutExpo方程以进一步陡峭曲线.

这个自定义方程式非常快,然后极大地放慢速度......

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

甚至比上一次更极端......

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

上次演示的持续时间增加到6秒,以夸大效果......

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

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

我真的认为easeOutExpo更像你所描述的.从本质上讲,它是你的easeOutCubic等式,但在前面只有更快,在结束时更慢.