[FE] [04-09] 페이지 간 이동시 보여줄 화면 제작

[KimGaeun0806]

📎 이슈번호

#98

📃 변경사항

• 공간을 통과하는 듯한 느낌을 주는 애니메이션 생성

📌 중점적으로 볼 부분

• useFrame 부분

🎇 동작 화면

2023-11-17.12.31.21.mov

💫 기타사항

• 색상같은 것은 임시로 해두었습니다.

• 디자인 확정이 아니라 대략적인 느낌만 봐주시면 될 것 같습니다.

• 몇 초 지난 후 화면의 중앙부터 서서히 흰색으로 변하는 애니메이션을 구현할까 했는데...

  • 화면이 한 번에 흰색으로 변하는 것까진 됐는데, 중앙부터 서서히 변하는 것은 아직 구현하지 못했습니다.
  • 하단에 엄청 쎈 광원을 두어 밑으로 내려가면서 점점 하얘지는.. 그런 연출도 가능할까요??
  • 아무튼 이 부분도 확정이 아니라 그냥 시도해본거라 커밋은 하지 않았습니다.
  • 수정하면 좋을 부분이나, 처음과 끝에 넣으면 좋을 애니메이션이 있다면 알려주세요.

• 기존 backgroundStars 컴포넌트를 변형하여 만들었습니다.

  • positions 부분에 차이가 있습니다.
    • 점이 아닌 선이므로 x, y, z 좌표를 두 번씩 넣습니다.
  • lineSegments와 LineBasicMaterial을 사용합니다.

• 우주공간의 x, z 범위는 줄이고 y 범위를 늘렸습니다.

• y범위의 끝에서 카메라가 서서히 내려가는 식으로 동작합니다.

• 카메라가 우주의 끝을 넘어서면 더이상 애니메이션이 보이지 않습니다.

• 실제로는 몇 초간만 보여주고 끝낼 화면이라 그 부분은 신경쓰지 않았습니다.

[MinboyKim]

고생많으셨습니다! 🐧
매직넘버 상수화까지 잘해주셨네요 👍👍
점점 더 빠르게 가속되는 애니메이션을 넣어도 좋을것 같아요 베리굿굿

[bananaba]

LGTM

[MinboyKim]

LGTM 🐧