스타일 트랜지션
style이 바뀌면 지금 화면에 보이는 값에서 이어서 움직여요. 중간에 다시 바꿔도 튀지 않아요.
<Strx.View animate="transition-all duration-300"
style={{ width: on ? 200 : 120 }} />fade-inReact Native · Reanimated 4
React Native 애니메이션,
이제 토큰 한 줄로.
Tailwind로 스타일을 적듯, 등장·퇴장·스타일 트랜지션·레이아웃 모션을 컴포넌트에 바로 적어 보세요. STRX가 이 문자열을 UI 스레드에서 도는 Reanimated 애니메이션으로 바꿔 드려요.
fade-in
from:translate-y-12
layout-spring
duration-400
ease-out
exit:opacity-0
직접 해 보기
토큰을 입력하면 바로 움직여요.
미리보기는 라이브러리와 똑같은 토큰 데이터, 이징 곡선, 스프링 값으로 움직여요. 오타를 내면 개발할 때와 같은 수정 제안이 나타나요.
프리셋 · 그룹당 하나
키프레임 · 프리셋 값을 채널별로 덮어써요
지속 시간
지연
이징
<Strx.View
animate=""
/>다시 오신 걸 환영해요
계속하기
시작하기
세 단계면 첫 애니메이션이 완성돼요.
STRX는 Reanimated 위에서 동작해요. 그래서 Reanimated 설정에 Provider 하나만 더하면 준비가 끝나요.
-
01
Reanimated 4와 함께 설치하기
npm i react-native-strx@beta react-native-reanimated react-native-workletsExpo 앱은 Reanimated 패키지를
npx expo install로 설치해 주세요. Bare 앱은 Babel 플러그인 목록 맨 끝에react-native-worklets/plugin을 넣어 주세요. -
02
앱을 Provider로 감싸기
1import { Strx } from "react-native-strx";23<Strx.Provider motionPreset={{ duration: 300 }}>4 <App />5</Strx.Provider>기본 타이밍을 정하고, OS의 동작 줄이기 설정을 따르고, 이벤트 타임라인을 이어 줘요.
-
03
animate 추가하기
<Strx.View animate="fade-in from:translate-y-12 layout-spring"> <Strx.Text>Hello STRX</Strx.Text> </Strx.View>View, Text, Pressable, Image, ScrollView, TextInput, 그리고
createStrxComponent로 만든 컴포넌트까지, 모든 STRX 컴포넌트가 같은animateprop을 받아요.
문법
문장처럼 읽혀요.
토큰 하나는 한 가지 일만 해요. 그룹 안에서는 순서를 신경 쓰지 않아도 되고, 쉼표를 찍으면 타이밍을 따로 가진 새 그룹이 시작돼요.
fade-in프리셋
from:translate-y-12키프레임
exit:opacity-0퇴장
transition-colors스타일 트랜지션
layout-spring레이아웃
duration-400타이밍
ease-out이징
fade-in, slide-up duration-500
두 그룹이 함께 재생돼요. duration-500은 slide-up에만 적용돼요.
bounce spring damping-12
스프링으로 바꾸고, damping·stiffness·mass를 그 자리에서 바로 조절할 수 있어요.
from:opacity-0 to:opacity-100 play-infinite
맞는 프리셋이 없다면 키프레임을 직접 쓰고, play-*로 반복해 보세요.
등장 그 이상
어떤 모션이든, prop 하나로.
레이아웃
크기와 위치가 바뀌면 스프링처럼 자연스럽게 자리를 잡아요. 자식 컴포넌트도 그대로 물려받고, 토큰이 없는 컴포넌트에는 비용이 들지 않아요.
<Strx.View animate="layout-spring" layoutClip>타임라인
여러 대상을 동시에, 차례로, 또는 조금씩 시차를 두고 움직여요. stop()은 그 자리에서 멈추고, reverse()는 멈춘 곳에서부터 되감아요.
<Strx.Timeline playback="stagger" interval={100}>문서
STRX로 할 수 있는 모든 것.
페이지마다 기능 하나를 실시간 미리보기와 바로 복사해 쓸 수 있는 코드로 알려 드려요.
프리셋
기본 등장 프리셋 11개를 쓰거나, definePreset으로 직접 만들 수 있어요.
키프레임
from:·to: 유틸리티나 스타일 객체로 원하는 값을 직접 정해요.
타이밍과 이징
지속 시간, 지연, 이징, 반복을 토큰으로 정하고, 어떤 값이 먼저인지 알아봐요.
타이밍 →스프링
spring, damping-*, stiffness-*, mass-*로 물리 법칙을 따르는 모션을 만들어요.
퇴장 애니메이션
exit: 토큰으로 컴포넌트가 사라질 때의 모션을 정해요.
LayoutGroup
리스트처럼 한 영역 전체에 레이아웃 트랜지션을 한 번에 적용해요.
LayoutGroup →배열 재생
컴포넌트 하나에 여러 애니메이션을 동시에, 차례로, 시차를 두고 실행해요.
배열 재생 →useTimeline
play, reverse, stop, reset으로 원하는 순간에 애니메이션을 제어해요.
커스텀 컴포넌트
createStrxComponent로 어떤 컴포넌트에든 animate prop을 붙일 수 있어요.
동작 줄이기
OS 접근성 설정을 알아서 따르고, 필요하면 영역별로 직접 켜고 끌 수 있어요.
접근성 →디버깅
수정 제안이 담긴 개발 경고와, 기기 화면에 띄우는 디버그 오버레이를 제공해요.
디버깅 →토큰 레퍼런스
파서가 쓰는 데이터로 만든 전체 토큰 목록이에요.
레퍼런스 →에디터 지원
모든 토큰을 자동 완성해 드려요.
VS Code 확장이 입력하는 대로 토큰을 제안하고, 마우스를 올리면 설명을 보여 주고, 오타는 클릭 한 번으로 고쳐 줘요. 토큰 목록은 설치한 버전에서 그대로 읽어 와요.
<Strx.View
animate="fade-in layout-sprng dur"
/>
duration-{number}timing
duration-300timing
duration-500timing
밀리초 단위 지속 시간이에요. 토큰 → 프리셋 기본값 → Provider → 300ms 순서로 적용돼요.
Unknown animate token "layout-sprng". Did you mean "layout-spring"?
레퍼런스
바로 쓰는 프리셋.
| 토큰 | 시작 값 | 도착 값 | 기본 모션 |
|---|---|---|---|
opacity: 0 | opacity: 1 | timing, 300ms | |
fade-out | opacity: 1 | opacity: 0 | timing, 250ms |
slide-up | translateY: 24 | translateY: 0 | timing, 320ms |
slide-down | translateY: -24 | translateY: 0 | timing, 320ms |
slide-left | translateX: 24 | translateX: 0 | timing, 320ms |
slide-right | translateX: -24 | translateX: 0 | timing, 320ms |
scale-up | scale: 0.92 | scale: 1 | timing, 260ms |
scale-in | scale: 0.92 | scale: 1 | timing, 260ms |
scale-down | scale: 1.08 | scale: 1 | timing, 260ms |
scale-out | scale: 1 | scale: 0.92 | timing, 220ms |
bounce | translateY: -16, scale: 0.96 | translateY: 0, scale: 1 | spring, damping 8, stiffness 180, mass 0.9 |
1분이면 애니메이션을 시작할 수 있어요.
0.1 버전을 쓰고 있나요? 마이그레이션 가이드에 이름이 바뀐 API와 달라진 동작을 모두 정리해 두었어요.