jQueryのanimate関数学習レコード
1921 ワード
ずっと前からjQuery animateの実現に興味を持っていましたが、この間は忙しくて、先日の端午の節句の休みまで研究する時間がありました.
jQuery.animateの各アニメーション遷移効果はeasing関数によって実現されます.jQuery1.4.2には、次の2つの関数がプリセットされています.
パラメータ名からfirstNumが初期値であることがかすかに推測できる.もしあなたの数学が上手であれば、linear関数は直線方程式であることがわかります.もしあなたの物理学が比較的に良いならば、あなたはそれが均一な運動の変位方程式であることを発見することができます(私は数学と物理がすべてマスターしていないで、他の人が私に注意したのです......).ではdiffとpは速度と時間です.
jQueryを見てみましょうanimateのプロトタイプ:
animate: function( prop, speed, easing, callback )
各パラメータの説明は以下の通りです.
prop:アニメーション属性と最終値としてのスタイル属性とその値のセットが含まれます.speed:アニメーション時間が長い.easing:使用する消去効果の名前.callback:アニメーションが完了したときに実行される関数.
要素の現在のスタイル値(firstNum)は取得できます.アニメーションの時間(p)はdurationで、最終的なスタイル値はpropです.理論的には、アニメーション速度(diff)は算出できる.しかし、これは必然的に別の関数で演算する必要があります.このようにするのは明らかに賢明ではない.easing関数を呼び出す関連コード(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で書かれています.これでeasing関数の秘密は完全に解き放たれ,p,firstNum,diffはいずれも実際の数値ではなくパーセンテージであり,easing関数の戻り値,すなわち変位の進度である.diffの値は1、つまり1倍の速度でアニメーションを実行します.シフト進捗を算出後、「初期値+(最終値-初期値)×進行状況(Progress)は、現在の変位値を算出します.
this.now = this.start + ((this.end - this.start) * this.pos);
setIntervalで一定時間(jQueryでは13 ms)ごとにシフト演算を行い、現在の時間と初期時間の差がアニメーション時間よりも長くなるまで、これがjQueryである.animateの実行プロセス.
従来の考え方では、setIntervalによって一定時間ごとに特定の値を増加させ、この値が制限値に達するまでアニメートされます.このような主な問題は、ブラウザによって実行速度が異なり、アニメーション速度に差があり、一般的にIEでは遅く、Firefoxでは速いということです.そしてjQuery.animateは現在の時間で位置決めシフト値を決定し、ある時点のシフト値は常に固定されているため、アニメーション速度に差はありません.
jQuery.animateの各アニメーション遷移効果はeasing関数によって実現されます.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が初期値であることがかすかに推測できる.もしあなたの数学が上手であれば、linear関数は直線方程式であることがわかります.もしあなたの物理学が比較的に良いならば、あなたはそれが均一な運動の変位方程式であることを発見することができます(私は数学と物理がすべてマスターしていないで、他の人が私に注意したのです......).ではdiffとpは速度と時間です.
jQueryを見てみましょうanimateのプロトタイプ:
animate: function( prop, speed, easing, callback )
各パラメータの説明は以下の通りです.
prop:アニメーション属性と最終値としてのスタイル属性とその値のセットが含まれます.speed:アニメーション時間が長い.easing:使用する消去効果の名前.callback:アニメーションが完了したときに実行される関数.
要素の現在のスタイル値(firstNum)は取得できます.アニメーションの時間(p)はdurationで、最終的なスタイル値はpropです.理論的には、アニメーション速度(diff)は算出できる.しかし、これは必然的に別の関数で演算する必要があります.このようにするのは明らかに賢明ではない.easing関数を呼び出す関連コード(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で書かれています.これでeasing関数の秘密は完全に解き放たれ,p,firstNum,diffはいずれも実際の数値ではなくパーセンテージであり,easing関数の戻り値,すなわち変位の進度である.diffの値は1、つまり1倍の速度でアニメーションを実行します.シフト進捗を算出後、「初期値+(最終値-初期値)×進行状況(Progress)は、現在の変位値を算出します.
this.now = this.start + ((this.end - this.start) * this.pos);
setIntervalで一定時間(jQueryでは13 ms)ごとにシフト演算を行い、現在の時間と初期時間の差がアニメーション時間よりも長くなるまで、これがjQueryである.animateの実行プロセス.
従来の考え方では、setIntervalによって一定時間ごとに特定の値を増加させ、この値が制限値に達するまでアニメートされます.このような主な問題は、ブラウザによって実行速度が異なり、アニメーション速度に差があり、一般的にIEでは遅く、Firefoxでは速いということです.そしてjQuery.animateは現在の時間で位置決めシフト値を決定し、ある時点のシフト値は常に固定されているため、アニメーション速度に差はありません.