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

Question

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

基本上，我希望 ease 效果非常快，但在 ease out 期间会大大减慢。

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

如何实现？

Answer 1

您不需要缓动插件来使用 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 像素的蓝色方 block ，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 函数，并应用于 slideToggle() 立方体持续 3 秒。

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 方程式，但只是前面更快，最后更慢。