SVG path 스케일링 (for responsive object-path)

 

 

CSS path 애니메이션

CSS에서 offset-path와 offset-distance 속성을 사용하여 path 애니메이션을 만들 수 있다.

offset-path 속성은 SVG path 엘리먼트의 d 속성에 사용하는 path 문자열을 path 함수에 넣어 설정한다.

offset-distance 속성은 "0%", "100%"와 같이 퍼센트를 입력한다.

 

다음 코드는 Framer motion 라이브러리를 통해 offset-distance를 점차 증가시켜서 path 애니메이션을 만드는 간략한 예시이다.

<motion.div
  style={{
    offsetPath: path(
      "M 239 17 C 142 17 48.5 103 48.5 213.5 C 48.5 324 126 408 244 408 ..."
    );
  }}
  initial={{ offsetDistance: "0%" }}
  animate={{ offsetDistance: "100%" }}
/>

 

이런 방식으로 만든 path 애니메이션 예제를 code sandbox에서 찾을 수 있었다.

 

 

offset-path 스케일링 이슈

offset-path를 설정할 때 스케일을 지정할 수 없는 문제가 있다.

위 예제에서 보면 애니메이션 되는 크기가 고정되어 있으며, 크기를 바꾸려 해도 (그려지는 SVG path의 크기는 바꿀 수 있지만) 애니메이션 경로의 크기는 변경할 수 없다.

 

path 스케일링 구현

offset-path 스케일링이 불가능한 문제를 해결하기 위해 path 문자열을 직접 파싱하여 스케일링하는 코드를 stack overflow에서 찾을 수 있었다.

위 코드를 정리하여 PathScaler 클래스를 만들었으며, 다음과 같이 사용하도록 했다.

const pathScaler = new PathScaler(path, {원래 width}, {원래 height});
const scaledPath = pathScaler.getScaledPath({변환할 width}, {변환할 height})

 

PathScaler 클래스의 전체 코드는 github에서 확인 가능하다.

 

Responsive path 애니메이션

PathScaler를 활용하여 앞서 발견한 예제를 responsive하게 수정하였다.

아래와 같이 창 크기에 맞춰서 SVG path와 흰 상자의 애니메이션 경로(offset-path)가 스케일링된다.

(전체 코드는 code sandbox에서 확인할 수 있다.)

 

 

다음은 실제 홈페이지에서 path 애니메이션을 사용한 모습이다.
첫 화면에서 스크롤을 내리면, 비행기가 경로를 따라 스크롤 위치만큼 이동하는 모습을 볼 수 있다.