핵심 개념
타이밍과 이징
지속 시간, 지연, 이징, 반복 토큰과 STRX가 값을 정하는 순서를 알아봐요.
타이밍 토큰은 같은 쉼표 그룹 안의 프리셋, 키프레임, exit:, transition-* 토큰에 적용돼요.
<Strx.View animate="slide-up duration-500 delay-150 ease-in-out" />타이밍 토큰
| 토큰 | 의미 |
|---|---|
duration-300 | 지속 시간(ms)이에요. 우선순위: 토큰이나 객체 → 프리셋 기본값 → Strx.Provider 지속 시간 → 300ms |
delay-100 | 애니메이션이 시작하기 전에 기다리는 시간(ms)이에요. |
damping-12 | 스프링 감쇠(damping)예요. 기본값은 10이에요. |
stiffness-180 | 스프링 강성(stiffness)이에요. 기본값은 100이에요. |
mass-1 | 스프링 질량(mass)이에요. 기본값은 1이에요. |
play-3 play-infinite | 전체 재생 횟수예요. 계속 반복하려면 play-infinite를 써요. |
repeat-3 repeat-infinite | play-*와 같아요. 호환성을 위해 남겨 뒀어요. (이전 방식) |
지속 시간
duration-*는 밀리초 단위예요. STRX는 아래 순서대로 살펴보고, 가장 먼저 정해진 값을 써요.
duration-*토큰, 또는 객체의duration- 프리셋 기본값 (예:
slide-up은 320ms) Strx.Provider의motionPreset.duration- 300ms
1<Strx.Provider motionPreset={{ duration: 200 }}>2 <Strx.View animate="fade-in" /> {/* 300ms: fade-in 기본값 */}3 <Strx.View animate="from:opacity-0" /> {/* 200ms: Provider 값 */}4 <Strx.View animate="fade-in duration-600" /> {/* 600ms: 토큰 값 */}5</Strx.Provider>duration-*는 같은 그룹 안의 layout-linear, layout-fade 지속 시간도 함께 정해요.
지연
delay-*만큼 기다렸다가 애니메이션을 시작해요. 반복할 때마다 기다리지 않고, 처음 한 번만 기다려요.
<Strx.View animate="fade-in, slide-up delay-200" />지연을 쓰면 순서대로 움직이는 장면을 손쉽게 만들 수 있어요. 리스트라면 Strx.Timeline이 간격을 알아서 계산해 줘요.
이징
이징 토큰은 타이밍 애니메이션의 속도 곡선을 정해요. 따로 적지 않으면 Provider의 motionPreset.easing을, 그것도 없으면 ease-out을 써요.
| 토큰 | 곡선 |
|---|---|
linear | 일정한 속도로 움직여요. |
ease | 부드럽게 시작하고 부드럽게 멈춰요(smoothstep). |
ease-in | 천천히 시작해서 빨라져요(cubic). |
ease-out | 빠르게 시작해서 천천히 멈춰요(cubic). easing을 정하지 않으면 이 값을 써요. |
ease-in-out | 천천히 시작하고 천천히 멈춰요(cubic). |
spring | 숫자 값을 스프링으로 움직여요. |
이징은 스프링 애니메이션에는 적용되지 않아요. 스프링은 스프링 문서를 확인해 주세요.
반복하기
play-*는 모두 몇 번 재생할지 정해요. play-3이면 세 번 재생해요. play-infinite는 컴포넌트가 사라지거나 애니메이션이 바뀔 때까지 계속 반복해요. repeat-*는 같은 기능의 예전 이름이에요.
<Strx.View animate="from:opacity-40 to:opacity-100 duration-800 ease-in-out play-infinite" />매번 from 모습에서 다시 시작해요. 여러 컴포넌트로 된 장면 전체를 반복하려면 Strx.Timeline의 playCount를 써 보세요.
동작 줄이기
동작 줄이기가 켜져 있으면 지속 시간과 지연은 0이 되고 반복은 한 번만 해요. 그래서 화면이 곧바로 마지막 모습으로 바뀌어요. 자세한 내용은 접근성에서 확인해 보세요.
앱 전체 기본값
Provider에서 앱 전체 기본값을 정할 수 있어요. 토큰에 적은 값이 항상 먼저예요.
<Strx.Provider motionPreset={{ duration: 260, easing: "ease-out" }}>
<App />
</Strx.Provider>