react-native-reanimated

react-native-reanimated는 리액트 네이티브 환경에서 기본적으로 제공하는 animated보다

더 복잡하고 자연스러운 애니메이션을 구현할 수 있게 해주는 라이브러리다.

1. 기본 애니메이션 구성요소

// 애니메이션 값 생성
const opacity = useSharedValue(1); // 초기값 1로 설정 - 애니메이션 스타일 정의
const animatedStyle = useAnimatedStyle(() => ({
  opacity: opacity.value
}));
 
// 애니메이션 실행 함수
const startAnimation = useCallback(() => {
  opacity.value = withDelay(2000, withTiming(0, { duration: 300 }));
}, [opacity]);

2. 주요 메소드 설명

useSharedValue:

애니메이션에 사용될 값을 저장하는 특별한 상태
Native 스레드와 JS 스레드 간에 공유되는 값

useAnimatedStyle:

애니메이션되는 스타일을 정의하는 훅
SharedValue의 변화를 실시간으로 반영

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ scale: scale.value }],
  opacity: opacity.value
}));

3. 애니메이션 타입들

withTiming:

부드러운 타이밍 기반 애니메이션

withTiming(1, {
  duration: 1000,// 지속시간
  easing: Easing.bounce// 이징 함수
})

withSpring:

스프링 물리 기반 애니메이션

withSpring(1, {
  damping: 10,// 감쇠
  stiffness: 100// 강성
})

withDecay:

감속 애니메이션 (스크롤 같은 동작)

withDecay({
  velocity: 1,// 초기 속도
  deceleration: 0.997// 감속률
})

withDelay:

지연 시간 후 애니메이션 실행

withDelay(1000, withSpring(1))

withSequence:

여러 애니메이션을 순차적으로 실행

withSequence(
  withTiming(2, { duration: 500 }),
  withSpring(1)
)

withRepeat:

애니메이션 반복

withRepeat(
  withTiming(1, { duration: 1000 }),
  3, // 반복 횟수 (-1은 무한반복)
  true // reverse 여부
)

4. worklet 함수

const worklet = useAnimatedStyle(() => {
// runOnJS: Native -> JS 스레드로 함수 실행
  runOnJS(someJSFunction)();
 
// interpolate: 값의 범위를 변환
const opacity = interpolate(
    progress.value,
    [0, 1],
    [0, 1],
    Extrapolate.CLAMP
  );
 
return { opacity };
});

이런 메소드들을 조합하여 다양한 애니메이션 효과를 만들 수 있다.

부드러운 전환이 필요할 때: withTiming
자연스러운 물리 효과가 필요할 때: withSpring
스크롤이나 플릭 효과: withDecay
복잡한 시퀀스: withSequence
반복 애니메이션: withRepeat