cubic-bezierは以下の通常の3次ベジェ曲線に対して、以下の制約を加えたものです。
- 始点と終点を(0,0) (1,1)に固定
- 各制御点のX値の範囲は0~1
詳しくは以下
https://developer.mozilla.org/ja/docs/Web/CSS/timing-function
上記性質によって、X,Yの媒介変数表示は以下の通りとなります。
X(t) = t^3 + 3 t^2 (1−t) x_3 + 3 t^(1−t) 2 x_2
Y(t) = t^3 + 3 t^2 (1−t) y_3 + 3 t^(1−t) 2 y_2
特に、x_2 , x_3 は0~1の範囲に限定されます。
また、始点と終点が0~1の範囲に収まっている為、
媒介変数tも0~1の範囲に限定されます。
ここから、X(t)の適当なグラフをみると、単調増加関数の性質が示されています。
もしX(t)がt=0~1において単調増加関数であるならば、2分法を用いて数値解析が可能となります。
X(t)が全域で単調増加関数であることを示すには、
X(t)の導関数の値が、t=0~1で0以上であることを示せればよいです。
めんどくさいので、以下の通りに制御点のx値を置き換えます。
x_2 = a , x_3 = b
導関数から、判別式を算出します。
X'(t) = 9 a t^2 - 12 a t + 3 a - 9 b t^2 + 6 b t + 3 t^2
(3で割って整理) → ( (3 t^2 + 1) a + 2 t b + t^2 ) - ( 4 t a + 3 t^2 b )
b側の値は以下の通り。
(2 t)b - (3 t^2)b
- b = 0
- t = 0~1 : 0
- 0 < b
- t = 0 : 0
- t > 2/3 : プラス
- t >= 1 : マイナス
a側の値は以下の通り。
(3 t^2 +1)a - (4 t)a
- a = 0
- t = 0~1 : 0
- 0 < a
- t = 0 : 0
- t > 1/3 : プラス
- t > 1 : マイナス
- t = 1 : 0
a.b の係数は共に、最終的な係数に掛けられる為、マイナス側が一番大きくなるのは、b=1 , a=1 となる事が分かります。
よって、 a=1 , b=1 として計算した結果が常にプラス側であれば単調増加関数であることが示せます。
判別式 = t^2 - 2 t + 1 ≧ 0
⇒ (t-1)^2 ≧ 0
これは下に凸の放物線で、t=1の時、0となる所が最下点となります。
よって、X(t)の導関数は、t=0~1において常に+側が支配的であることが分かりました。
これによりX(t)はt=0~1内に置いて、単調増加関数であることが示されました。
よって、cubic-bezierにおいて、X(t)は単調増加関数の為、2分法を用いた導出が可能となります。
また、この方法は、X(t)の逆関数を求める方法より計算コストが低くなります。
X(t)の逆関数は指数関数が複数入り、コンピューターにおける指数関数の計算コストが、2分法の探索より高コストとなります。
# 結論
性能面、実装の容易性の観点から、cubic-bezierは2分法を用いて実装するのが合理的と分かりました。
