[React-Native] 일정 시간 뒤 자연스럽게 사라지는 애니메이션 구현

import React, { useCallback, useEffect } from 'react';
import { ImageBackground, Text, TouchableOpacity, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
} from 'react-native-reanimated';

import styles from './styles';

type Props = {
  onPress: () => void;
};

const TooltipWithButton = ({ onPress }: Props) => {
  const opacity = useSharedValue(1);

  const startAnimation = useCallback(() => {
    opacity.value = withDelay(5000, withTiming(0, { duration: 500 }));
  }, [opacity]);

  useEffect(() => {
    startAnimation();
  }, [startAnimation]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
    };
  });

  return (
    <View style={{ overflow: 'visible', position: 'relative' }}>
      <TouchableOpacity activeOpacity={1} onPress={onPress} style={styles.container}>
        <View style={styles.textContainer}>
          <Text style={styles.text}>Button</Text>
        </View>
      </TouchableOpacity>
      <View
        style={[
          {
            overflow: 'visible',
            position: 'absolute',
            top: -12,
            left: -176,
          },
        ]}
      >
        <Animated.View style={[styles.animationContainer, animatedStyle]}>
          <View style={[styles.tooltipContainer]}>
            <View style={styles.tooltipTextContainer}>
            	<Text style={styles.tooltipText}>Tooltip</Text>
            </View>
          </View>
        </Animated.View>
      </View>
    </View>
  );
};

export default TooltipWithButton;

 

버튼 옆에 툴팁이 있다가, 5초 뒤 툴팁은 자연스럽게 사라지는 애니메이션을 만들었다.

 

1. 애니메이션 상태 관리

const opacity = useSharedValue(1);

 

Reanimated의 useSharedValue 훅을 사용하여 공유 값을 관리한다.

처음에는 1(완전히 보이는 상태)로 설정한다.

 

2. 애니메이션 로직

const startAnimation = useCallback(() => {
  opacity.value = withDelay(5000, withTiming(0, { duration: 500 }));
}, [opacity]);

 

withTiming(0, { duration: 500 }): 500ms(0.5초) 동안 opacity 값을 1에서 0으로 부드럽게 변경하고,

withDelay(5000, ...)로 애니메이션 시작을 5000ms(5초) 지연시킨다.

 

3. 애니메이션 시작

useEffect(() => {
  startAnimation();
}, [startAnimation]);

 

그리고 컴포넌트가 마운트되면 useEffect로 애니메이션을 시작한다.

 

4. 애니메이션 스타일 정의

const animatedStyle = useAnimatedStyle(() => {
  return {
    opacity: opacity.value,
  };
});

Reanimated의 useAnimatedStyle 훅을 사용하여 애니메이션 스타일을 정의한다.

 

애니메이션 정리:

 

1. 컴포넌트가 렌더링되면 툴팁은 완전히 보이는 상태(opacity: 1)로 시작한다.

2. 5초 동안 대기. (withDelay(5000, ...) 부분)

3. 그 후 0.5초 동안 투명도를 1에서 0으로 부드럽게 전환한다. (withTiming(0, { duration: 500 }) 부분)