アニメーションでよくある加減速処理の計算に関して。
ネットを調べても、妙に省略したり、まどろっこしく書いたり、引数がやたら多かったりとわかりにくかったのでまとめておく。
最初遅くて徐々に加速していくタイプ
このような計算式になる。
return Math.pow(t, a);
t は処理全体に対する経過時間の割合を示す。 全体の動作を 1000ms と決めていた場合に、800ms 経過した場合の t は 0.8 である。
a は変化の緩やかさを示す。1 だと加速せず、2, 3 となるにつれて初期の減速感、最後の加速感が上がる。
この計算式自体は 0 < Math.pow(t, a) < 1
の範囲を取るのでこれに対して、最大変化量を掛けて、初期値を足せば処理したい値になる。
最初速くて徐々に減速していくタイプ
このような計算式になる。
return 1 - Math.abs(Math.pow(t - 1, a);
中間地点が加速ゼロになっていて、そこへ向けて加減速ゼロ加減速するタイプ
if(t < 0.5){ return Math.pow(t * 2, a) / 2; }else{ return (1 - Math.abs(Math.pow(t * 2 - 1 - 1, a)) / 2 + 0.5; }
中間地点で切り替えて、それぞれの変化速度を倍にすることで値を得ることができる。 後半は途中から始まるので 0.5 下駄を履かせている。