최고의 로컬 애니메이션 개발자가 되려면 당신이 알아야 할 모든 것이

다음은 React 네이티브 애니메이션을 구현할 때 성능 문제를 극복하는 데 필요한 도구입니다.
React Native 애니메이션은 워크숍과 수업에서 핫이슈로 떠오르는데 아마도 많은 개발자들이 사용하기 어렵다는 것을 발견했기 때문일 것이다.많은 온라인 블로그와 리소스가 React Native의 성능에 주목하지만, React Native의 기초 지식을 소개하는 사람은 드물다.본고에서 우리는 어떻게 React 원생 애니메이션을 실현하는지에 대한 기초 지식을 소개할 것이다.

애니메이션 API를 사용하여 성능 향상

그러나 개발자들이 performance issues이런 상황을 만나는 것은 드물지 않다. 특히 복잡한 애니메이션을 처리할 때다.
위에서 말한 바와 같이 React 원생 애니메이션의 성능 병목은 자바스크립트 라인의 무거운 작업 부하로 인해 발생하는데 이것은 프레임 속도를 낮추고 사용자 체험을 늦출 수 있다.이 문제를 극복하기 위해서는 초당 60 프레임의 프레임 속도를 유지해야 한다.
사용Animated API은 필요한 서열화/반서열화 시간을 최적화했기 때문에 가장 좋은 해결 방안이다.이것은 선언 API를 사용하여 애니메이션을 설명하여 이를 구현합니다.이 배후에는 JavaScript에서 선언을 시리얼화하여 브리지에 보낼 수 있도록 전체 애니메이션을 미리 선언하는 것이 좋습니다.그런 다음 드라이버가 프레임별로 애니메이션을 실행합니다.

React Native에서 애니메이션을 실행하는 방법

React Native에서 애니메이션을 만들 수 있는 몇 가지 방법이 있습니다.다음은 내가 생각하는 가장 유용한 것들이다.

애니메이션 값

내 목록에서 애니메이션 값은 모든 React 기본 응용 프로그램에서 애니메이션을 구성하는 블록입니다.이러한 값은 일반적으로 실수로 가리키며 애니메이션 어셈블리와 함께 전달될 때 실수로 변환됩니다.
다음 예를 살펴보겠습니다.

    **Animated.timing(this.valueToAnimate, {
        toValue: 42;
        duration: 1000;
    }).start()**

위의 예에서 나는value를 성명했다.ToAnimate는 42이며 1000ms 후에 실행됩니다.
또한 애니메이션 값을 사용하여 불투명도 또는 위치와 같은 속성을 선언할 수도 있습니다.다음은 애니메이션 값을 사용하여 불투명도를 구현한 예입니다.

    **<Animated.View style={{ opacity: myAnimatedOpacity }} />**

애니메이션 드라이버:애니메이션.시간, 애니메이션.활성, 애니메이션.쇠퇴

그림의 노드와 같은 드라이버를 상상해 보세요. 드라이버는 프레임마다 애니메이션 값을 바꿉니다.예를 들어, 애니메이션입니다.애니메이션을 설정하면 타이머에 값이 추가됩니다.[쇠퇴]는 프레임당 값을 감소시킵니다.
다음 예를 살펴보겠습니다.

    **Animated.decay(this.valueToAnimate, {
       velocity: 2.0,
       deceleration: 0.9
    }).start();**

이 예제에서는 특정 속도로 애니메이션을 시작하고 특정 시간에 서서히 속도를 줄입니다.나는 문서가 처음 재질 디자인에 등장했을 때 크로스플랫폼 응용 프로그램에서 이렇게 하는 것을 좋아한다.느낌이 너무 좋아서 애니메이션에 잊지 못할 체험을 할 수 있는 방법이 많아요.
애니메이션을 사용할 수도 있습니다.이벤트는 사용자가 스크롤할 때 값을 제어합니다.

    **<ScrollView onScroll={Animated.event(
      [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
    )}
    >
    </ScrollView>**

위의 예에서는 애니메이션이 설정되어 있습니다.이벤트는 scrollView를 설정하는 nativeEvent 함수를 반환합니다.contentOffset.y에서 현재 스크롤 상태입니다.
한 마디로 하면 애니메이션 드라이버는 애니메이션 값이나 다른 애니메이션 드라이버와 결합하여 사용할 수 있다.
추가 설명으로는 드라이버가 각 프레임을 업데이트하면 새 값이 View 속성을 즉시 업데이트한다는 점에 유의하십시오.따라서 변수를 성명할 때는 조심해야 하고, 그것들을 사용할 때는 그것들의 범위를 주의해야 한다.

방법을 바꾸다

Transform methods 애니메이션 값을 새 애니메이션 값으로 변환할 수 있습니다.
애니메이션 등의 방법을 사용할 수 있습니다.추가(), 애니메이션이 설정되었습니다.multiply() 또는 애니메이션.변환 작업을 위해 보간()을 지정합니다.다음 명령을 사용하여 애니메이션 그래픽의 모든 노드에서 변환 작업을 수행할 수 있습니다.

    **newAnimated.Value(55).interpolate(.....) // Transformation operation using Animated.interpolate() method**

애니메이션 도구

애니메이션 도구는 애니메이션 값을 구성 요소에 비추는 특수한 노드입니다.애니메이션 객체를 렌더링할 때 생성됩니다.등록 정보를 보고 지정합니다.
다음 코드 세그먼트를 살펴보겠습니다.

    **Var opacity = new Animated.Value(0.7);
    <Animated.View style={{ opacity }} />**

여기서 0.7 값을 속성으로 변환할 수 있는 애니메이션 도구를 추가했습니다.어떤 방법이 이 값을 업데이트하면, 이 변경 사항은 보기의 속성에 반영됩니다.
이러한 메서드는 React Native의 객체 애니메이션과 함께 작동하며 중요한 역할을 합니다.
애니메이션 드라이버(animated.Timing, animated.event 또는 animated.Decay)는 애니메이션의 각 프레임에 대한 애니메이션 값을 변경합니다.그리고 결과를 변환 작업에 전달하고 보기의 속성(불투명도 또는 변환 값)으로 저장합니다.
그런 다음 JavaScript를 통해 이 컴퓨터 영역에 넘겨주고 setNativeProps를 호출할 때 보기를 업데이트합니다.마지막으로 UIView 또는 Android를 포함하여 iOS 또는 Android로 전달됩니다.뷰가 업데이트됩니다.

애니메이션 API 및 네이티브 드라이버를 사용한 애니메이션

JavaScript 드라이버는 React 오리지널 애니메이션 API가 출시된 이후 프레임 실행에 사용되어 왔으나 비즈니스 논리가 JavaScript 스레드에 직접 떨어지면서 프레임이 손실되었습니다.

프레임 분실 문제를 해결하기 위해 최신 버전의 드라이버는 순수 로컬입니다. 현재는 이 지역에서 프레임별로 애니메이션을 실행할 수 있습니다.
Native Driver 애니메이션 API와 함께 사용할 경우 자바스크립트의 값을 계산하지 않고 기본 애니메이션 모듈에서 뷰를 직접 업데이트할 수 있습니다.
네이티브 드라이버를 사용하려면 애니메이션을 구성할 때useNativeDriver를 true로 지정해야 합니다.

    **useNativeDriver: true**

책 수령: Performance Optimized React Applications

React Native에서 PanResponder 처리 제스처 사용

React 오리지널 애니메이션을 구현하는 동시에 React 오리지널 애니메이션 API는 대부분의 "번거로운 작업"을 수행할 수 있습니다.그러나 애니메이션에서 제스처를 실현할 때 중요한 제한이 있다. 이것은 aScrollView 범위 밖의 제스처에 응답할 수 없다.
간단한 ScrollView 구성 요소로 많은 일을 할 수 있지만, 제스처가 없으면 모바일 장치가 완전하지 않고, 제스처는 사용자가 애니메이션을 통해 실행하는 동작이라는 것에 동의할 수 있습니다.
React Native에서는 PanResponder 및 애니메이션 API를 사용하여 손짓을 원활하게 처리할 수 있습니다.
PanResponder는 다양한 터치를 특정 제스처로 조합합니다.단일 터치로 추가 터치에 응답하여 제스처를 부드럽게 합니다.
기본적으로 PanResponder는 InteractionManager 핸들로 구성되어 있으며, 이 핸들은 JS 라인에서 실행되는 이벤트의 제스처를 중단하지 못하게 합니다.

느린 내비게이션 전환을 위한 가동 시간 향상

한 응용 프로그램 화면에서 다른 응용 프로그램 화면으로 이동하는 로컬 애니메이션은 일반적으로 네비게이션 구성 요소를 사용해야 한다.탐색 구성 요소(예: React Navigation는 일반적으로 탐색 변환에 사용됩니다.
React Native에서 내비게이션 변환은 JavaScript 스레드에서 발생하는데, 이것은 저단/저메모리 장치 (iOS 장치가 이 장치를 더욱 효과적으로 처리하기 때문에) 에서 느린 변환을 초래할 수 있습니다.React Native가 새 화면을 렌더링하려고 하고 애니메이션이 백그라운드에서 실행되는 경우 일반적으로 느린 탐색 변환이 발생합니다.
이러한 상황을 피하기 위해서 InteractionManager 자바스크립트 라인에서 애니메이션이나 상호작용 후 장시간 실행하는 작업을 실행할 수 있습니다.

레이아웃 애니메이션

LayoutAnimation는 간단한 API로, 현재 배치가 발생할 때 뷰를 다음 연속 위치의 애니메이션으로 자동으로 설정합니다.UI 스레드에서 작동하므로 성능이 뛰어납니다.
LayoutImation 구성을 사용한 애니메이션은 호출 후 모든 어셈블리에 적용됩니다. 애니메이션과 달리 애니메이션에서 애니메이션을 설정할 특정 값을 제어할 수 있습니다.LayoutImation은 다음에 렌더링할 때 변경되는 모든 내용에 애니메이션을 설정할 수 있기 때문에 setState를 호출하기 전에 애니메이션을 호출해야 합니다.
setState를 호출하기 전에 레이아웃 애니메이션을 설정하면 본 기기의 라인에서 애니메이션이 원활하고 다른 setState diff의 코드를 터치할 때 애니메이션에 영향을 주지 않습니다. (정상적인 경우 프로그램의 애니메이션에 영향을 줍니다.)
Layoutimation을 사용하는 또 다른 방법은 구성 요소 WillReceiveProps 방법에서 그것을 호출하는 것이다.LayoutImation이라고 부르기만 하면 됩니다.다음과 같이 애니메이션 구성의 적절한 매개 변수를 전달하여 Next를 구성합니다.

**LayoutAnimation.configureNext(animationConfiguration, callbackCompletionMethod);
this.setState({ stateToChange: newStateValue });**

LayouTimation은 불투명도와 신축성 두 가지 속성만 지원합니다.
이것은 보기의 유일한 키를 사용하고 예상 위치를 계산해서 보기를 식별합니다.또한 뷰가 상태 변경 간에 동일한 키포인트를 유지하면 프레임 변경에 대한 애니메이션이 설정됩니다.
LayoutImation을 사용한 애니메이션은 기본으로 진행되며 성능 측면에서 볼 때 좋으나 모든 속성이 상태 간에 애니메이션을 설정해야 할 경우 어려울 수 있습니다.
참조 장소: https://opensource.com/article/18/6/getting-started-react-native-animations
추가 학습 자료:
The Complete React Native + Hooks Course [2020 Edition]
The Modern React Bootcamp (Hooks, Context, NextJS, Router)