6.5.3 spring 사용하기

기존에는 timing 함수로 애니메이션 효과를 적용했는데, 이외에도 spring이라는 함수가 있습니다. timing과 비슷한데 값이 단순히 toValue로 지정한 값으로 서서히 변하는 것이 아니라, 마치 스프링처럼 통통 튀는 효과가 나타납니다. 예를 들어 0에서 1로 설정한다면 다음과 같이 수치가 변경됩니다.

0 → 1.2 → 0.9 → 1.1 → 1

목푯값에 도달했을 때 멈추는 것이 아니라 스프링이 눌렸다가 다시 펴질 때처럼 목푯값 근처에서 왔다갔다(oscillate) 합니다.

FloatingWriteButton을 다음과 같이 수정해보세요.

components/FloatingWriteButton.js - useEffect

useEffect(() => {
  Animated.spring(animation, {
    toValue: hidden ? 1 : 0,
    useNativeDriver: true,
    tension: 45,
    friction: 5,
  }).start();
}, [animation, hidden]);

spring 함수에서는 다음과 같은 옵션을 설정해줄 수 있습니다.