Blob 애니메이션은 웹 사이트를 더욱 생동감 있게 만들 수 있습니다.

이것은 내 첫 번째 게시물입니다 :) 시작합시다!!

결과는 다음과 같습니다.



이 예에서는 Vite을 사용하여 새 React 앱을 만듭니다.
npm create vite@latest
내 프로젝트에 대한 정보(이름 및 프레임워크)를 추가하여 완료하겠습니다.

다음으로 Blob.jsx라는 새 구성 요소를 만들고 App.jsx로 가져옵니다.



이제 react-spring을 통합하자

반응 스프링

사실 나는 몇 주 전에 react-spring에 접근했고 놀랍게도 그것이 매우 강력하다는 것을 알았습니다.

React-spring은 매우 "사실적"이고 "물리적"인 멋진 애니메이션을 만들 수 있는 많은 기회를 제공합니다.

사용법도 매우 쉽습니다. 다음과 같이 설치하면 됩니다.
npm install react-spring

얼룩 생성기

지금부터 앱을 설정하기만 하면 됩니다. 다음 단계에서는 원하는 애니메이션을 만들기 위해 경로 사이를 전환하기 위해 두 개의 임의 모양의 블롭(.svg 형식)을 만들어야 합니다.

Haikei을 사용하여 생성하겠습니다.
svg 형식을 다운로드합니다.

다음으로 이 두 개의 svg blob을 내 Blob.jsx 구성 요소에 복사하고 삭제합니다<rect x={0} y={0} width={900} height={600} fill="#FF0066" />(그냥 배경일 뿐입니다).

<div>
                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(407.8302694033731 297.56887719695067)">
                        <path d="M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7" fill="#BB004B" />
                    </g>
                </svg>

                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(477.0920346881802 291.5807221558637)">
                        <path d="M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1" fill="#BB004B" />
                    </g>
                </svg>
</div>

그런 다음 각 SVG 경로의 "d"속성을 추출하여 blob1 및 blob2로 저장합니다.

   const blob1 = "M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7"

    const blob2 = "M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1"

또한 하나의 SVG 태그를 유지하고 경로에 blob1을 사용합니다.

 <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                <g transform="translate(407.8302694033731 297.56887719695067)">
                    <path d={blob1} fill="#BB004B" />
                </g>
</svg>

지금부터 blob에 스프링 애니메이션을 추가하여 blob1에서 blob2 모양으로 변환할 수 있습니다.

    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
    })

useSpring을 가져오고 구성 요소에 애니메이션을 적용하는 것을 잊지 마십시오. 그리고 "d"속성의 blob1를 blobAnimation.x로 바꿉니다.

import { useSpring, animated } from 'react-spring'

...

<animated.path d={blobAnimation.x} fill="#BB004B" />

이제 거의 완료되었지만 애니메이션이 너무 빠르므로 config 옵션을 추가하여 지속 시간을 추가하고 무한 루프 및 역방향 루프를 만들기만 하면 됩니다.

useSpring 코드는 다음과 같습니다.

    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
        config: {
            duration: 3000
        },
        loop: { reverse: true }
    })

그리고 네, 우리가 해냅니다!



유용하고 자신의 프로젝트에 적용할 수 있기를 바랍니다! :디