Overshoot Expression

애니메이션이 목표 지점을 살짝 넘어섰다가 돌아오는 자연스러운 오버슈트 효과입니다.

Preview

목표 지점을 넘어섰다가 돌아오는 효과입니다. Elastic과 달리 한 방향으로 오버슈트 후 감쇠됩니다.

Position

Scale

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Code

// Overshoot Expression
// 목표 지점을 넘어섰다가 돌아오는 효과

amp = 0.08;       // 오버슈트 강도
freq = 3.0;       // 진동 빈도
decay = 6.0;      // 감쇠 속도

n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}

if (n > 0) {
  t = time - key(n).time;
  v = velocityAtTime(key(n).time - 0.001);

  // 오버슈트 공식 (cosine 사용으로 시작점이 1)
  overshoot = Math.cos(freq * t * 2 * Math.PI) / Math.exp(decay * t);
  value + v * amp * (overshoot - 1 / Math.exp(decay * t));
} else {
  value;
}

Parameters

파라미터	기본값	설명
amp	0.08	오버슈트의 크기. 값이 클수록 더 많이 넘어갑니다.
freq	3.0	돌아오는 진동 빈도
decay	6.0	안정화 속도. 값이 클수록 빨리 멈춥니다.

Examples

미세한 오버슈트 (Subtle)

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

낮은 진폭과 빠른 감쇠로 섬세하게 오버슈트합니다.

amp = 0.03;
freq = 2.0;
decay = 8.0;

과장된 오버슈트 (Exaggerated)

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

높은 진폭으로 크게 넘어섰다가 천천히 돌아옵니다.

amp = 0.15;
freq = 2.5;
decay = 4.0;

빠른 오버슈트 (Snappy)

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

빠른 주파수와 빠른 감쇠로 팝업 효과에 적합합니다.

amp = 0.06;
freq = 4.0;
decay = 10.0;

Use Cases

UI 요소 등장

버튼, 카드, 모달이 화면에 등장할 때 살짝 넘어섰다가 제자리로 돌아오는 효과

카메라 이동

카메라가 목표 지점에 도달할 때 약간의 오버슈트로 자연스러운 움직임 표현

텍스트 애니메이션

텍스트가 날아들어올 때 목표 위치를 살짝 지나쳤다가 정착

Tips

Bouncing과의 차이

• Bouncing: 바닥에 튕기는 느낌 (중력 방향)
• Overshoot: 목표를 넘어섰다가 돌아오는 느낌 (모든 방향)

자연스러운 모션

실제 물리적 움직임은 대부분 목표 지점에서 완전히 멈추지 않습니다. 미세한 오버슈트가 더 자연스러운 느낌을 줍니다.