[React Native] Animated.View를 사용해서 Pulse 애니메이션 구현하기 (Expo)

React Native에서 녹음 버튼의 애니메이션을 적용해보도록 하자

맥박이 뛰는 것 처럼 보이는 맥박(Pulse) 애니메이션

 

React Native

1. 상태와 값 설정하기

const animatedValue = useState(new Animated.Value(1))[0];

animatedValue의 값 1은 애니메이션에서 시작 시의 기본 상태를 나타난다. 

이 값은 아래에 나오는 Animated.timing 메소드에서 toValue를 어떻게 설정하느냐에 따라 달라진다.
예를 들어서, animatedValue가 0에서 3 사이의 값일 때 해당 범위로 매핑된다.

 

2. Pulse 애니메이션 시작하기

  const startPulseAnimation = () => {
    console.log('Pulse animation started.');
    
    Animated.loop( // 무한 루프로 애니메이션 반복 실행
      Animated.sequence([
        Animated.timing(animatedValue, { // animatedValue 값을 일정 시간에 따라 변경
          toValue: 0.3,
          duration: 1500,
        }), // 1.5초 동안 기본값인 1에서 목표값인 0.3으로 감소
        Animated.timing(animatedValue, {
          toValue: 1,
          duration: 1500,
        }), // 1.5초 동안 0.3에서 목표값인 1로 증가
      ])
    ).start();
  };

Animated.loop를 사용해서 애니메이션을 무한 반복하고,
Animated.sequence를 통해서 애니메이션이 순차적으로 실행되게끔 설정한다.

버튼의 색상은 animatedValue에 따라 변경되며, 색상은 다음 작업에서 설정한다.

 

3. Pulse 애니메이션 적용하기

        <Animated.View
          style={[
            styles.recordButton,
            isRecording && {
              backgroundColor: animatedValue.interpolate({
                inputRange: [0.3, 1],
                outputRange: ['#FFCCCC', '#FF0000'],
              }),
            },
          ]}
        >
          <Pressable onPress={handlePress} style={styles.pressableContainer}>
            <MicSvg />
          </Pressable>
        </Animated.View>

Animated.View를 사용하여 애니메이션을 적용한다.

startPulseAnimation에서 설정한 toValue의 범위가 inputRange의 범위가 일치해야 한다.
그렇지 않으면 애니메이션 효과가 다르게 나타날 수 있다.

위 코드에서는 0.3일때 #FFCCC, 1일때 #FF000의 색상으로 나타나게 되며, 
이 구간의 색상으로 맥박 애니메이션의 동작하게 된다.

 

4. Pulse 애니메이션 정지

const stopPulseAnimation = () => {
  animatedValue.stopAnimation(() => {
    animatedValue.setValue(1);
  });
};

stopAnimation을 통해 실행 중인 애니메이션을 중지한다.

애니메이션 값은 초기값 1로 다시 설정하여 원래 상태로 되돌린다.