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的圖形： 三次立方