アニメーションでよくある加減速処理の計算に関して。

ネットを調べても、妙に省略したり、まどろっこしく書いたり、引数がやたら多かったりとわかりにくかったのでまとめておく。

最初遅くて徐々に加速していくタイプ

このような計算式になる。

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 下駄を履かせている。