[RN] 🪸Animated로 애니메이션 적용하기

▷ Animated

Animated는 애니메이션을 쉽게 만들 수 있도록 도와준다.

컴포넌트의 스타일, 위치, 투명도 등의 속성을 애니메이션으로 변경하고, 애니메이션 시간, 타이밍, 반복 등을 세밀하게 제어할 수 있다.

---

🪸 Animated value 생성

// 값을 직접 바꾸면 안되기에 useRef를 사용함
// Value의 생성자 함수 인자에는 초깃값을 넣어줌
const refAnimation = useRef(new Animated.Value(0)).current;

---

🪸 interpolate, Animated.View

interpolate: Value가 가지고 있는 값을 기준으로 새로운 값을 생성

const widthAnimation = refAnimation.interpolate({
  inputRange: [0, 10], // refAnimation의 값이 0에서 10 사이로 변화할 수 있음
  outputRange: ['0%', '100%'], // refAnimation이 0일 때는 '0%'가 생성, 값이 10일 때는 '100%'가 생성
});

...
// Animated 연결
<Animated.View style={{ width: widthAnimation }} />

---

🪸 Animated.timing

Animated.timing을 이용해서 Animated Value의 값을 변경할 수 있다.

Animated.timing(refAnimation, {
  toValue: 0, // 애니메이션의 목표, refAnimation이 이 값으로 변화 (필수⭐️)
  useNativeDriver: true, // 네이티브 드라이버 사용 여부 (필수⭐️) - false일 경우 애니메이션이 부드럽지 않을 수 있음.
  duration: 1000, // 애니메이션의 지속 시간을 밀리초 단위로 지정 - 기본값 500
  delay: 0, // 애니메이션의 시작을 지연시킬 시간
  isInteraction: true, // 애니메이션이 다른 상호작용과 상호작용하는지 여부 - 기본값 true
  easing: Easing.inOut(Easing.ease), // 애니메이션의 가속도 함수를 설정, Easing 모듈을 사용하여 설정함 - 기본값 Easing.inOut(Easing.ease)
}).start(() => {
  // 애니메이션이 완료되었을 때 실행할 작업
})

---

🪸 Animated를 활용한 코드 예시

7초동안 왼쪽에서 오른쪽으로 부드럽게 움직이는 애니메이션

import { View, Animated } from 'react-native';
import React, { useEffect, useRef } from 'react';

...
const refAnimation = useRef(new Animated.Value(-380)).current;

useEffect(() => {
  Animated.timing(refAnimation, {
    toValue: 0,
    delay: 0,
    duration: 7000,
    useNativeDriver: true,
  }).start(() => {
    navigation.goBack(); // 애니메이션이 끝나면 뒤로가기 됨
  });
}, [refAnimation, navigation]);

const animatedStyle = {
  height: '100%',
  backgroundColor: 'skyblue',
  transform: [{translateX: refAnimation}],
};

...
<Animated.View style={animatedStyle} />

👉 (공식문서)React-Native Animated