framer-motion 라이브러리, path-spacing, path-offset 기능은 뭘까(추측)

1. 글의 목적

framer-motion은 리엑트에서 컴포넌트에 애니메이션을 넣는 라이브러리다.
그 중, svg의 path에 애니메이션을 넣는 방법이 있는데,

이 중에서 path-spacing, path-offset의 기능이 무엇인지 알기 어려웠다.
공식 문서에서도 별 다른 설명이 없고, 구글링을 해봐도, chat GPT에게 물어봐도 만족할만한 답변이 없어서 
내 식대로 정리해본다.

두 속성을 넣는 방법은 공식문서에 있으니 자세한 설명은 생략한다.

아래에서는 두 속성값에 의해 애니메이션이 어떻게 바뀌는지 살펴본다.

 

2. path-spacing

아래 예시를 보자

 

솔직히 보고도 잘 감이 안잡힌다...
확실한건, 1일 때는 기존 것과 별반 차이가 없다.

반면, 0.5에서는 path 그리기가 두 지점에서 시작한다. 기존 시작점과 path 그리기 애니메이션의 중간(0.5)에 해당하는 지점이다. 0.3에서는 path 그리기가 세 지점에서 시작한다. 기존 시작점과 0.3에 해당하는 지점, 0.6지점, 0.9 지점이다.

이걸로 추측하건대, path-spacing은 기존의 선분 그리기 동작을 한 붓으로 그리는 게 아니라 여러 붓으로 나눠 그리는 것 같다. 0.3이면 0, 0.3, 0.6, 0.9 지점에서 동시에 path 애니메이션이 시작한다.

감이 잘 안온다면 애니메이션의 duration을 30초 정도로 잡고 보자. 그러면 잘 보일 것이다.

 

2. path-spacing을 어떻게 사용할까

음... 간지나게 그릴때?

한 붓 그리기 보단, 여러 붓으로 동시에 그리는 애니메이션이 멋지니까.

 

 

아직까진 적절한 용도를 찾지 못하겠다.

3. path-offset

path offset은 path의 시작점을 재설정한다. 기본값은 0이고 값이 올라갈수록 path 그리기의 중간지점에서 시작한다.

주의할 점은 이 값을 설정할 경우, 시작 값을 얼마로 설정했든 종료 값은 0으로 설정해야 한다. 그렇지 않으면, path 그리기 애니메이션이 끝까지 이뤄지지 못한다.