SVG Line Animation

SVG Line Animation

SVG 속성을 활용한 애니메이션

최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9
웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속성을 활용해 선을 그리는 애니메이션을 살펴보고자 합니다.

---

SVG 살펴보기

준비운동 느낌으로 SVG에 대해 간단히 살펴봅시다.
아무 SVG 파일을 편집기로 열어보면 코드가 좌르륵 써있는 걸 볼 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

넵, 이게 바로 중요한 점입니다. SVG는 이미지가 아닌 문서라는 거죠!

JPG, PNG 등의 래스터 이미지는 크기가 명확하게 정의되어 있습니다. 정확히는 가로 세로 비율이 정해져있습니다. 그래서 강제로 다른 가로/세로 비율을 지정하면 이미지가 무참하게 깨져버립니다. 따라서 보통은 가로/세로 비율이 무너지지 않게 auto 등의 사이즈를 지정하죠.
하지만 SVG 이미지는 명확하게 정의된 크기가 필요 없습니다.

SVG는 캔버스 크기에 상관 없이 코드에 정의된 크기로 그려집니다. 대부분의 브라우저는 SVG를 뷰포트에 맞춰(100vw, 100vh) 화면에 꽉차게 그려냅니다. (IE는 100%, 150px)

---

SVG 라인 애니메이션

이제 SVG의 라인을 움직이게 만들 차례입니다.
우선은 아무 SVG 파일을 준비합니다. 이때, (당연하게도) SVG는 stroke를 가지고 있어야 합니다. 우리는 이 stokre를 움직이게 만들 거니까요!

이 SVG에 어떤 속성을 줘봅시다. stroke-dasharray라는 CSS 속성입니다. 이 속성을 적용시켜보면... 선이 대쉬 형태가 됩니다. 값을 준만큼 간격을 가지게 되네요. 음, 그럼 path 길이가 100이라고 했을 때, dasharray가 50이라면 path는 절반만 보이겠군요. 만약 dasharray가 path의 길이와 같다면요? 이때는 path가 온전히 다 보입니다. path 길이만큼 간격을 갖기 때문에 path가 보이는 게 당연하죠.

한편 이때! stroke-dashoffset이란 속성을 줘봅니다. 이는 dasharray의 시작되는 위치를 설정합니다. 앗 그럼 dasharray가 path의 길이가 같을 때, dashoffset역시 path의 길이와 같게 한다면 어떨까요? 그러면 path는 보이지 않게 됩니다!

아래 이미지를 참고하면 느낌이 올...지도요?! :P

결론부터 말하죠. 라인을 그리기 위한 애니메이션은 아주 간단합니다: dashoffset을 path 길이와 똑같이 설정한 다음 0으로 줄입니다. 이는 CSS 애니메이션 또는 스크립트로 처리할 수 있습니다.

CSS 애니메이션

.st1 {
   stroke-dasharray: 711; /*이 값은 path의 길이와 동일합니다*/
   stroke-dashoffset: 711;
   animation: dash 1.3s linear alternate infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 711;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

SASS와 결합하면 이런 식으로도 쓸 수 있죠! (each문 짱짱)

See the Pen svg line animation with css animation by NY KIM (@nykim_) on CodePen.

이렇게 CSS를 사용하면 쉽고 간단하게 애니메이션을 구현할 수 있습니다.
단, 여기에는 꽤나 큰 단점이 있습니다. 바로 IE에서 지원하지 않는다는 것입니다. IE를 지원해야 한다면 스크립트를 쓰는 수밖에 없습니다ㅠ.ㅠ

자바스크립트

자바스크립트로 라인 애니메이션을 만드는 방법은 다음 참고 링크를 확인해 주세요! [참고 링크]
물론 직접 작성할 수도 있겠지만 꽤나 번거롭습니다. 이때 라이브러리 사용도 고려해볼 수 있겠습니다. 괄호 안의 수는 github 페이지의 star 개수입니다.

• anime.js (20,522)
• Snap.svg (11,247)
• vivus.js (10,222)
• walkway (4,271)
• lazy line painter (1,424)

아래는 vivus.js로 애니메이션을 그린 모습입니다.

See the Pen vjzbje by NY KIM (@nykim_) on CodePen.