Animated.ValueXY

2D 애니메이션(예: 패닝 제스처)을 제어하기 위한 2D 값. 일반 Animated.Value와 거의 동일한 API를 제공하지만, 다중화되어 있다. 내부적으로 두 개의 일반 Animated.Value를 포함한다.

예제

---

참고 자료

메서드

setValue()

tsx

setValue(value: {x: number; y: number});

값을 직접 설정한다. 이 메서드를 사용하면 해당 값에 적용된 모든 애니메이션을 중지하고 바인딩된 모든 속성을 업데이트한다.

매개변수:

이름	타입	필수 여부	설명
value	{x: number; y: number}	예	설정할 값

setOffset()

tsx

setOffset(offset: {x: number; y: number});

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

매개변수:

이름	타입	필수 여부	설명
offset	{x: number; y: number}	예	오프셋 값

flattenOffset()

tsx

flattenOffset();

오프셋 값을 기본 값에 병합하고 오프셋을 0으로 초기화한다. 최종 값의 결과는 변하지 않는다.

extractOffset()

tsx

extractOffset();

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

addListener()

tsx

addListener(callback: (value: {x: number; y: number}) => void);

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

리스너의 식별자로 사용할 문자열을 반환한다.

매개변수:

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

---

removeListener()

tsx

removeListener(id: string);

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

매개변수:

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

removeAllListeners()

tsx

removeAllListeners();

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

stopAnimation()

tsx

stopAnimation(callback?: (value: {x: number; y: number}) => void);

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

매개변수:

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

resetAnimation()

tsx

resetAnimation(callback?: (value: {x: number; y: number}) => void);

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

인자:

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

getLayout()

tsx

getLayout(): {left: Animated.Value, top: Animated.Value};

{x, y} 값을 스타일에 사용할 수 있는 {left, top} 형태로 변환한다. 예를 들면:

tsx

style={this.state.anim.getLayout()}

getTranslateTransform()

tsx

getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

{x, y} 값을 사용 가능한 변환(translation transform)으로 변환한다. 예를 들어:

tsx

style={{
  transform: this.state.anim.getTranslateTransform()
}}