jQueryのアニメーション関数学習record_jquery

私は長い間 jQuery animate の実装に非常に興味がありましたが、少し前まで非常に忙しく、数日前の端午節の休暇まで勉強する時間がありませんでした。

jQuery.animate の各アニメーション遷移効果はイージング関数を通じて実現されます。 jQuery1.4.2 には、このような関数が 2 つプリセットされています:

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

パラメータ名から、firstNum が初期値であることが漠然と推測できます。数学が得意であれば、一次関数は直線方程式であることがわかります。物理が得意であれば、それは等速運動の変位方程式であることがわかります（数学と物理は苦手ですが、別の人が思い出させてくれた……）。次に、diff と p は速度と時間です。

jQuery.animate のプロトタイプをもう一度見てください:

アニメーション: function( prop、speed、easing、callback )

各パラメータの説明は次のとおりです:

prop: スタイル プロパティとその値をアニメーション プロパティと最終値として含むセット。
速度: アニメーションの長さ。
イージング: 使用する消去エフェクトの名前。
callback: アニメーションが完了したときに実行される関数。

要素の現在のスタイル値 (firstNum) を取得できます。アニメーション期間 (p) はduration、最終的なスタイル値は prop です。理論的には、アニメーションの速度 (diff) を計算できます。ただし、これには計算を実行するための別の関数が必ず必要になります。これは明らかに賢明ではありません。イージング関数を呼び出すための関連コード (jQuery.fx.prototype.step にあります) を見てみましょう:

var t = now();
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

p パラメータの値は this.state の値でもあることがわかります。コンテキストから、実際にはアニメーションの時間の進行であることがわかります。 firstNum と diff のパラメータ値はハードコードされており、それぞれ 0 と 1 です。これで、イージング関数の秘密が完全に明らかになりました。p、firstNum、および diff はすべて、実際の値ではなくパーセンテージです。 diff の値は 1 です。これは、アニメーションが 1 倍の速度で実行されることを意味します。変位の進行状況を計算した後、現在の変位値は「初期値 (最終値 - 初期値) × 進行状況」で計算できます。

this.now = this.start ((this.end - this.start) * this.pos);

setIntervalを使用して、現在時刻と初期時刻の差がアニメーション期間を超えるまで、一定時間(jQueryでは13ms)ごとにディスプレイスメント操作を実行します。これがjQuery.animateの実行プロセスです。

従来の考え方では、setIntervalを用いて、ある値をある時刻にある値ずつ、限界値に達するまで増加させるというアニメーションの実装となります。これに関する主な問題は、ブラウザごとに実行速度が異なるため、一般に IE の方が遅く、Firefox の方が速いというアニメーション速度の違いが生じることです。 jQuery.animate は現在時刻に基づいてディスプレイスメント値を決定します。そのため、ある瞬間のディスプレイスメント値は常に固定されており、アニメーション速度に違いはありません。