애니메이션을 제어하기 위한 표준 값이다. 하나의 Animated.Value는 여러 속성을 동기화된 방식으로 제어할 수 있지만, 한 번에 하나의 메커니즘만으로 제어할 수 있다. 새로운 메커니즘을 사용하면(예: 새로운 애니메이션을 시작하거나 setValue를 호출) 이전 메커니즘은 중지된다.

일반적으로 함수 컴포넌트에서는 useAnimatedValue(0);으로, 클래스 컴포넌트에서는 new Animated.Value(0);으로 초기화한다.

참조

메서드

setValue()

tsx

setValue(value: number);

값을 직접 설정한다. 이 메서드는 현재 실행 중인 모든 애니메이션을 중단하고 바인딩된 모든 속성을 업데이트한다.

매개변수:

이름	타입	필수 여부	설명
value	number	예	값

---

setOffset()

tsx

setOffset(offset: number);

setValue, 애니메이션, 또는 Animated.event를 통해 설정된 값에 추가적으로 오프셋을 적용한다. 주로 팬 제스처의 시작점과 같은 상황을 보정하는 데 유용하다.

매개변수:

이름	타입	필수 여부	설명
offset	number	예	오프셋 값

flattenOffset()

tsx

flattenOffset();

오프셋 값을 기본값에 병합하고 오프셋을 0으로 재설정한다. 최종 출력 값은 변경되지 않는다.

extractOffset()

tsx

extractOffset();

기본 값을 오프셋 값으로 설정하고, 기본 값은 0으로 초기화한다. 최종 출력 값은 변하지 않는다.

addListener()

tsx

addListener(callback: (state: {value: number}) => void): string;

애니메이션의 업데이트를 관찰할 수 있도록 값에 비동기 리스너를 추가한다. 값이 네이티브로 동작할 수 있기 때문에 동기적으로 값을 읽을 수 없으므로 이 메서드는 유용하다.

리스너를 식별할 수 있는 문자열을 반환한다.

인자:

이름	타입	필수 여부	설명
callback	function	예	value 키가 새로운 값으로 설정된 객체를 받는 콜백 함수.

removeListener()

tsx

removeListener(id: string);

리스너를 등록 해제한다. id 매개변수는 이전에 addListener()에서 반환된 식별자와 일치해야 한다.

매개변수:

이름	타입	필수 여부	설명
id	string	예	제거할 리스너의 식별자.

removeAllListeners()

tsx

removeAllListeners();

등록된 모든 리스너를 제거한다.

stopAnimation()

tsx

stopAnimation(callback?: (value: number) => void);

실행 중인 애니메이션이나 트래킹을 중지한다. 애니메이션 중지 후 최종 값과 함께 callback이 호출되며, 이는 레이아웃과 애니메이션 위치를 일치시키기 위해 상태를 업데이트할 때 유용하다.

매개변수:

이름	타입	필수 여부	설명
callback	function	아니오	최종 값을 받을 함수.

resetAnimation()

tsx

resetAnimation(callback?: (value: number) => void);

모든 애니메이션을 중지하고 값을 원래 상태로 초기화한다.

매개변수:

이름	타입	필수 여부	설명
callback	function	아니오	원래 값을 전달받을 함수.

interpolate()

tsx

interpolate(config: InterpolationConfigType);

프로퍼티를 업데이트하기 전에 값을 보간한다. 예를 들어 0-1 범위를 0-10 범위로 매핑할 수 있다.

자세한 내용은 AnimatedInterpolation.js를 참고한다.

매개변수:

이름	타입	필수 여부	설명
config	object	Yes	아래 내용을 참고한다.

config 객체는 다음과 같은 키로 구성된다:

• inputRange: 숫자 배열
• outputRange: 숫자 또는 문자열 배열
• easing (선택사항): 입력 숫자를 받아 숫자를 반환하는 함수
• extrapolate (선택사항): 'extend', 'identity', 'clamp'와 같은 문자열
• extrapolateLeft (선택사항): 'extend', 'identity', 'clamp'와 같은 문자열
• extrapolateRight (선택사항): 'extend', 'identity', 'clamp'와 같은 문자열

---

animate()

tsx

animate(animation, callback);

주로 내부적으로 사용되지만, 커스텀 Animation 클래스에서도 활용할 수 있다.

매개변수:

이름	타입	필수 여부	설명
animation	Animation	예	Animation.js 참조.
callback	function	예	콜백 함수.