react-spring으로 구현해본 애니메이션 정리

 

리액트에서 웹 UI 애니메이션을 구현하는데 유명한 라이브러리인 react-spring으로 구현해본 기능들을 정리한다.

 

---

 

1. Page Transition

참고 예시 SIMPLE TRANSITION

peaceful-almeida-t7puq - CodeSandbox

history.location이 바뀔때마다 슬라이딩되어 넘어가는 애니메이션을 useTransition을 사용하여 구현하였다.

 

 

예시와 다른 점은 1 -> 2로 갈 때는 오른쪽으로, 2 -> 1로 backward될 때에는 왼쪽으로 슬라이딩되어야 하여 direction을 지정하였다.

 

2. Counter

참고 예시 링크를 저장안해서 잊어버렸다 ㅠㅠ(찾아오겠습니다 ㅠㅠ)

 

카운터 구현은 내가 딱 원하던 동작을 어떤 외국인 고수님이 구현한 코드를 분석해서 같은 로직대로 구현하였다.

 

 

 

알고리즘

1. 이전 숫자(from)와 현재 숫자(to) 자리수를 고려하지 않고 index 0부터 숫자 사이에 존재하는 1간격의 배열을 도출한다.

이 배열이 곧 transition할 숫자리스트이다.

from : '500', to : '1000' 을 예로 들면,

5와 1을 비교 : 5 < 1 === false 이므로 5와 1 사이에는 [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5]의 숫자들이 있다.

0과 0을 비교: 변화가 없으므로 [0]

0과 0을 비교 : 변화가 없으므로 [0]

(없음)과 0을 비교 : 자리수에 맞는 숫자가 없으면 0으로 간주, 따라서 [0]

 

따라서 최종 결과는

[

  [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5],

  [0],

  [0],

  [0]

]

이다.

 

2. transition할 숫자리스트들의 리스트를 순회하면서 useSpring을 적용한다.

 

3. List Animation 

useTrail을 사용하여 리스트 정렬을 구현하였다.

 

 

4. Bar Graph using useSprings

이건 팀원분이 만든 코드를 보고 따라해보았다. useSprings를 이용하여 다중 spring을 작성하는 것을 이용한 막대 그래프이다. (👍)

delay가 특이했는데 현재 item을 보고 key에 따라 각각 지연시간을 설정해주었다.