React의 간단한 수제 로딩 화면

참조 튜토리얼

지난 블로그에서 Tony Heimark가 매우 쉽게 따라할 수 있는 내용을 언급했습니다. 나는 그것에서 벗어나지만 대신 애니메이션을 만들 것입니다. 그는 react-spinners 패키지를 사용합니다. 그 대신 flaticon.com에서 찾은 꽃 아이콘을 사용하겠습니다.

이미지 찾기

나는 구글에 들어가서 "꽃 아이콘"을 입력했다. flaticon.com에 다녀왔습니다. 이미지 주소에 대한 이미지를 마우스 오른쪽 버튼으로 클릭했습니다. 이것은 배경이없는 이미지를 제공합니다.

App.js

App.js에서 내부에 setTimeout이 있는 useEffect를 만들었습니다. 화면이 로드되는 시간입니다. 5초 동안 로드됩니다.

  const [loading, setLoading] = useState(false);
  useEffect(() =>
  {
    setLoading(true)
    setTimeout(() =>
    {
      setLoading(false)
    }, 5000)
  }, [])

반환되는 동안 로드 상태로 삼항 문을 만들었습니다. 로딩이 참이면 로딩 화면을 보여줍니다. 로딩이 거짓이면 홈페이지를 보여줍니다.

  return (
    <div class="App">
      {loading ? 
        <Flower />
      :
      <div class="homePage">

로딩 화면에 "Flower"라는 별도의 구성 요소를 만들었습니다.

Flower.js

Flower.js에서 애니메이션이 포함된 useEffect를 만들었습니다.

  useEffect(() =>
  {
     gsap.to("#flower", 1.75, 
     {
        y: 75,
        yoyo: true,
        repeat: -1, 
        ease: "power1",
     });
 }, [])

이 애니메이션은 꽃이 위아래로 뜨게 만듭니다. 1.75는 애니메이션 시간입니다. "y"는 75픽셀 위로 이동합니다. 요요가 참이라는 것은 꽃이 75픽셀 위아래로 요요할 것임을 의미합니다. 반복이 -1이면 영원히 반복된다는 의미입니다. 용이함은 그것이 움직이는 스타일의 종류입니다.

반환 시 이미지와 로드 중이라는 태그를 추가했습니다.

  return (
    <div class="loadingScreen">
        <img className="bus" src="https://t4.ftcdn.net/jpg/01/76/26/25/360_F_176262588_5UBYLDB9mqLxdqavixo0d4XF4g6ydFpZ.jpg" />
        <h1 id="loadingText">Loading...</h1>
    </div>
  )

나는 그것을 가지고 놀고 있었고 또 다른 애니메이션 아이디어는 꽃이 회전하는 것입니다.

gsap.to("#flower", 2, 
{
    rotation: 360,
    repeat: -1, 
    ease: "slow",
 });

이것은 "느린"스타일로 꽃을 영원히 360도 회전시킵니다.