Reanimated 큰그림 정리

SharedValueAnimation

그냥 내가 이름 지은거. sharedValue를 이용한 애니메이션은 flutter에서 explicit animation과 같다.

 

1. SharedValue

useSharedValue로 애니메이션 값을 설정한다. 값을바꾸면 그에따라 ui가 변함.

 

 

주의사항

 

sharedValue는 UI thread에서 사용되는 값이다. 고로 자바스크립트 스레드의 변수와 연산을 해서 style에 물려주면 동작을 하지 않음.

값을 섞어서 애니메이션을 주려면 AnimatedStyle이나 AnimatedProp을 사용해야함

 

2. withTiming, withSpring

withTiming, withSpring 같은걸로 값을 설정하면 worklet 기반 애니메이션이 진행된다.

 

 

3. AnimatedComponent, AnimatedStyle,  AnimatedProp

기본적으로 Animated.View 이외에 다른 컴포넌트에 애니메이션을 만드려면 AnimatedComponent를 먼저 만들어야 한다.

 

 

sharedValue를 style에 바로 적용하는것은 가능하다.

그러나 value*5 같이 변형을 한건 AnimatedStyle로 만들어서 붙어야 한다.

 

prop에다가 animation을 주고 싶으면 AnimatedProp을 써야 한다.

 

 

 

 

 

TransitionAnimation

flutter에서 implicit animation과 같다.

 

 

1. TransitionProperty

implicit 하게 동작하는 애니메이션의 핵심. AnimatedComponent는 다 저걸 가지고 있음

style에 이걸 설정하면 css에서 값이 변하면 알아서 애니메이션이 진행된다.

 

• transitionDuraiton
• transitionDelay
• transitionTimingFunction : easing과 같음
• transitionBehaviour : 이건 딱히 쓸데가 없어보임..

function App() {
  return (
    <Animated.View
      style={{
        transitionProperty: 'borderRadius',
        transitionDuration: 500,
        transitionDelay: '300ms',
      }}
    />
  );
}

 

 

 

 

 

Keyframe Animation

미리 키프레임 단위로 정의한 애니메이션을 css에다가 붙이면 알아서 진행된다.

 

function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          '100%': {
            transform: [{ translateX: 100 }],
          },
        },
        animationDuration: '300ms',
      }}
    />
  );
}

 

 

혹은 아래처럼 따로 변수로 저장 가능

 

const pulse: CSSAnimationKeyframes = {
  from: {
    transform: [{ scale: 0.8 }, { rotateZ: '-15deg' }],
  },
  to: {
    transform: [{ scale: 1.2 }, { rotateZ: '15deg' }],
  },
};

 

 

 

 

 

 

 

이밖에도 훨씬 많은 애니메이션이 있으니 공식문서 홈피 참고