web-dev-qa-db-ja.com

jQueryイージング関数—変数の理解

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

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

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

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

javascriptjqueryanimationeasing-functions
25
qwertymk

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');
38
DamonJW

具体的な例、

初期値が1000であり、3sで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に設定しましょう

21
abernier

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 -良い足りる！

5
two7s_clash

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

0
Kirill Kharchenko

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

0
gblazex