Elastic Expression

키프레임 후에 고무줄처럼 늘어났다 줄어드는 탄성 효과를 추가하는 익스프레션입니다.

Preview

키프레임 후 고무줄처럼 양방향으로 진동하는 효과입니다. Bouncing과 달리 목표값을 기준으로 위아래로 진동합니다.

Scale

Position

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

Code

// Elastic Expression
// 고무줄 탄성 효과

amp = 0.1;        // 진폭
freq = 3.0;       // 주파수
decay = 5.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);

  // 탄성 공식
  elastic = Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
  value + v * amp * elastic;
} else {
  value;
}

Parameters

파라미터	기본값	설명
amp	0.1	탄성의 강도. 값이 클수록 더 많이 늘어납니다.
freq	3.0	진동 빈도. 값이 클수록 빠르게 진동합니다.
decay	5.0	감쇠 속도. 값이 클수록 빨리 안정됩니다.

Bouncing vs Elastic

특성	Bouncing	Elastic
느낌	공이 튀는 느낌	고무줄이 늘어나는 느낌
움직임	한 방향으로 튀어오름	양방향으로 진동
사용	Position, Rotation	Scale, Position

Examples

부드러운 탄성 (Soft Elastic)

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

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

amp = 0.05;
freq = 2.0;
decay = 4.0;

강한 탄성 (Hard Elastic)

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

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

amp = 0.15;
freq = 4.0;
decay = 3.0;

오래 지속되는 탄성 (Long Elastic)

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

느린 감쇠로 오랫동안 진동이 유지됩니다.

amp = 0.1;
freq = 2.5;
decay = 2.0;

Tips

Scale에 적용

Scale 속성에 적용하면 UI 요소가 등장할 때 탄력 있는 느낌을 줄 수 있습니다.

Easy Ease와 함께

키프레임에 Easy Ease를 적용하면 더 자연스러운 결과를 얻을 수 있습니다.

속도 중요

키프레임 사이의 속도가 빠를수록 탄성 효과가 더 강하게 나타납니다.