Curves & interpolation · 9 / 10

Easing / Back / Bounce / Elastic

時間の進み方を変えて溜めや弾みを付ける。

Compare in motion

Interactive demo

ボタンの移動

Synchronized comparison

AReference

等速で移動する

BEasing / Back / Bounce / Elastic100%

同じ軌道でも時間の手触りが変わる

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

例: ボタンの移動

1. Start
静止したボタン
2. Change
溜めや弾みを付けて進む
3. Result
行き過ぎて戻り停止

同じ軌道でも時間の手触りが変わる。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

How it works

1. Input
時間の進行率
2. Process
進行率を変形
3. Result
溜め・跳ね返り

A schematic of Easing / Back / Bounce / Elastic. It shows the relationship between input, process, and result; exact values and rendering depend on the implementation.

Compare in motion

ボタンの移動

How it works

Further reading