바운스 / 엘라스틱 / 스프링
물리 기반 이징 — 공이 튀고(bounce), 고무줄이 진동하고(elastic), 용수철이 흔들린다(spring).
기본 3종 이징(in/out/in-out)만으로는 표현할 수 없는 물리적 질감이 있다. 공의 탄성(bounce), 고무줄의 진동(elastic), 용수철의 감쇠(spring)는 모션에 촉감과 재미를 더한다. 특히 모바일 앱과 게임 UI에서 널리 사용된다.
기본 Cubic-Bezier는 단조로운 곡선만 표현할 수 있다. 바운스, 엘라스틱, 스프링은 목표값을 지나쳤다 되돌아오는 진동을 포함하므로, 일반 Bezier로는 불가능하고 별도의 수학 함수나 표현식(Expression)이 필요하다.
| 이징 | 동작 | 체감 | 사용 예시 |
|---|---|---|---|
| Bounce | 바닥에 부딪혀 여러 번 튀다 멈춤 | 통통 튀는 공 | 알림 배지 등장, 로고 낙하 |
| Elastic | 목표를 지나쳤다 앞뒤로 진동 | 고무줄, 젤리 | 모달 등장, 캐릭터 반응 |
| Spring | 감쇠하며 진동, 점차 안정 | 용수철, 흔들리는 카드 | iOS 스크롤 오버슈트, 드래그 앤 드롭 |
스프링의 3파라미터: ① Stiffness(강성) — 높을수록 빠르게 복원. ② Damping(감쇠) — 높을수록 진동 빨리 멈춤. ③ Mass(질량) — 높을수록 느리고 무겁게. iOS/Android의 스프링 애니메이션은 이 3개 값을 조절하여 '물리적으로 정확한' 모션을 만든다.
AE에서 바운스 표현식: `amp = 0.1; freq = 2; decay = 6; n = 0; if (numKeys > 0){ n = nearestKey(time).index; if (key(n).time > time){ n--; } } if (n == 0){ t = 0; } else { t = time - key(n).time; } if (n > 0){ v = velocityAtTime(key(n).time - thisComp.frameDuration/10); value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t); } else { value; }` — 이 표현식을 Position이나 Scale에 적용하면 바운스가 자동 생성된다.
스프링 애니메이션의 3가지 핵심 파라미터를 나열하시오.
Bounce, Elastic, Spring 이징은 모두 CSS의 cubic-bezier() 한 줄로 표현할 수 있다.