javascript - jQuery.easing - easeOutCubic - 使いやすさを強調する

Question

私は Robert ( http://gsgd.co.uk/sandbox/jquery/easing/ ) による jQuery イージングプラグインを使用しており、イージング効果を強調したり引きずったりする必要があります。

基本的には、イーズ効果を非常に速くしたいのですが、イーズアウト中は非常に遅くなります。

を使用してこれを行うことができると信じていますがjQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)、適切に使用する方法がわかりません。

これはどのように達成できますか？

score 19 · Accepted Answer

jQuery でカスタムイージングを行う場合、イージングプラグインは必要ありません。使用する 1 つのイージング関数のソース JavaScript コードのみが必要です。

easeOutCubicjQuery 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;
}

(以下のすべての例では、持続時間が 3 秒の 375 ピクセルの青い正方形を使用していますslideToggle()。3 秒 (3000 ミリ秒) の持続時間を変更して、好みに合わせて効果を示すことができます。違います。)

次に、おそらくこのようなものを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関数の名前がに変更され、3 秒間キューブにmyEasing適用されます。slideToggle()

http://jsfiddle.net/kJZxQ/

わかりました、あなたの問題に行きましょう: あなたは、「... イージング効果は非常に速くしたいが、イージングアウト中には大幅に遅くしたい」と言いました。

のグラフは次のとおりですeaseOutCubic。イーズアウト立方体