[뉴스레터 앱] 로딩 애니메이션 기능

앱을 처음 실행시키면 나오는 로딩 화면에서 아이콘이 움직이는 애니메이션 기능을 넣고 싶었다. 여러가지 방법이 있지만 useState와 SetInterval을 이용해 이미지를 연속적으로 반복해서 보여주는 방법을 이용했다.

 

App.js 파일에서는 3초 동안 로딩 화면을 보여주고 메인 페이지로 넘어가도록 되어있다.

 

그리고 로딩 화면을 구성하는 Loading.js 파일. 하나하나 설명을 해보자면,

 

필요한 Hooks이나 라이브러리 등을 import 해준다.

 

여기는 디자인적인 부분. 보통 Reac Native로 앱 개발을 하면 StyleSheet로 디자인을 많이 하지만, 나는 styled-components를 이용해서 디자인을 해주었다. 아직은 디자인이라고 할 정도는 아니지만, 배경색과 정렬 정도를 해줬다. styled-components를 이용하면 web 개발에서 css를 하는 것과 거의 유사한 형태로 디자인을 할 수 있게 된다. 웹 개발에 익숙한 사람에게는 StyleSheet보다 훨씬 편한 것!

 

다음은 연속적으로 보여줄 로딩 이미지들을 animationImages라는 배열에 넣어주었다. 엄밀히 말하자면 이미지 파일을 넣은 것이 아니라 이미지 파일이 있는 경로를 저장해둔 것이다. 저 순서대로 반복해서 보여줄 것이다.

 

이제 로딩 페이지의 핵심이 되는 부분. imageNumber가 바뀔 때마다 useEffect가 반복 실행되고, 0.1초에 한 번 이미지가 바뀌도록 작성하였다. 로딩 페이지가 총 3초 동안 보여지니까, 0.1초마다 이미지가 바뀌고 그게 3초동안 지속된다고 보면 된다. imageNumber는 앞에서 animaionImages 배열에 저장해둔 이미지를 선택하기 위한 Index라고 할 수 있다. 0.1초마다 1씩 증가하는데, animationImages의 index가 0~5까지이므로 5를 넘어서는 안 된다. 때문에 %6을 해주는 것을 볼 수 있다.

 

 

잘 실행된다! 로딩 아이콘 이미지 디자인 때문에 여기에 올릴 수는 없지만... 아무튼 잘 실행된다.

 

지금은 임의로 이미지 사이즈를 100px로 해주었는데 이미지 비율을 생각하고, 반응형까지 고려하여 다시 수정해야 할 것 같다. 배경 색상이나 속도 부분도 수정이 필요하다. 지금은 0.1초마다 한 번씩 이미지가 바뀌고 있는데, 0.25초마다 바뀌도록 했을 때는 깜빡깜빡 거리는 것처럼 보여서 부자연스러웠다. 아마 이전 이미지가 사라졌다가 다음 이미지가 추가되는 방식으로 진행되는 것 같다. 그 사이의 텀이 있어 깜빡이는 것처럼 보이는 것이고... 또 지금은 너무 빠른 것 같기도 하고... 적절한 시간대를 찾아야 할 것 같다. 지금은 또 로딩 아이콘 이미지의 배경을 투명으로 바꾸지 않아서 더 티가 나는 것일 수도 있다. 투명으로 바꿔보고 한 번 더 실행해보자.

 

+) 참고

React | 타이머 만들기 ( Hooks, setInterval )

 

[React Native] 커스텀 로딩 애니메이션 스크린 구현하기