약 5분 · React 16.8+ · React DOM
시작하기
설치부터 제스처와 등장·퇴장 모션까지 여섯 단계. 단계마다 작고 실제로 동작하는 컴포넌트입니다.
설치
Animated에는 런타임 의존성이 없습니다. React는 peer dependency입니다.
패키지 진입점에는 'use client'가 표시되어 있습니다. Next.js App Router에서는 서버 레이아웃이
AnimatedProvider를 렌더할 수 있고, 훅과Animated.<tag>는 Client Component 안에서 씁니다.npm install @kkwaenggwari/animated편집기에서
@kkwaenggwari/animatedimport가 인식됩니다.첫 값을 움직이기
useAnimatedValue(1)은 컴포넌트가 살아 있는 동안 살아 있는 숫자를 소유합니다.style에 바로 넣으세요. CSS 변수가 되므로 값이 바뀌는 동안 React는 렌더하지 않습니다.timing(value, { toValue, duration }).start()가 값을 움직입니다. 도중에 다시 누르면 지금의 불투명도에서 출발합니다.예제를 준비하는 중…
상자가 사라졌다 나타나고, 도중에 다시 누르면 그 자리에서 되돌아갑니다.
값 하나에서 여러 출력 만들기
interpolate는 값을 길이, 각도, 숫자로 바꿉니다. easing이 없으면 같은 변수의 정확한calc()가 되므로 다섯 줄도 한 줄과 비용이 같습니다.같은 값에 입력 범위만 다르게 주면 애니메이션 다섯 개 없이 시차가 생깁니다.
예제를 준비하는 중…
한 번 누르면 다섯 줄이 시차를 두고 움직이고, spread를 바꾸면 범위만 바뀝니다.
목적지를 선언하기
Animated.button은 평범한 button을 렌더합니다.seed는 첫 프레임,pose는 지금 있어야 할 곳,tempo는 가는 방법입니다.이동 중에
pose가 바뀌면 요소는 화면에 있는 위치에서 방향을 틀고, 스프링이면 속도도 이어받습니다.예제를 준비하는 중…
카드를 빠르게 번갈아 눌러도 튀는 카드가 없습니다.
입력 연결하기
input(ref, moveInput(...))은 포인터 좌표를 값에 씁니다.follow(target, source)는 한 값이 다른 값을 스프링으로 뒤따르게 합니다.useAnimated팩터리에서 선언한 것은 모두 컴포넌트가 소유합니다. 언마운트되거나 의존성이 바뀌면 리스너와 스프링이 멈춥니다.예제를 준비하는 중…
카드가 포인터 쪽으로 기울고, 포인터가 나가면 제자리로 돌아옵니다.
떠나는 모션 만들기
React 자식을 지우면 보통 즉시 사라집니다.
Animated.Keep은 key가 있는 자식을depart포즈가 끝날 때까지 남겨 둡니다.wait를 켜면 새 자식은 모든 퇴장이 끝난 뒤에 렌더됩니다.예제를 준비하는 중…
닫은 메시지가 고른 모션으로 떠난 뒤에 사라집니다.
이제 전체 모델을 알게 되었습니다
값, 목적지, 입력, 퇴장은 같은 컨트롤러와 같은 중단 규칙, 같은 정리 방식을 공유합니다. 가이드에서 하나씩 더 깊이 다룹니다.