SVG 모프 애니메이션: 애니메이션 전에 경로 맞추기

마크 전체가 회전하는 동안 외곽선은 그대로 유지해야 한다면 대신 공통 SVG 회전 중심을 설정하세요.

SVG 모프 애니메이션은 두 상태 사이에서 도형의 형태를 바꿉니다. 경로 데이터를 네이티브 방식으로 보간하려면 일치하는 명령 구조를 준비하고 어떤 점이 서로 대응해야 하는지 결정하세요. 두 끝 상태가 각각 보기 좋아도 중간에서는 도형이 무너지거나 뒤틀릴 수 있습니다.

W3C의 경로 데이터 애니메이션 규칙은 부드러운 보간을 위해 같은 수와 종류의 명령이 같은 순서로 있어야 한다고 요구합니다. 이는 구조적 요구 사항입니다. 로고의 어떤 모서리가 다음 상태의 어떤 모서리가 되어야 하는지 결정하지는 않습니다.

살펴볼 수 있는 작은 쌍으로 시작하세요. 아래의 직접 만든 예제는 정사각형, 마름모, 의도적으로 뒤집은 정사각형으로 두 결정을 구분합니다.

모서리가 대응하는 두 경로 만들기

직접 작성한 정사각형과 마름모는 모두 M L L L Z를 사용합니다. 첫 모서리로 이동하고 세 선을 그린 뒤 도형을 닫습니다. 각 좌표 쌍은 다른 경로의 같은 위치에 대응합니다.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

SVG의 animate 요소는 시간에 따라 속성을 바꿉니다. 여기서는 2초 동안 d를 바꿉니다. 애니메이션의 fill="freeze"는 최종 상태를 유지하며, 경로의 녹색 fill은 별도의 칠 설정입니다.

확인하는 동안 예제를 별도의 HTML 페이지에 두세요. 아래의 확인 스크립트가 없어도 자동으로 시작합니다. 실제 컨트롤에서는 언제 재생할지 결정하고 인터페이스에 적합한 정적 상태를 제공하세요.

모서리 대응은 명확하게 지정됩니다.

두 외곽선은 둘레를 같은 방향으로 따라갑니다. 첫 모서리는 마름모 위쪽으로, 두 번째는 오른쪽으로 이동하며 나머지도 같은 식으로 이어집니다. 이는 직접 정한 디자인 선택이며 도형의 의미에 대한 해석이 아닙니다.

실제 보간을 일시 정지하기

이징을 조정하거나 장식 효과를 추가하기 전에 시작, 중간, 완료 상태를 살펴보세요. 위 SVG에서 이 보조 함수는 타임라인을 일시 정지하고 초 단위의 시간으로 이동합니다.

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN은 SVG 타임라인 제어를 위한 pauseAnimations() 및 setCurrentTime()을 설명합니다. 보조 함수를 값 0, 1, 2를 사용하는 버튼에 연결하세요. 이는 세 개의 대체 그림이 아니라 하나의 보간 안에 있는 세 위치입니다.

1초 시점에 선형 보간은 각 좌표를 두 끝값의 중간에 둡니다. 따라서 첫 모서리는 55, 25에 있습니다. 이 직접 만든 예제의 전체 중간 상태는 다음과 같습니다.

M55 25L135 55L105 135L25 105Z

이 네이티브 SVG 애니메이션을 브라우저에서 시작, 중간, 완료 상태로 확인한 뒤 한 번 재생했습니다. 중간 상태는 채워진 사각형을 유지했고 재생은 마름모에 도달했습니다. 이 관찰은 테스트한 브라우저의 직접 작성 경로에 적용되며 PerfectVector 변환 결과나 브라우저 간 호환성 테스트가 아닙니다.

명령 수가 같아도 모프가 잘못될 수 있습니다

시작 정사각형은 유지하되 대상 정사각형의 모서리 순서를 뒤집으세요.

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

두 끝 상태는 같은 정사각형처럼 보입니다. 두 문자열은 여전히 M L L L Z를 사용합니다. 그러나 두 번째와 네 번째 모서리는 이제 도형을 가로질러 자리를 바꿉니다. 중간 상태에서 두 점의 좌표가 일치합니다.

M30 30L80 80L130 130L80 80Z

네 점 모두 대각선 위에 놓입니다. 브라우저 테스트에서는 채워진 정사각형이 중간에 그 대각선으로 무너졌다가 끝에서 정사각형으로 돌아왔습니다. 명령 구조가 일치하여 보간은 가능했지만 잘못된 점을 대응시켜 원치 않는 결과가 만들어졌습니다.

내보낸 경로 쌍이 뒤틀린다면 각 경로의 첫 점과 진행 방향을 살펴보세요. 그런 다음 모서리와 곡선 특징이 대응하는 위치에 있는지 확인하세요. 무분별하게 노드를 추가하면 이를 파악하기 더 어려워질 수 있습니다. 노드 정리 안내는 정적 아트워크 단순화에 도움이 되지만 두 상태에 걸쳐 정한 대응 관계는 보존하세요.

구멍과 분리된 부분도 고려하기

로고에는 바깥 경계, 구멍, 떨어진 강조 요소가 있을 수 있습니다. 이들은 다음 상태에서 의도적으로 짝을 지정해야 할 부분으로 다루세요. 애니메이션 전에 어떤 부분이 무엇으로 바뀌는지 목록을 만드세요. 한 상태에만 구멍이 있다면 노드 수를 맞추면 해결될 것이라고 가정하지 말고 구멍이 어떻게 사라져야 할지 결정하세요.

fill-rule 참조는 SVG가 경로 내부 영역을 결정하는 방식을 설명합니다. 복합 경로를 준비하고 테스트할 때 의도한 채우기 동작을 유지하세요. 정적인 끝 상태부터 구멍이 잘못 보인다면 전환을 추가하기 전에 구멍 채워짐 문제 해결 안내를 사용하세요.

실용적인 확인 순서는 다음과 같습니다.

1. 각 끝 상태의 실루엣, 구멍, 떨어진 세부 요소를 확인하세요.
2. 대응하는 하위 경로나 별도 요소를 식별하세요.
3. 시작점, 방향, 유용한 특징을 맞추세요.
4. 중간 상태에 경계 교차나 사라지는 세부 요소가 있는지 확인하세요.
5. 도형을 확인한 후에만 타이밍을 조정하세요.

작은 강조 요소가 독립적으로 서서히 사라지거나 이동해야 한다면 별도 요소가 제어하기 쉬울 수 있습니다. 이 선택은 애니메이션 설계의 일부이며 단일 복합 경로에 억지로 넣을 필요는 없습니다.

사용하는 애니메이션 방식의 규칙 확인하기

네이티브 예제는 의도적으로 일치하는 명령을 사용합니다. 라이브러리는 추가 준비를 할 수 있어 요구 사항이 다를 수 있습니다.

GSAP의 MorphSVG 문서는 경로 데이터를 3차 곡선으로 변환하고 필요한 경우 점을 추가하는 과정을 설명합니다. shapeIndex 같은 대응 제어도 제공합니다. 독립적으로 내보낸 두 도형이 이미 맞는다고 가정하지 말고 이 제어 기능으로 대응 관계를 검토하세요.

KUTE.js는 SVG Morph 안내에서 하위 경로를 위한 별도 작업 흐름을 포함한 다른 준비 모델을 설명합니다. 네이티브 경로 제약이나 다른 라이브러리의 조언을 적용하기 전에 실제 사용하는 버전과 컴포넌트를 확인하세요.

그 방식에 맞는 작고 대표적인 쌍을 선택하고 중간 도형을 살펴보세요. 정사각형에서 마름모로의 테스트가 성공해도 복잡한 복합 로고의 동작이 입증되지는 않습니다. 애니메이션 준비 중 생긴 변경과 원래 디자인을 구분할 수 있도록 소스 아트워크 사본을 보관하세요.

상태를 대응시키기 전에 래스터 아트워크 준비하기

벡터 마스터가 없고 PNG나 JPG 아트워크만 남았다면 PerfectVector의 이미지 벡터화 작업 흐름으로 편집 가능한 SVG 후보 파일을 준비할 수 있습니다. 실루엣, 구멍, 분리된 영역을 원본과 비교한 뒤 다운로드한 경로를 살펴보세요. SVG 편집 안내는 다음 정리 단계를 다룹니다.

그림 두 개를 벡터화해도 점 사이의 의미상 대응이 정해지거나 완성된 모프가 만들어지지는 않습니다. 먼저 각 정적 그림을 확인하고 선택한 애니메이션 도구에 맞게 쌍을 준비하세요. 편집 가능한 벡터 마스터가 이미 있다면 래스터 사본을 다시 추적하지 말고 마스터를 사용하세요.

쌍에 의미 있는 변경을 할 때마다 중간 상태를 테스트하세요. 끝 상태가 단순해져도 전환이 의도한 특징을 따라야 유용합니다. 블로그의 편집 글은 관련된 소스 준비 안내를 제공합니다.

FAQ

SVG 경로를 모프하려면 점 수가 같아야 하나요? 네이티브 경로 데이터 보간에서는 명령 종류와 순서를 포함한 명령 구조의 일치가 중요합니다. 라이브러리는 다른 구조를 정규화할 수 있으므로 점 수에만 의존하지 말고 해당 문서를 확인하세요.

끝 상태가 올바르게 보이는데 SVG 모프가 뒤틀리는 이유는 무엇인가요? 점이 원치 않는 순서로 대응할 수 있습니다. 시작점, 방향, 특징 대응을 확인한 뒤 중간 상태를 살펴보세요. 같은 끝 상태의 실루엣이 무너지는 중간 도형을 숨길 수 있습니다.

별도의 SVG 파일 두 개를 자동으로 모프할 수 있나요? 애니메이션 도구에는 호환되거나 정규화된 도형과 상태 사이의 유용한 대응 관계가 필요합니다. 파일 확장자 두 개만으로는 대응 관계가 생기지 않습니다. 경로, 구멍, 분리된 부분을 살펴보세요.

PNG 두 개를 SVG로 변환하면 대응된 모프 쌍이 만들어지나요? 아닙니다. 변환은 정적인 벡터 후보 파일을 준비합니다. 각 부분과 점을 대응시키고 애니메이션 방식을 선택하며 전환을 확인해야 합니다.

Sources

1. W3C — SVG 경로 — 네이티브 경로 데이터 보간 구조와 매개변수 대응을 정의합니다.
2. MDN — animate — 시간에 따른 속성 애니메이션을 설명합니다.
3. MDN — pauseAnimations — 확인용 타임라인의 일시 정지를 지원합니다.
4. MDN — setCurrentTime — SVG 타임라인에서 초 단위로 이동하는 기능을 설명합니다.
5. MDN — fill-rule — 복합 아트워크의 내부 영역 동작을 설명합니다.
6. GSAP — MorphSVG — 정규화와 점 대응 제어를 설명합니다.
7. KUTE.js — SVG Morph — 해당 컴포넌트의 준비 방식과 하위 경로 작업 흐름을 설명합니다.

타이밍을 다듬기 전에 부분을 대응시키고 중간 상태를 살펴보세요. 시작 아트워크가 래스터라면 SVG 후보 파일을 준비하고 정적 도형을 검증한 뒤 대응하는 애니메이션 상태를 만드세요.