애니메이션을 통합할 앱을 작업하면서 반응 네이티브용 Animated라는 라이브러리를 찾았습니다. 이 라이브러리는 입력과 출력 간의 선언적 관계, 그 사이의 구성 가능한 변환, 시간 기반 애니메이션 실행 시작 및 중지 방법에 중점을 둔 애니메이션을 구축하고 쉽게 유지 관리하기 위한 것입니다.

애니메이션을 만드는 프로세스는 먼저 값을 설정하고, 애니메이션 구성 요소의 스타일 속성에 연결하고, 타이밍을 사용하여 애니메이션을 통해 업데이트를 구동하는 것입니다.

특징

애니메이션 구성

Animated에는 세 가지 유형의 애니메이션 유형이 있습니다. 각 애니메이션 유형은 값이 초기 값에서 최종 값으로 움직이는 방식을 제어하는 ​​애니메이션 곡선을 제공합니다.
Animated.decay() - 초기 속도로 시작하여 점차적으로 정지합니다.
Animated.spring() - 기본 스프링 물리 모델을 제공합니다.
Animated.timing() - 여유 기능을 사용하여 시간이 지남에 따라 값에 애니메이션을 적용합니다. 이 기능은 기본적으로 객체를 최대 속도로 점진적으로 가속하고 정지할 때까지 점진적으로 감속하여 완료되는 easyInOut 곡선을 사용합니다.

작동 원리

애니메이션은 애니메이션이 완료될 때 호출될 완료 콜백을 받는 start()를 호출하여 시작됩니다. 애니메이션 실행이 정상적으로 완료되면 완료 콜백이 {finished: true}와 함께 호출됩니다. 애니메이션이 완료되기 전에 stop()이 호출되어 애니메이션이 완료되면 {finished: false}가 수신됩니다.

Animated.timing({}).start(({ finished }) => {
  /* completion callback */
});

애니메이션 가능한 구성 요소

애니메이션 가능한 구성요소만 애니메이션할 수 있습니다. 이들은 애니메이션 값을 속성에 바인딩하고 모든 프레임에서 반응 렌더링 및 조정 프로세스 비용을 피하기 위해 대상 네이티브 업데이트를 수행하는 구성 요소입니다.
createAnimatedComponent()를 사용하여 구성 요소를 애니메이션 가능하게 만들 수 있습니다.

애니메이션 가능한 구성 요소:

애니메이션.이미지

Animated.ScrollView

애니메이션.텍스트

애니메이션.보기

Animated.FlatList

애니메이션.섹션 목록

애니메이션 작곡

애니메이션은 합성 함수를 사용하여 더 복잡한 방식으로 결합할 수도 있습니다.

Animated.delay()는 주어진 지연 후에 애니메이션을 시작합니다.

Animated.parallel() 여러 애니메이션을 동시에 시작합니다.

Animated.sequence() 애니메이션을 순서대로 시작하고 다음 애니메이션을 시작하기 전에 각 애니메이션이 완료될 때까지 기다립니다.

Animated.stagger() 애니메이션을 순서대로 병렬로 시작하지만 연속적으로 지연됩니다.

애니메이션 값 결합

더하기, 빼기, 곱하기, 나누기 또는 모듈로를 통해 두 개의 애니메이션 값을 결합하여 새로운 애니메이션 값을 만들 수 있습니다.

Animated.add()

Animated.subtract()

Animated.divide()

Animated.modulo()

Animated.multiply()

이벤트 및 제스처 처리

이동 또는 스크롤과 같은 이벤트 및 제스처는 Animated.event()를 사용하여 애니메이션 값에 직접 매핑할 수 있습니다. 이는 복잡한 이벤트 개체에서 값을 추출할 수 있도록 구조화된 맵 구문으로 수행됩니다. 첫 번째 수준은 여러 인수에 대한 매핑을 허용하는 배열이며 해당 배열에는 중첩 개체가 포함되어 있습니다.

이벤트를 scrollx에 매핑하기 위한 수평 스크롤 제스처의 예:

예를 들어 수평 스크롤 제스처로 작업할 때 event.nativeEvent.contentOffset.x를 scrollX(Animated.Value)에 매핑하기 위해 다음을 수행합니다.

 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

https://reactnative.dev/ 에서 더 자세히 읽을 수 있는 보간 기능과 같은 다른 기능이 있습니다.

참고문헌

https://reactnative.dev/docs/animated

https://reactnative.dev/docs/animations.html