layoutanimation

id: layoutanimation title: LayoutAnimation

다음 레이아웃이 발생할 때 뷰가 새로운 위치로 자동으로 애니메이션되도록 설정한다.

이 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는 configureNext()를 Presets.linear와 함께 호출한다.

spring

Presets.spring을 사용해 configureNext()를 호출한다.

예제: