ベジェ曲線
読み: べじぇきょくせん
制御点によって形状が決まる滑らかな数学的曲線。フォント、ベクターグラフィックス、アニメーションの基盤技術。
ベジェ曲線 (Bézier Curve) は、制御点の位置によって形状が決定される滑らかなパラメトリック曲線である。1962 年にフランスの自動車エンジニア Pierre Bézier がルノーの車体設計のために考案した。現在ではフォント (TrueType, OpenType)、ベクターグラフィックス (SVG, Illustrator)、CSS アニメーション、ゲームエンジンなど、あらゆるデジタルデザインの基盤技術となっている。
次数による分類は以下のとおりである。
- 1 次 (線形): 2 点間の直線。制御点なし
- 2 次 (Quadratic): 始点・制御点 1 つ・終点の 3 点で定義。TrueType フォントで使用。SVG の
Qコマンド - 3 次 (Cubic): 始点・制御点 2 つ・終点の 4 点で定義。最も汎用的。PostScript, OpenType, SVG の
Cコマンドで使用
3 次ベジェ曲線の数学的定義は以下のとおりである。
B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃ (0 ≤ t ≤ 1)
ここで P₀ は始点、P₁・ P₂ は制御点、P₃ は終点である。パラメータ t を 0 から 1 まで変化させると曲線上の点が得られる。
CSS アニメーションでは cubic-bezier() 関数でイージングカーブを定義する。cubic-bezier(0.25, 0.1, 0.25, 1.0) は ease に相当し、開始時にゆっくり加速して終了時に減速する動きを表現する。Chrome DevTools のイージングエディタで視覚的に調整可能である。
ベクター描画ツールではペンツールでベジェ曲線を操作する。アンカーポイントをクリックで配置し、ドラッグでハンドル (制御点) の方向と長さを調整して曲率を制御する。