【ITニュース解説】Bezier Curve as Easing Function in C++

ソフトウェア開発において、ユーザーインターフェースやゲームなどで見られるアニメーションは、単に要素を動かすだけでなく、その動き方に工夫を凝らすことで、より自然で心地よい体験を提供できる。例えば、画面上のオブジェクトが突然停止したり、急発進したりすると、ユーザーは不自然さを感じるだろう。このような動きの不自然さを解消し、滑らかで人間が自然だと感じるような加速・減速の表現を実現するために、「イージング関数」が利用される。

イージング関数は、アニメーションの時間的な変化の度合いを制御する数学的な関数だ。通常、アニメーションの開始から終了までの時間を0から1の間の数値（正規化された時間）として表現し、イージング関数はその入力された時間に応じて、アニメーションの進行度合いを示す出力値（これも0から1の間）を返す。線形的な動き、つまり常に一定の速度で変化する動きは、グラフにすると直線になるが、イージング関数はこれを曲線で表現することで、「ゆっくり始まり、速く進み、またゆっくり終わる」といった、緩急のある動きを作り出すことができる。これにより、まるで物理法則に従って動いているかのような、よりリアルで説得力のあるアニメーションが実現するのだ。

このイージング関数を実装する上で非常に強力なツールとなるのが、「ベジェ曲線」だ。ベジェ曲線は、コンピュータグラフィックスやデザインの分野で、滑らかな曲線を描くためによく使われている。イラストレーションソフトウェアでペンツールを使って線を引く際、アンカーポイント（制御点）とその「ハンドル」を操作して曲線の形状を調整した経験がある人もいるかもしれない。このアンカーポイントとハンドルこそが、ベジェ曲線の形状を決定する「制御点」に相当する。ベジェ曲線は、これらの制御点の位置によって、多種多様な滑らかな曲線を生成できるという特徴を持つ。

イージング関数としてベジェ曲線を利用する場合、特に「三次ベジェ曲線」がよく使われる。三次ベジェ曲線は、4つの制御点によって定義される。これらは通常、P0, P1, P2, P3 と呼ばれる。イージング関数の文脈では、P0 をアニメーションの開始点（時間0、進行度0）、P3 をアニメーションの終了点（時間1、進行度1）に固定することが一般的だ。つまり、P0 は座標 (0, 0)、P3 は (1, 1) に設定される。残りの2つの制御点 P1 と P2 が、イージングの加速・減速のパターンを決定する「ハンドル」のような役割を果たす。これらの制御点のX座標とY座標を調整することで、アニメーションがどのように加速し、減速するかを非常に柔軟に、かつ直感的にデザインできるようになる。例えば、P1 をY軸方向に低く設定し、P2 をY軸方向に高く設定すると、最初ゆっくりと始まり、途中から急速に加速し、最後はまたゆっくりと停止するような動きになる。これはウェブブラウザのCSSアニメーションでも標準的に採用されている仕組みであり、その表現力の高さが広く認知されている。

C++でベジェ曲線をイージング関数として実装するには、まず三次ベジェ曲線の数式を理解し、それをプログラムコードに落とし込む必要がある。三次ベジェ曲線の一般的な数式は、媒介変数 t (0から1の値) を用いて以下のように表される。

P(t) = (1-t)^3 * P0 + 3 * (1-t)^2 * t * P1 + 3 * (1-t) * t^2 * P2 + t^3 * P3

ここで P(t) は、時間 t における曲線上の点を示す。イージング関数としては、入力された正規化された時間 t をこの数式に代入し、曲線上の点のY座標を計算して返すことになる。P0とP3は(0,0)と(1,1)に固定されているため、この数式は最終的に、入力 t に対する出力 y を計算する関数となる。

具体的なC++での実装では、CubicBezier のようなクラスを定義し、そのクラスが2つの制御点 P1 と P2 の情報を保持するようにする。そして、eval(double t) といったメソッドを用意し、このメソッド内で上記の三次ベジェ曲線の数式を用いて計算を行う。eval メソッドは、入力された時間 t に対応するY座標を double 型で返す。例えば、P0.y=0.0, P1.y, P2.y, P3.y=1.0 を数式に適用すれば、y_val = (1-t)^3 * 0.0 + 3 * (1-t)^2 * t * P1.y + 3 * (1-t) * t^2 * P2.y + t^3 * 1.0 となる。この y_val が、時間 t におけるアニメーションの進行度合いを示す値として利用される。

実装上の考慮点としては、時間 t が必ず 0.0 から 1.0 の範囲に正規化されていることを確認する必要がある。また、浮動小数点数 (double型) を用いた計算になるため、計算誤差がごくわずかに発生する可能性もあるが、アニメーション用途ではほとんど問題にならない。この CubicBezier クラスを一度作成しておけば、異なる制御点 P1 と P2 を与えることで、さまざまなイージングパターンを簡単に生成し、プロジェクト内のあらゆるアニメーションで再利用できるようになる。これにより、開発者は複雑な数学的知識を毎回持ち出すことなく、高品質なアニメーション表現を少ない労力で実現できるのだ。ベジェ曲線を用いたイージング関数は、システムエンジニアがよりリッチでユーザーフレンドリーなアプリケーションを構築するための、強力なツールの一つと言えるだろう。