jquery - jQueryでイージングを行う方法がわかりません

Question

これは私がインターネットから集めたものです。slideDown は機能しますが、それでも線形に見えます。私のアプローチは完全に間違っていますか、それとも微妙なものが欠けているだけですか? どうすればそれを機能させることができますか？

 $.easing.easeOutQuad = function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
 };

 $("#view").slideDown(200,'easeOutQuad');

Answer 1

おそらく、あなたは微妙な何かを見逃しています。イージング プラグインをガイドとして使用して「カスタム イージング」を実行しようとしているようです。私が考えているのは、アニメーションの持続時間が 200 ミリ秒と非常に短いということです。この速度では、速度の低下は非常にわずかです。これを 2000 (または 3000) ミリ秒に拡張して、イージングの動作を確認してください。

また、easeOutQuad はそのまま微妙なアニメーションになっています。実行しても劇的な効果はありません。jQuery イージングの基本を学ぶ問題として、"easeOutElastic" からアルゴリズム コードを取得し、それを関数に入れてみて、より劇的な効果を確認してください。これにより、コードが機能していることを確信できます。機能していることを確認したら、弾性アルゴリズムを取り出して、元のアルゴリズムに戻します。

サンプルコード:

$.easing.easeOutQuad = function (x, t, b, c, d) {
    //return -c *(t/=d)*(t-2) + b;
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

$("#view").slideDown(2000,'easeOutQuad');