2

jQuery の制御下に横スクロール Web サイトがあり、水平方向に数千ピクセル離れたページがいくつかあります。私は easeOutElastic 関数を使用していますが、アニメーションが高速になり、弾性バウンスを弱める必要があります。デュレーション パラメータを大きくすると、アニメーションが遅くなりますが、バウンスも遅くなります。デュレーションがアニメーション全体を制御しているようです。

私がする必要があるのは、移動の速度と弾性のきつさを別々に制御することです. 私はプラグインでそのeasyOutElastic関数の独自のコピーをいじっていましたが、すべてのパラメーターが何であるかがわからないため、正しく理解できないようです:

easeOutElastic: function (x, t, b, c, d) {
    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;
}

パラメータ x、t、b、c、d が何を表しているか教えてもらえますか?

私は仮定します（関数をトレースします）：

  t = time // passed from the duration
  d = distance // calculated from the current and move to positions passed from the css

t == 0 のときにイージング関数が終了したように見えますが、実際に必要なのは、時間が経過するのを待つのではなく、モーションの速度があるしきい値を下回ったときに関数が戻ることです。しかし、速度はどこで計算されるのでしょうか? （？）

これを解読するためにあなたが与えることができるどんな助けも素晴らしいでしょう!

4

2 に答える 2

3

パラメータ x、t、b、c、d が何を表しているか教えてもらえますか?

x = null (追加のパラメーターは方程式には必要ありませんが、jQuery には必要です)
t = 現在の時間
b = 開始値
c = 終了値
d = 期間

ソース: http://gsgd.co.uk/sandbox/jquery/easing/

速度はどこで計算されますか?

「速度」は時間に対する距離として定義されます。方程式は曲線として表すことができます。曲線には任意の時点での位置情報が既に含まれているため、速度は入力するパラメーターではありません (関数の出力です)。

速度も常に変化しています (加速度は時間の経過に伴う速度の変化として定義されます)。この方程式 (曲線) にとって重要なのは、どこにいつ何かを配置するかだけです...これは、無限の速度 (より正確には「加速度」) を含むアニメーション表現 (出力) になります。

ここでの私の答えにも興味があるかもしれません...

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

編集：

プログラムではなくグラフィカルに視覚化する必要があるため、方程式の操作に苦労していると思います。このオンラインツールを使えば簡単です。必要に応じて正確に曲線を描き、プレビューしてから、カスタム関数を出力するだけです。

小さな画像をクリックすると、ツールがポップアップで開きます。

http://laco.wz.cz/tween/?page=customeasing

于 2011-10-13T18:07:45.987 に答える
2

回避策を提案できますか？2 つのアニメーション呼び出しを使用します。1 つは要素をほとんどの距離移動するためのもので、もう 1 つは最後の「バウンス」効果のためのものです。そうすれば、「バウンス」効果の持続時間を希望どおりに変更し、水平スクロール モーションを必要なだけ速くすることができます。

$('#element_id').animate({left : '20px'}, 1000, 'linear', function () {
    $(this).animate({left : '0px'}, 500, 'easeOutElastic');
});
于 2011-10-13T17:57:09.213 に答える