jQuery animateイージングの使い方を画像と文章で詳しく解説

jQuery API ドキュメントからわかるように、jQuery カスタム アニメーション関数 .animate(properties [,duration] [,easing] [,complete] ) には 4 つのパラメーターがあります:

• プロパティ: 一連のアニメーション プロパティと最終プロパティスタイル属性とその値のコレクション

• 期間 (オプション): アニメーションの実行時間。その値は、あらかじめ決められた 3 つの速度 (「遅い」、「標準」、「速い」) のいずれかでの文字列にすることができます。アニメーションの継続時間を示すミリ秒の値 (例: 1000)

• イージング (オプション): 使用するトランジション効果の名前 (例: "linear" または "swing")

• complete (オプション) : アニメーションが完了したときに実行される関数

パラメータイージングには、デフォルトで「linear」と「swing」の 2 つの効果があります。さらに多くの効果が必要な場合は、プラグインがそれをサポートする必要があります。 「easeOutExpo」と「easeOutBounce」には 30 以上のエフェクトがあります。ここをクリックすると、各イージングのデモンストレーション効果が表示されます。以下では、その使用方法と各イージングの曲線チャートを詳しく紹介します。

jQueryイージングの使い方

まず、プロジェクトで特殊なアニメーション効果を使用する必要がある場合は、jQueryを導入した後にjquery.easing.1.3.jsを導入する必要があります

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

導入後、オプションの値イージングパラメータは次の 32 種類です。

10.easeInOutQuart

12.easeInOutQuint
16.easeInOutExpo
19.イーズアウトサイン
20.イーズインアウトサイン
21.イーズインサークル
22 .easeOutCirc
24.easeInElastic
27.easeInOutBack
31.必要です、私たちは必要ありませんjquery.easing.1.3.js 全体を導入するには、必要ないくつかのイージングのみを Javascript ファイルに含めることができます。たとえば、プロジェクトでは 2 つのエフェクト「easeOutExpo」と「easeOutBounce」だけを使用します。次のコード

jQuery.extend( jQuery.easing, 
{ 
easeOutExpo: function (x, t, b, c, d) { 
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
}, 
easeOutBounce: function (x, t, b, c, d) { 
if ((t/=d) < (1/2.75)) { 
return c*(7.5625*t*t) + b; 
} else if (t < (2/2.75)) { 
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
} else if (t < (2.5/2.75)) { 
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
} else { 
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
} 
}, 
});

春のようなアニメーションをカスタマイズするなど、イージング効果を指定するには、jQuery のカスタム アニメーション関数 animate を使用します。

$(myElement).animate({ 
top: 500, 
opacity: 1 
}, 1000, 'easeOutBounce');

jQuery 1.4 バージョンの animate() メソッド、イージング メソッドがサポートされるように拡張されたことに言及する価値があります。各属性のイージング方法の指定など、詳しくはこちらを参照してください。

//第一种写法
$(myElement).animate({ 
left: [500, 'swing'], 
top: [200, 'easeOutBounce'] 
}); 
//第二种写法
$(myElement).animate({ 
left: 500, 
top: 200 
}, { 
specialEasing: { 
left: 'swing', 
top: 'easeOutBounce'
} 
});

イージング効果を指定するには、slideUp()、slideDown() などの jQuery 組み込みアニメーション関数を使用します。メソッドが利用可能です:

$(myElement).slideUp(1000, method, callback}); 
$(myElement).slideUp({ 
duration: 1000, 
easing: method, 
complete: callback 
});

jQueryイージング図


次の図は、各イージングの効果を理解しやすくします




上記は、導入されたjQuery animate easingの使用方法の詳細な説明に関連しています。編集者によるナレッジ。ご質問がございましたら、メッセージを残してください。編集者がすぐにご返答いたします。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

jQuery animate easing の使用方法に関する詳細な画像とテキストについては、PHP 中国語 Web サイトに注目してください。