[RN] RN의 애니메이션

RN에서의 애니메이션은 복잡한듯 복잡하지 않고 안복잡한듯 복잡하다...

사용할 때 마다 찾아보는 나의 기억력이란....

 

그래서 그냥 간단하게 자주 사용하는 것만 정리해서 써놓고 참고하려 정리해 봐야겠다!!

 

일단 RN에서는 애니메이션 전용 태그가 따로 있다.

그래서 Animated를 react-native 모듈로부터 호출해 와야 한다.

import {Animated} from 'react-native';

 

호출했다면 useRef 훅을 이용하여 Animated 인스턴스를 생성해야 하는데 아래와 같이 해주면 된다.

const position = useRef(new Animated.Value(0)).current;

 

저 Animated.Value 매서드에 들어가는 전달인자는 애니메이션의 초기 값이다.

이렇게 설명하면 어려우니 아래의 예제를 보자!

 

const position = useRef(new Animated.Value(0)).current;

return <Animated.View
        style={[
          {
            borderBottomColor: '#000000',
            width: '33%',
            borderBottomWidth: 2,
            position: 'absolute',
            top: 45,
          },
          {
            transform: [
              {
                translateX: position,
              },
            ],
          },
        ]}></Animated.View>

Animated.View 라는 컴포넌트에 기본 스타일을 지정해주고 추가적으로 transform 내부에 translateX에 생성한 인스턴스 position 을 할당한 것을 보자!

이렇게 하면 translateX의 초기값이 0이 되고 position의 값을 제어하면 애니메이션을 실행할 수 있게 된다!

 

자 그러면 position은 어떻게 제어를 하느냐!

바로 아래와 같이 제어하면 된다.

Animated.timing(position, {
      toValue: (window.width / 3) * id,
      duration: 200,
      useNativeDriver: false,
    }).start();

onPress와 같은 이벤트에서 위의 코드를 실행해 주면 되는데

첫 번째 인자에는 변경할 인스턴스를 넣고 두 번째 인자에는 객체로 제어할 값을 넣으면 된다.

 

toValue는 변경될 값을 입력하면 되는데 처음에 position을 생성할 때 0을 입력했으므로

toValue에 100을 입력하면 위치가 100만큼 이동하게 된다.

 

duration은 밀리세컨드 단위로 애니메이션이 실행되는 시간을 뜻한다

200을 입력했으므로 0.2초만에 실행되는 것을 볼 수 있다.

 

useNativeDriver 는 네이티브 자체에 내장되어 있는 애니메이션을 실행할 것이냐 라고 묻는건데

이건 일일히 찾아서 지원되면 사용하고 아니면 사용하지 못하게 설정해줘야 한다.

 

암튼 이렇게만 하면 이벤트가 실행되면 정상적으로 화면을 이동하는 것을 볼 수 있을 것이다.

기본적으로 css에서 transform을 사용해봤다면 생각보다 쉽게 적응할듯 싶다!

그럼 20000