timeline 없이 필요한 최소 모션 수학

editor motion 대부분은 거대한 timeline engine이 없어도 됩니다. 작은 보간 함수 몇 개로 충분한 경우가 많습니다.

delta time 기반 damping 코드

프레임 속도에 따라 움직임이 달라지지 않도록 delta time을 사용합니다.

function damp(current, target, smoothing, dt) {
  const t = 1 - Math.exp(-smoothing * dt);
  return current + (target - current) * t;
}

function dampPoint(current, target, smoothing, dt) {
  return {
    x: damp(current.x, target.x, smoothing, dt),
    y: damp(current.y, target.y, smoothing, dt)
  };
}

작은 함수들

const lerp = (a, b, t) => a + (b - a) * t;
const clamp01 = (t) => Math.max(0, Math.min(1, t));

정해진 시간 안에서 바꾸면 easing, 목표를 따라가면 damping에 가깝습니다.

easing은 duration 기반 UI에 쓴다

function easeOutCubic(t) {
  const clamped = clamp01(t);
  return 1 - Math.pow(1 - clamped, 3);
}

function timedValue(from, to, startedAt, duration, now) {
  const t = (now - startedAt) / duration;
  return lerp(from, to, easeOutCubic(t));
}

function guideFade(animation, now) {
  return 1 - easeOutCubic((now - animation.startedAt) / animation.duration);
}

damping은 camera처럼 계속 목표를 따라가는 값에 좋고, easing은 guide fade처럼 시작과 끝이 명확한 값에 좋습니다. 두 용도를 섞지 않으면 모션 코드를 작게 유지할 수 있습니다.

오늘의 핵심

모션 수학은 작게 시작합니다. delta time을 고려하고, editor 조작을 늦추지 않는 것이 기준입니다.