Bézier curve (ベジェ曲線)
ベジェ曲線は、コンピューターグラフィックスとアニメーションで使用される、数学的に記述された曲線です。ベクター画像では、無期限に拡大できる滑らかな曲線をモデル化するために使用されます。
ベジェ曲線は、最低 2 つの制御点のセットによって定義されます。ウェブ関連のグラフィックスとアニメーションは、ふつう 4 つの制御点 P0, P1, P2, P3 を持つ曲線である 3 次ベジェ曲線を使用します。
2 次ベジェ曲線を描くために、 P0 から P1 までと P1 から P2 までの 2 本の補助線が描かれます。3 本目の補助線は、1 本目の補助線上を徐々に移動する点を始点、2 本目の補助線上を徐々に移動する点を終点として描画されます。 この 3 本目の補助線上に、始点から終点まで徐々に移動する点が描かれます。 この点が描く曲線がベジェ曲線です。下記の図は、曲線の作成方法を示すアニメーションです。
関連情報
- ベジェ曲線(ウィキペディア)
- CSS の 3 次ベジェイージング関数
keySplines
SVG 属性