flutter개발자의 RN 애니메이션 적응하기

애니메이션은 플러터가 짱이라고 생각했는데 RN도 공부를 해보니 깊게 파면 RN이 훨씬 더 좋은거 같다.

플러터는 0~1이라는 변화만 주면 이걸 이용해서 내맘대로 커스텀하기 쉽지만 코드가 좀 읽기 어렵고 재사용이 쉽지 않다.

플러터의 경우 스타일링을 여러 위젯을 조합해서 만드는데 각 위젯마다 각기 다르게 값을 물려줘야 하니깐 좀 어렵다.

 

RN의 경우 스타일링은 css로 전부 처리하기 때문에 css코드 부분만 잡으면 장땡이다. 게다가 자바스크립트 스레드와 애니메이션 스레드(ui스레드)가 확실하게 분리되어있어 성능에도 이점이 있는거 같다.

 

 

 

 

1. implicit animation, expilicit animation

사실 rn에서는 이를 명확하게 구분하지는 않음.

플러터처럼 0~1이라는 명확한 범위의 변화를 강조하기보단 a->b 이런 변화를 더 중요시함

 

 

굳이따지자면

 

implicit의 경우 CSS Transition, CSS Animation에 가깞고

explicit의 경우 useSharedValue + withTiming 조합에 가깞다.

 

 

 

2. CSS Transition, CSS Animation

transition의 경우 AnimatedSwitcher처럼 상태 변화에 따라 애니메이션을 줄 수 있다

CSS Animation은 keyframe 애니메이션을 줄 수 있는데 이걸 플러터에 개념에 대응하기 좀 어렵다.

 

키프레임 애니메이션은 내가 진행도 %에 따라 상태를 마음대로 정의하고 시작 시점은 렌더링 될 때 이다.

 

한마디로 가만히 있던 컴포넌트에 갑자기 키프레임 애니메이션을 달아주면 애니메이션을 돌릴 수 있다는 얘기

 

 

3. Animation Builder, TweenAnimationBuilder

Animated.View로 다 통합되어있음

 

 

4. Animation Controller

useSharedValue + AnimatedStyle + withTiming, withSpring 조합으로 해결하면 됨.

플러터처럼 0~1 이라는 개념보단. sharedValue의 초기값을 기준으로 + - 하면서 애니메이션을 줄 수 있음

 

 

5. 언제 useSharedValue를 써야함?

end값이 다양할때 써야한다

 

 

 

6. 상태변화에따른 애니메이션 방법은 어느걸로?

 

CSS transition이 제일 좋다. transitionProperty 부분을 이용해서 관련된 css항목을 지정해주면 상태변화에 따라 애니메이션이 적용된다. 아래는 바텀탭바를 준 애니메이션 예제임

 

<AnimatedTabList
    style={{
        position: 'absolute',
        bottom: 0,
        backgroundColor: 'red',
        marginBottom: insets.bottom,
        marginHorizontal: marginHorizontal,
        borderRadius: 20,
        overflow: 'hidden',
        opacity: showBottomTab ? 1 : 0,
        pointerEvents: showBottomTab ? 'auto' : 'none',
        transform: [{ translateY: showBottomTab ? 0 : 10 }],
        transitionProperty: ['transform', 'opacity'],
        transitionDuration: '200ms',
    }}>

 

 

 

7. AnimatedStyle, AnimatedProps를 사용해야할 때는?

 

shared Value를 이용하면 원래 css항목과 이름을 같게 하면 애니메이션을 적용할 수 있다.

import Animated, { useSharedValue } from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  return (
    <Animated.View
      style={{
        width,
        height: 100,
        backgroundColor: 'violet',
      }}
    />
  );
}

 

 

허나 복잡한 값. 얘를들어 SharedValue의 제곱승 이런걸로 애니메이션 값을 넣어주고 싶다면 AnimatedStyle을 만들어주어야 한다.

 

 

 

AnimatedProp의 경우에는 reanimated를 지원하지 않는 컴포넌트에 AnimatedComponent를 만들고 여기다가 sharedValue를 연동해야한다.