25

jQueryのイージング関数はどのように機能しますか？たとえば、次のようにします。

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

それはどのように機能しますか？各パラメータは何を保持しますか？アニメーションのダムイージングをどのように実装しますか？

また、イージングパターンをjQueryにアタッチするにはどうすればよいですか、それを$ .easingにロードするだけで十分ですか？

4

5 に答える 5

38

jQuery 1.6.2のソースによると、イージング関数の意味は次のとおりです。この関数は、アニメーション中のさまざまな時点で呼び出されます。それが呼ばれる瞬間に、

  • xとtはどちらも、アニメーションの開始を基準にした現在の時刻を示しています。xは、[0,1]の範囲の浮動小数点数として表されます。ここで、0は開始、1は終了です。tは、アニメーションの開始からのミリ秒で表されます。
  • dは、アニメーション呼び出しで指定されたアニメーションの継続時間（ミリ秒単位）です。
  • b=0およびc=1。
イージング関数は、[0,1]の範囲の浮動小数点数を返す必要があります。これを`r`と呼びます。次に、jQueryは `x = start + r *（end-start）`を計算します。ここで、`start`と`end`は、animateの呼び出しで指定されたプロパティの開始値と終了値であり、プロパティ値を`に設定します。 x`。

私が見る限り、jQueryは、アニメーションのステップ関数がいつ呼び出されるかを直接制御することはできません。「時間tに呼び出された場合、アニメーション全体をこれまでに実行する必要があります」とだけ言うことができます。したがって、たとえば、オブジェクトの移動速度が速いときに、オブジェクトをより頻繁に再描画するように要求することはできません。また、他の人がbが開始値で、cが変更であると言う理由もわかりません。これは、jQueryのソースコードが言っていることではありません。

たとえば、easeInQuadと同じように独自のイージング関数を定義したい場合は、

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'800px'},'slow','myfunc');


$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$('#marker').animate({left:'500px'},'slow','myfunc');
#marker { position: absolute; left: 10px; top: 50px; background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='marker'>Hello World!</div>

于 2011-07-26T02:48:45.740 に答える
21

具体的な例、

初期値が1000で、 3秒で400に到達したいとします。

var initialValue = 1000,
    destinationValue = 400,
    amountOfChange = destinationValue - initialValue, // = -600
    duration = 3,
    elapsed;

0から3に行きましょう：

elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000

elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334

elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334

elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400

したがって、概要と比較して：

$.easing.easeInQuad = function (x, t, b, c, d) {...}

推測できます：

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration

注意1：重要なことの1つは、elapsed（t）とduration（d）を同じ単位で表す必要があることです。たとえば、ここでは「秒」ですが、「ms」などでもかまいません。initialValueこれは（b）とamountOfChange（ ）にも当てはまりますc。つまり、次のようになります。

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration
         ^          ^              ^            ^
         +----------|----=unit=----|------------+
                    +----=unit=----+

NB2：@DamonJWのように、なぜここにあるのかわかりませんx。これはペナーの方程式には現れず、結果として使用されていないようです。常に彼を次のように設定しましょう。null

于 2012-08-04T12:30:26.707 に答える
5

t：現在の時刻、b：開始値、c：開始値から終了値への変更、d：期間。

仕組みは次のとおりです。http：//james.padolsey.com/demos/jquery/easing/（CSSプロパティが変更されたときを表す曲線）。

これが私がいくつかのばかげた緩和を実装する方法です：http ：//www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm （数学は私の強いスーツではありません）

これらのいずれかのように拡張します：http ：//code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js？spec = svn29＆r = 29-十分です！

于 2011-05-06T20:15:09.060 に答える
0

このプラグインは、最も一般的なイージング機能を実装しています：http: //gsgd.co.uk/sandbox/jquery/easing/

于 2011-05-06T20:40:07.897 に答える
0

1.11jqueryコードを調べました。xパラメータは、初期時間値とは関係なく、「パーセント」を意味するようです。したがって、xは常に（0 <= x <= 1）（抽象係数を意味します）であり、tはx * d（経過時間を意味します）です。

于 2014-09-02T15:21:38.290 に答える