[React-Native] reanimated 애니메이션(toggle 효과)

toggle을 열고 닫을 때, reanimated를 이용해서 간단한 애니메이션을 적용해 보았다.

사용한 라이브러리

• react-naitve-reanimated

RN에서 기본적으로 제공하는 Animated API는 근본적인 성능 이슈가 있다고해서
reanimated 라이브러리를 사용하였다.

과정

1. 토글 버튼을 누를 때마다 'isShown'상태가 변경되게 업데이트시키고,
   AnimatedStyle 적용할 부분에 style={AnimatedStyle}를 작성해준다.

const [isShown, setIsShown] = useState<boolean>(isOpen);
  
<Style.ToggleContainer
        onPress={() => setIsShown(prev => !prev)}>
</Style.ToggleContainer>

<Style.FooterContainer style={AnimatedStyle}>
</Style.FooterContainer>

2. useSharedValue
Reanimated에서 애니메이션에 사용되는 값을 공유 변수로 정의한다.
react useState hook을 이용해서 변하는 값을 정의하는 것처럼 reanimated에서는useSharedValue를 사용한다.

자연스럽게 애니메이션 효과를 주기 위해서는 useSharedValue로 저장한 값을 변경해야 한다.
isShown의 값이 변경될 때마다 useEffect가 실행하게 되는데
isShown이 true일 때 값을 각각 1, 220, 30으로 설정하면서 애니메이션을 적용하고,
isShown이 false일 때 값을 0으로 사용하면서 사라지는 효과를 적용하였다.
여기서 opacityValue, heightValue, paddingValue는 각각 투명도, 높이, 패딩과 관련된 값을 나타낸다.

  const opacityValue = useSharedValue(isOpen ? 1 : 0);
  const heightValue = useSharedValue(isOpen ? 220 : 0);
  const paddingValue = useSharedValue(isOpen ? 30 : 0);

  const AnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacityValue.value,
      height: heightValue.value,
      paddingVertical: paddingValue.value,
    };
  });

  useEffect(() => {
    if (isShown) {
      opacityValue.value = withTiming(1, { duration: 600 });
      heightValue.value = withTiming(220, { duration: 300 });
      paddingValue.value = withTiming(30, { duration: 300 });
    } else {
      opacityValue.value = withTiming(0, { duration: 200 });
      heightValue.value = withTiming(0, { duration: 300 });
      paddingValue.value = withTiming(0, { duration: 300 });
    }
  }, [isShown]);