Remotion 애니메이션 — spring()과 interpolate()로 모션 만들기
물리 기반 스프링과 보간 함수로 자연스러운 비디오 애니메이션 구현
Remotion에서 애니메이션은 프레임 번호를 입력으로, 스타일 값을 출력으로 하는 순수 함수입니다.
interpolate(frame, inputRange, outputRange): 가장 기본적인 애니메이션 도구입니다. 프레임 0~30을 투명도 0~1로 매핑하면 페이드인, 위치 -100~0으로 매핑하면 슬라이드인이 됩니다. extrapolateLeft/extrapolateRight 옵션으로 범위 밖 동작(clamp, extend 등)을 제어합니다.
spring({frame, fps, config}): 물리 기반 스프링 시뮬레이션입니다. mass(질량), damping(감쇠), stiffness(강성)로 모션 느낌을 조절합니다. 0에서 시작해 1로 수렴하는 값을 반환하므로, interpolate와 조합하여 "spring으로 바운스하면서 들어오는 텍스트" 같은 표현이 가능합니다.
핵심은 이 모든 것이 결정적(deterministic)이라는 점입니다. 같은 프레임 번호를 넣으면 항상 같은 결과가 나오므로, 렌더링 결과가 예측 가능하고 재현 가능합니다.
동작 흐름
useCurrentFrame()으로 현재 프레임 번호를 가져옴
interpolate(frame, [0, 30], [0, 1])로 프레임 범위를 값 범위로 매핑
spring({frame, fps: 30, config: {damping: 10}})로 물리 기반 이징 값 생성
spring 값을 interpolate에 넣어 최종 스타일 값 계산: scale, translateY 등
style={{ opacity, transform: `translateY(${y}px) scale(${s})` }}로 React 컴포넌트에 적용
장점
- ✓ 결정적(deterministic): 같은 프레임 → 같은 결과, 렌더링 재현성 보장
- ✓ spring config 조절만으로 다양한 모션 느낌 (탄성, 무거움, 빠름 등) 표현
- ✓ CSS 키프레임과 달리 프레임 정밀도의 완전한 제어
단점
- ✗ 복잡한 모션은 spring + interpolate 체이닝이 깊어져 코드 가독성 저하
- ✗ After Effects의 그래프 에디터 같은 시각적 이징 편집기가 없음