Curves & interpolation · 2 / 10

Bézier Curve

制御点を動かして軌跡やUIの曲がり方を調整する。

Compare in motion

Interactive demo

Synchronized comparison

AReference

直線移動

BBézier Curve100%

ハンドルで調整できる軌跡になる

Loading demo…

Speed

Time1.20 / 8.00 sB · effect amount100%

Scrub to pause and inspect. At 0%, B matches A; at 100%, B shows the effect. The scene repeats every 8 seconds.

Look for: 制御点に引かれて進む → 終点へ曲がって到着。

A small visual example of a game use case. Games combine these techniques with assets and other effects.

Read the storyboard

例: UIの移動

ハンドルで調整できる軌跡になる。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

A schematic of Bézier Curve. It shows the relationship between input, process, and result; exact values and rendering depend on the implementation.