jquery.js のアニメーションコードの解読 ( 10 ) 番外編 easing関数解読

easing 関数＜解読＞

解読とは大袈裟すぎるかもしれませんが、一見複雑に見える easing 関数式ですが、実は中学生程度の関数の知識があれば十分理解できるものであることを、恥ずかしながら最近納得したばかりなのです。

そこで、easing 関数が実は簡単な代数式であることを改めて整理しておこうと思います。それも中学校で倣う関数の形式に、表現し直してみます。

対象とする easing 関数は jquery.js で定義されている linear 及び swing の他、George Smith 氏による 30 種類の easing 関数です。

以下の表における大前提

1. 数値の正規化

   大前提として、jquery.js における正規化を踏まえるので、easing 代数式の文字の意味は次のようになります。

   t: current time ：これは経過時間ですが、jquery.js においては、t を d で割った経過時間推移率とでも呼ぶべき値が t に代入され、それがグラフの横軸変数値となります。

   b: begInnIng value ： 初期値は jquery.js では常に 0 です。b = 0

   c: change In value ： 変動値は jquery.js では常に 1 です。c = 1

   d: duration ： 継続時間ですが、関数式の中には直接登場することは殆どありません。

2. easeIn と easeOut の関係

   x → 1－x, y → 1 - y へと座標変換を施すことによって、easeIn 関数から自動的・反射的に easeOut 関数が導き出せます。

3. easeInOut 関数の作り方

   この関数は、経過時間推移率が 0.5 以下の場合には easeIn 関数を、それ以上の時には easeOut 関数を適用するだけのことです。

4. 解読は easeIn だけで十分

   つまり、easeIn 関数が分かれば、座標変換と場合分けによって、簡単に easeOut 関数とeaseInOut 関数が出来てしまうので、easeIn 関数だけ＜解読＞すれば必要にして十分です。

見慣れた関数式への変換

以下の式において、x は時間推移率（ t/d ）を、y は easing 関数値を表しています。b,c,t,d は easing 関数で定められている通りの定義です。上に述べた事を踏まえて b = 0, c = 1, t/=d → x としました。

関数名	Javascript関数式	見慣れた関数式
linear	b + c * t	y = x
swing	((-Math.cos(t * Math.PI)/2) + 0.5) * c + b	y = -( cos(x * π) ) / 2 + 0.5
easeInQuad	c*(t/=d)*t + b	y = x 2
easeInCubic	c*(t/=d)*t*t + b	y = x 3
easeInQuart	c*(t/=d)*t*t*t + b	y = x 4
easeInQuint	c*(t/=d)*t*t*t*t + b	y = x 5
easeInSine	-c * Math.cos(t/d * (Math.PI/2)) + c + b	y = - cos(x * π/2) + 1
easeInExpo	(t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b	y = 2 10 * ( x-1 ), x が 0 の時は y = 0
easeInCirq	-c * (Math.sqrt(1 - (t/=d)*t) - 1) + b	y = - (1 - x * x)0.5 + 1
easeInBack	if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b;	y = x * x * ( 2.70158 * x - 1.70158 )
easeOutBounce	((t/=d) < (1/2.75)) 　c*(7.5625*t*t) + b; (t < (2/2.75)) 　c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; (t < (2.5/2.75)) 　c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; else 　c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;	・x < 1/2.75 → 7.5625* x * x ・x < 2/2.75 → 7.5625* (x-1.5/2.75) * (x-1.5/2.75) +0.75 ・x < 2.5/2.75 → 7.5625* (x-2.25/2.75) * (x-2.25/2.75) +0.9375 ・x >= 2.5/2.75 → 7.5625* (x-2.625/2.75) * (x-2.625/2.75) +0.984375
easeInElastic	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-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;	作成中