바운스 만들기
반복 감쇠 패턴 — 수동 키프레임으로 공이 튀는 리듬을 설계한다.
바운스는 오버슛의 확장판이다. '한 번 넘기고 돌아오기'가 아니라 여러 번 반복하며 점점 줄어드는 패턴이다. 로고 랜딩, 텍스트 등장, UI 요소 착지 등에서 활력과 장난기를 더해주는 클래식 레시피다.
바운스(Bounce)는 목표값에 도달한 뒤 점점 작아지는 진동을 반복하는 패턴이다. 현실의 공 튀기를 생각하면 된다 — 높이가 매번 줄어들고, 간격도 매번 짧아진다. 이 '감쇠 진동'이 바운스의 핵심이다.
| 바운스 횟수 | 키프레임 수 | 초과량 (목표값 대비) | 느낌 |
|---|---|---|---|
| 1회 (오버슛) | 3~4개 | ±5% | 살짝 탄성, 세련됨 |
| 2회 | 5~6개 | ±5% → ±2% | 경쾌, 활발 |
| 3회 이상 | 7개+ | ±5% → ±2% → ±0.5% | 만화적, 장난스러움 |
감쇠 비율: 매 바운스마다 진폭을 40~60%씩 줄이고, 시간 간격도 같은 비율로 줄인다. 예: 첫 오버슛 20px / 8프레임 → 두 번째 8px / 4프레임 → 세 번째 3px / 2프레임. 이 비율이 자연스러운 물리감을 만든다.
수동 키프레임 바운스의 장점은 완전한 제어다. 각 바운스의 크기, 타이밍, 이징을 개별적으로 조절할 수 있다. 단점은 시간이 오래 걸린다는 것. 빠른 작업이 필요하면 AE의 `bounceBack` 계열 표현식이나 Motion 같은 플러그인의 Bounce 프리셋을 쓸 수 있다.
Scale 바운스 실습: ① Scale 0% → 100% (6프레임, 급가속) ② 100% → 110% (3프레임) ③ 110% → 97% (3프레임) ④ 97% → 101% (2프레임) ⑤ 101% → 100% (2프레임). 모든 키프레임에 Bezier 적용. 재생하면 '통통' 튀는 로고 랜딩이 완성된다.
자연스러운 바운스에서는 매 반복마다 진폭과 시간 간격이 모두 줄어들어야 한다.