다음 레이아웃이 발생할 때 뷰의 새 위치로 자동으로 애니메이션을 적용한다.

이 API를 사용하는 일반적인 방법은 함수형 컴포넌트에서는 상태 훅을 업데이트하기 전에 호출하고, 클래스 컴포넌트에서는 setState를 호출하기 전에 사용하는 것이다.

안드로이드에서 이 기능을 사용하려면 UIManager를 통해 다음 플래그를 설정해야 한다:

js

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

참고 자료

메서드

configureNext()

tsx

static configureNext(
  config: LayoutAnimationConfig,
  onAnimationDidEnd?: () => void,
  onAnimationDidFail?: () => void,
);

다음 레이아웃이 발생할 때 실행될 애니메이션을 예약한다.

매개변수:

이름	타입	필수 여부	설명
config	object	예	아래 config 설명 참조
onAnimationDidEnd	function	아니요	애니메이션이 완료되면 호출되는 함수
onAnimationDidFail	function	아니요	애니메이션이 실패하면 호출되는 함수

config 매개변수는 아래 키를 가진 객체다. create는 config로 사용할 수 있는 유효한 객체를 반환하며, Presets 객체들도 모두 config로 전달할 수 있다.

• duration (밀리초 단위)
• create (새로운 뷰의 애니메이션을 위한 선택적 설정)
• update (업데이트된 뷰의 애니메이션을 위한 선택적 설정)
• delete (제거되는 뷰의 애니메이션을 위한 선택적 설정)

create, update, delete에 전달되는 config는 다음 키를 가진다:

• type (사용할 애니메이션 타입)
• property (애니메이션할 레이아웃 속성, 선택적이지만 create와 delete에 권장됨)
• springDamping (숫자, 선택적이며 type: Type.spring에서만 사용 가능)
• initialVelocity (숫자, 선택적)
• delay (숫자, 선택적)
• duration (숫자, 선택적)

create()

tsx

static create(duration, type, creationProp)

configureNext에 전달할 객체(create, update, delete 필드를 가진)를 생성하는 헬퍼 함수이다. type 파라미터는 애니메이션 타입을, creationProp 파라미터는 레이아웃 속성을 나타낸다.

예제:

속성

타입

create 메서드나 configureNext의 create/update/delete 설정에서 사용할 애니메이션 타입을 열거한다. (예시: LayoutAnimation.Types.easeIn)

타입
spring
linear
easeInEaseOut
easeIn
easeOut
keyboard

속성

create 메서드나 configureNext의 create/update/delete 설정에서 사용할 수 있는 애니메이션 적용 가능한 레이아웃 속성 목록이다. (예시: LayoutAnimation.Properties.opacity)

속성
opacity
scaleX
scaleY
scaleXY

사전 설정

configureNext에 전달할 수 있는 미리 정의된 애니메이션 설정 모음이다.

사전 설정	값
easeInEaseOut	create(300, 'easeInEaseOut', 'opacity')
linear	create(500, 'linear', 'opacity')
spring	{duration: 700, create: {type: 'linear', property: 'opacity'}, update: {type: 'spring', springDamping: 0.4}, delete: {type: 'linear', property: 'opacity'} }

---

easeInEaseOut

Presets.easeInEaseOut를 인자로 configureNext()를 호출한다.

linear는 Presets.linear를 인자로 configureNext()를 호출한다.

spring

Presets.spring을 인자로 configureNext()를 호출한다.

예제: