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() 메서드는 {x, y} 값을 {left, top} 스타일 속성으로 변환한다. 이는 스타일에 직접 사용할 수 있도록 해준다. 예를 들어 다음과 같이 사용할 수 있다:

tsx

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

getTranslateTransform()

tsx

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

{x, y} 값을 사용 가능한 이동 변환으로 변환한다. 예를 들어:

tsx

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