[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: 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} />

🪸 Animated를 활용한 코드 예시2

const TopImage = ({Img, isScrollable}: Props) => {
  const darkmode = isDarkmode();
  const notFoundImg = darkmode ? notfoundDarkImg : notfoundLightImg;
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const heightAni = useRef(new Animated.Value(222)).current;
  const bgColorAni = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(heightAni, {
      toValue: isScrollable ? 44 : 222,
      duration: 300,
      useNativeDriver: false,
    }).start();
    Animated.timing(bgColorAni, {
      toValue: isScrollable ? 0 : 1,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, [isScrollable, heightAni, bgColorAni]);

  const backgroundColor = bgColorAni.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)'],
  });

  return (
    <Animated.View
      style={{height: heightAni, backgroundColor}}
      className="relative">
      <Animated.View style={{opacity: bgColorAni}}>
        <ImageBackground
          source={Img ? {uri: Img} : notFoundImg}
          resizeMode="cover"
          className="h-[222px] w-full"
        />
      </Animated.View>
      <Pressable
        onPress={() => navigation.goBack()}
        className="absolute left-[16px] top-[6px]">
        <ImageBackground
          source={blurBg}
          resizeMode="cover"
          className="flex justify-center items-center rounded-[8px] w-[32px] h-[32px]">
          <LeftArrowIcon />
        </ImageBackground>
      </Pressable>
    </Animated.View>
  );
};

👉 (공식문서)React-Native Animated