Bouncing Expression

키프레임 애니메이션 후에 자연스러운 탄성 바운스 효과를 추가하는 익스프레션입니다.

Preview

키프레임 애니메이션이 끝난 후, 목표 값을 중심으로 감쇠 진동하는 효과입니다.

Position

Scale

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

Code

Position, Scale, Rotation 등 다양한 속성에 적용할 수 있습니다.

// Bouncing Expression
// 키프레임 후 탄성 바운스 효과

amp = 25;       // 오버슈트 크기 (픽셀 또는 %)
freq = 2.5;     // 진동 속도
decay = 3.0;    // 감쇠 속도

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

if (n > 0) {
  t = time - key(n).time;
  // 키프레임 종료 후 목표값 기준으로 바운스
  value + amp * Math.cos(freq * t * 2 * Math.PI) / Math.exp(decay * t);
} else {
  value;
}

Parameters

파라미터	기본값	설명
amp	25	첫 오버슈트 크기 (Position: 픽셀, Scale: %).
freq	2.5	진동 속도. 값이 클수록 빠르게 흔들립니다.
decay	3.0	감쇠 속도. 값이 클수록 빨리 안정됩니다.

How to Use

1. 키프레임 설정

원하는 속성(Position, Scale 등)에 최소 2개의 키프레임을 설정합니다.

2. 익스프레션 적용

• 속성 옆의 스톱워치를 Alt(Option) + 클릭
• 또는 속성 선택 후 애니메이션 > 표현식 추가

3. 코드 입력

위의 코드를 복사하여 붙여넣습니다.

4. 값 조절

amp, freq, decay 값을 조절하여 원하는 느낌을 만듭니다.

Examples

부드러운 바운스 (Soft Bounce)

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

낮은 진폭, 빠른 감쇠로 부드럽게 안정됩니다.

amp = 0.05;
freq = 1.5;
decay = 3.0;

강한 바운스 (Hard Bounce)

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

높은 진폭, 빠른 주파수로 여러 번 강하게 튕깁니다.

amp = 0.15;
freq = 3.0;
decay = 1.5;

느린 바운스 (Slow Bounce)

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

느린 주파수, 느린 감쇠로 천천히 오래 튕깁니다.

amp = 0.1;
freq = 1.0;
decay = 1.0;

Tips

Easy Ease 권장

키프레임에 **Easy Ease (F9)**를 적용하면 프리뷰처럼 자연스러운 바운스가 나옵니다. Linear보다 훨씬 부드러운 결과를 얻을 수 있습니다.

amp 값 조절

• Scale: amp = 20~30 (20~30% 오버슈트)
• Position: amp = 30~50 (픽셀 단위)
• Rotation: amp = 10~20 (도 단위)

주의사항

이 익스프레션은 키프레임이 있어야 작동합니다. 키프레임이 없으면 원래 값이 그대로 유지됩니다.