MOVARO

Appearance

ALPHA

Inertia Expression ​

마지막 키프레임 이후에도 관성에 의해 서서히 감속하며 움직이는 효과입니다.

Preview ​

마지막 키프레임 이후에도 관성으로 계속 미끄러지다가 서서히 멈추는 효과입니다.

키프레임
관성으로 미끄러짐

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

Code ​

javascript
// Inertia Expression
// 마지막 키프레임 이후 관성으로 서서히 감속

friction = 0.7;   // 마찰 계수 (0~1)

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

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

  // 지수 감쇠로 관성 표현
  value + v * (1 - Math.exp(-t / friction)) * friction;
} else {
  value;
}

Alternative Code ​

단순 버전 ​

javascript
// 더 단순한 관성 표현
decay = 0.5;

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);
  value + v * t * Math.exp(-decay * t * 3);
} else {
  value;
}

Parameters ​

파라미터기본값설명
friction0.7마찰 계수. 값이 클수록 더 멀리 미끄러집니다.
decay0.5감쇠율. 값이 클수록 빨리 멈춥니다.

Examples ​

미끄러운 표면 (Slippery) ​

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

높은 마찰 계수로 오래 미끄러지다가 멈춥니다.

javascript
friction = 1.2;

거친 표면 (Rough) ​

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

낮은 마찰 계수로 빠르게 감속하여 멈춥니다.

javascript
friction = 0.3;

중간 마찰 ​

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

일반적인 감속으로 자연스럽게 멈춥니다.

javascript
friction = 0.7;

Use Cases ​

슬라이더/캐러셀 ​

손가락으로 스와이프 후 관성으로 미끄러지다가 멈추는 효과

스크롤 애니메이션 ​

스크롤이 끝난 후 서서히 감속하는 자연스러운 움직임

던지기 모션 ​

객체를 던졌을 때 공기 저항으로 서서히 느려지는 표현

Tips ​

자연스러운 감속

관성 효과는 갑자기 멈추는 대신 서서히 감속하여 더 현실적인 느낌을 줍니다.

friction 값 조절

  • friction < 0.5: 빠르게 멈춤 (거친 표면)
  • friction = 0.7: 일반적인 감속
  • friction > 1.0: 오래 미끄러짐 (매끄러운 표면)

무한 이동 주의

friction 값이 너무 크면 객체가 화면 밖으로 나갈 수 있습니다.