Value
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation, resetAnimation이 있는 변하는 숫자.
API 레퍼런스
@kkwaenggwari/animated의 모든 export와 시그니처, 그리고 설명하는 가이드.
값과 그래프
ValueXY
new ValueXY({ x?, y? })같은 동작을 하는 x·y 값 한 쌍과 getLayout, getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)React 밖에서 숫자나 이름 있는 숫자 묶음을 만듭니다. 만들기만 해서는 아무 일도 일어나지 않습니다.
가이드: 값과 스타일AnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)모든 값과 그래프의 읽기 전용 기반: getValue, interpolate, 리스너.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })입력 범위에서 출력 범위로의 살아 있는 매핑. easing과 extend, clamp, identity 외삽.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);하나 이상의 입력에 대한 순수한 읽기 전용 계산. 이를 쓰는 출력은 JavaScript로 돕니다.
가이드: 값과 스타일interpolateFn
interpolateFn({ value, inputRange, outputRange });평범한 숫자에 보간을 한 번 계산합니다.
가이드: 값과 스타일add
add(...inputs);숫자와 값의 합.
가이드: 값과 스타일subtract
subtract(a, b);두 입력의 차.
가이드: 값과 스타일multiply
multiply(...inputs);숫자와 값의 곱.
가이드: 값과 스타일divide
divide(a, b);두 입력의 몫.
가이드: 값과 스타일modulo
modulo(a, b);끝없이 도는 회전처럼 감기는 값.
가이드: 값과 스타일diffClamp
diffClamp(input, min, max);입력의 변화를 따르되 범위 안에 머뭅니다. 스크롤하면 숨는 헤더에 유용합니다.
가이드: 값과 스타일React 훅
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)컴포넌트 수명 동안 숫자나 숫자 묶음을 소유합니다. style에서는 CSS 변수입니다.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)값과 팩터리에서 선언한 모든 컨트롤러·입력·출력을 소유합니다. 시작하고, 의존성이 바뀌면 다시 시작하고, 정리합니다.
가이드: 값과 스타일useAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)완전한 2차원 값을 소유합니다.
가이드: 값과 스타일useAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringcalc() 식이 아닌 파생 노드에 컴포넌트 수명의 별도 CSS 변수를 줍니다.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)노드나 ValueXY가 바뀔 때마다 함수를 부르고, 언마운트 때 제거합니다.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })훅으로 등장·퇴장을 하도록 { mounted, animatedValue }를 돌려줍니다.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;그 아래 훅 값의 기본 CSS 변수 scope를 정합니다.
가이드: 값과 스타일flushAnimatedUpdates
flushAnimatedUpdates();대기 중인 출력을 동기적으로 적용합니다. 결정적인 테스트용입니다.
가이드: 값과 스타일드라이버, 조합, 타임라인
timing
timing(value, { toValue, duration?, delay?, easing? })정해진 시간 동안 easing 곡선을 따라 값을 움직입니다.
가이드: 타이밍, 스프링, 조합spring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })끊긴 모션의 속도를 이어받으며 스프링 물리로 값을 움직입니다.
가이드: 타이밍, 스프링, 조합decay
decay(value, { velocity, deceleration? })속도로 출발해 느려집니다.
가이드: 타이밍, 스프링, 조합delay
delay(ms);기다리기만 하는 컨트롤러.
가이드: 타이밍, 스프링, 조합sequence
sequence([a, b, c]);컨트롤러를 차례로 실행합니다.
가이드: 타이밍, 스프링, 조합parallel
parallel([a, b], { stopTogether? }?)컨트롤러를 함께 실행합니다.
가이드: 타이밍, 스프링, 조합stagger
stagger(ms, [a, b, c]);컨트롤러를 일정한 간격으로 차례로 시작합니다.
가이드: 타이밍, 스프링, 조합loop
loop(animation, { iterations?, resetBeforeIteration? }?)컨트롤러를 정한 횟수나 계속 반복합니다.
가이드: 타이밍, 스프링, 조합keyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)선택적인 시각과 반복으로 값을 여러 숫자에 걸쳐 움직입니다.
가이드: 타이밍, 스프링, 조합Easing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Native와 같은 곡선: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier와 in/out 도우미.
가이드: 타이밍, 스프링, 조합createTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)React 밖에서 쓰는, 이름 있는 트랙을 가진 탐색 가능한 시계.
가이드: 타이밍, 스프링, 조합useTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)트랙이 평범한 style에서 바로 동작하는, 컴포넌트가 소유하는 타임라인.
가이드: 타이밍, 스프링, 조합컴포넌트와 레이아웃
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div 같은 HTML·SVG 호스트와 React Native 이름의 코어 함수를 담은 네임스페이스.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)ref를 전달하는 컴포넌트가 Animated 호스트 props를 받게 합니다.
가이드: Animated 컴포넌트Animated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>안쪽 Animated 요소와 pose 이름, tempo, 애니메이션 기본값을 공유합니다.
가이드: Animated 컴포넌트Animated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>key가 있는 자식을 퇴장이 끝날 때까지 마운트해 둡니다.
가이드: Animated 컴포넌트Animated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move 요소의 레이아웃 변화를 애니메이션하고 같은 정체성의 요소를 잇습니다.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }다른 렌더러를 위한 같은 capture·commit 레이아웃 조율.
가이드: Animated 컴포넌트useReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)제어되는 목록을 한 축으로 포인터·키보드 재정렬합니다.
가이드: Animated 컴포넌트입력과 연결
input
input(targetRef, adapter, onEvent?)입력 어댑터를 요소에 소유된 컨트롤러로 붙입니다.
가이드: 입력과 제스처follow
follow(target, source, { stiffness?, damping?, mass? }?)한 값이 다른 값을 스프링으로 뒤따르게 합니다.
가이드: 입력과 제스처connect
connect(node, (value) => write(value));노드의 모든 변화를 함수로 보냅니다.
가이드: 입력과 제스처event
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);React Native처럼 중첩된 이벤트 데이터를 값에 매핑합니다.
가이드: 입력과 제스처dragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })경계, 탄성 가장자리, 관성, settle이 있는 포인터·키보드 드래그.
가이드: 입력과 제스처pinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })두 포인터 제스처의 배율과 회전.
가이드: 입력과 제스처moveInput
moveInput({ x?, y?, relative?, reset? })포인터 좌표. 요소 중심 기준 상대 좌표도 선택할 수 있습니다.
가이드: 입력과 제스처scrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })요소나 페이지의 스크롤 위치와 진행도, 또는 뷰포트를 지나가는 요소의 진행도.
가이드: 입력과 제스처wheelInput
wheelInput({ x?, y? })휠 변화량.
가이드: 입력과 제스처viewportInput
viewportInput({ root?, margin?, amount?, once? })요소가 뷰포트 안에 있는지.
가이드: 입력과 제스처mediaInput
mediaInput('(min-width: 768px)');미디어 쿼리가 일치하는지.
가이드: 입력과 제스처longPressInput
longPressInput({ delay?, threshold? })지연 뒤 이동 기준 안에서 누르고 있는 포인터.
가이드: 입력과 제스처swipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })스와이프 방향, 거리, 속도.
가이드: 입력과 제스처출력과 진단
bind
bind(element, style) → { update, inspect, dispose }React 밖에서 요소에 Animated 스타일을 연결합니다. update, inspect, dispose를 돌려줍니다.
inspect
inspect(element) → [{ property, driver, reason }]요소의 움직이는 속성마다 재생 경로와 대체 이유.
가이드: 성능과 재생 경로output
output(targetRef, { style?, attributes?, properties?, text? })useAnimated 안에서 style, 속성, 텍스트, 프로퍼티 출력을 소유합니다.
bindOutput
bindOutput(target, mapping) → { flush, dispose }출력 매핑을 즉시 붙이고 flush와 dispose를 돌려줍니다.