SVG 애니메이션 방법 가이드
게시 됨: 2022-03-11가치가 있는 모든 프론트엔드 엔지니어는 파편화된 장치 생태계가 가져오는 문제를 알고 있습니다. 다양한 화면 크기, 해상도 및 가로 세로 비율로 인해 일관된 경험을 제공하기 어렵습니다. 픽셀 단위의 완벽한 경험을 제공하고자 하는 사람들에게는 더욱 그렇습니다.
SVG(Scalable Vector Graphics)는 해당 문제의 일부를 해결하는 데 도움이 되며 매우 잘 수행됩니다. 제한 사항이 있지만 SVG는 특정 경우에 매우 유용할 수 있으며 훌륭한 디자인 팀이 있다면 웹 브라우저에 과도한 부담을 주거나 로드 시간을 방해하지 않으면서 시각적으로 더 멋진 경험을 만들 수도 있습니다.
지난 몇 달 동안 저는 SVG와 그 애니메이션 및 효과 기능을 광범위하게 사용하는 프로젝트에 참여했습니다. 이 기사에서는 SVG와 그 애니메이션 기술을 사용하여 웹 프론트 엔드 작업에 새로운 생명을 불어넣는 방법을 공유할 것입니다.
확장 가능한 벡터 그래픽
SVG는 HTML이 작동하는 방식과 마찬가지로 XML을 기반으로 하는 이미지 형식입니다. 2차원 그래픽을 생성하기 위해 마크업에서 결합할 수 있는 친숙한 기하학적 모양에 대해 서로 다른 요소를 정의합니다.
SVG 사양은 1999년 W3C(World Wide Web Consortium)에서 개발한 공개 표준입니다.
모든 주요 웹 브라우저는 한동안 SVG 렌더링을 지원했습니다.
SVG 그래픽은 XML 문서이므로 웹 브라우저는 이미지와 상호 작용하는 데 사용할 수 있는 DOM 노드 기반 API를 제공합니다. 사진에 생명을 불어넣는 방법에 대해 이야기하십시오!
SVG 경로
SVG에 압도적인 요소가 하나 있다면 그것은 <path> 요소가 될 것입니다.
경로 요소는 상상할 수 있는 거의 모든 고급 2D 모양을 만드는 데 사용할 수 있는 기본 모양입니다.
요소는 일련의 그리기 명령을 사용하여 작동합니다. 1967년의 로고 프로그래밍 언어와 매우 흡사하며 멋진 그래픽을 위해 현대화되고 설계되었습니다. 요소는 속성 d 를 통해 이 일련의 그리기 명령을 사용합니다.
<!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" /> 화면에 그리는 가상 펜을 생각할 수 있으며 경로 요소의 그리기 주석은 펜을 제어할 뿐입니다. 위의 예에서 펜은 위치 (10, 10) ( M10 10 )으로 이동하고 (75, 10) ( L75 10 ) 에 선을 긋고 (75, 75) L75 75 에 선을 그리라는 지시를 받고 있습니다. L75 75 를 누른 다음 시작점( Z )으로 돌아가서 경로를 닫습니다.
호( A ), 2차 베지어 곡선( Q ), 3차 베지어 곡선( C ) 등과 같은 다른 그리기 명령을 사용하면 SVG에서 훨씬 더 복잡한 모양과 그래픽을 만들 수 있습니다.
여기에서 경로 요소에 대해 더 많이 배울 수 있습니다.
SVG 경로 및 CSS
"알았어 후안, 알겠어. 경로는 강력하지만 어떻게 애니메이션을 적용할 수 있습니까?” 당신은 말한다.
첫 번째 기술에서는 두 가지 SVG 속성인 stroke-dasharray 및 stroke-dashoffset 입니다.
stroke-dasharray 속성은 경로를 스트로크하는 데 사용되는 대시 및 간격의 패턴을 제어합니다. 연속적인 잉크 스트로크 대신 대시 및 간격 그룹으로 선을 그리려면 이 속성을 사용하면 됩니다.
SVG 이미지는 웹 브라우저 DOM의 일부이고 stroke-dasharray는 프레젠테이션 요소이므로 CSS를 사용하여 속성을 설정할 수도 있습니다.
마찬가지로, stroke-dashoffset 속성(대시 패턴에서 대시를 시작하기 위해 얼마나 멀리 떨어져 있는지 지정)도 CSS를 사용하여 제어할 수 있습니다.
이 두 SVG 속성을 함께 사용하여 SVG 경로에 애니메이션을 적용할 수 있으므로 뷰어는 경로가 점차적으로 그려지는 것처럼 보입니다.
이 2차 베지어 곡선을 예로 들어 보겠습니다.
<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>이 경로가 화면에 점진적으로 부드럽게 그려지는 것처럼 애니메이션을 적용하려면 stroke-dasharray 속성을 사용하여 경로 길이와 동일한 대시(및 간격) 길이를 설정해야 합니다. 이것은 점선 곡선의 각 대시와 간격의 길이가 전체 경로의 길이와 같도록 하기 위한 것입니다.
다음으로, stroke-dashoffset 속성을 사용하여 대시 오프셋을 0으로 설정합니다. 이렇게 하면 경로가 화면에 실선 곡선으로 나타납니다(기본적으로 첫 번째 대시를 보고 있으며 각 대시가 전체 곡선의 길이). 대시 오프셋을 곡선의 길이와 동일하게 설정하면 보이지 않는 곡선으로 끝납니다(지금은 대시 바로 다음에 오는 부분인 전체 간격으로 렌더링되는 곡선을 보고 있습니다).
이제 stroke-dashoffset 속성에 애니메이션을 적용하여 곡선이 화면에 점진적으로 나타나도록 할 수 있습니다.
CodePen에서 Toptal 블로그(@toptalblog)의 Pen Toptal - SVG 및 CSS 경로를 참조하십시오.
보시다시피 곡선은 항상 존재합니다. 파선 부분이 조금씩 나타나도록 파선 오프셋만 변경하고 있습니다.
동일한 원칙을 사용하지만 더 많은 경로를 사용하여 이를 한 단계 더 발전시킬 수 있습니다.
CodePen에서 Toptal 블로그(@toptalblog)의 Pen Toptal - SVG 및 CSS 경로를 참조하십시오.
여기에 고정된 하나의 검은색 곡선, 경로를 따라 움직이는 빨간색 곡선, 그리고 40px 뒤에 있는 빨간색 곡선을 따라가는 또 다른 검정색 곡선이 있습니다.
Stroke-dasharray 및 stroke-dashoffset은 SVG 경로에 과도한 애니메이션 및 효과를 적용하는 데 사용할 수 있는 매우 강력한 두 가지 속성입니다. 두 가지 속성을 실험하는 데 사용할 수 있는 이 편리한 도구를 사용해 볼 수 있습니다.
SVG 경로를 따라 개체에 애니메이션 효과 주기
SVG와 CSS를 사용하면 경로를 따라가는 개체나 요소에 애니메이션을 적용할 수 있습니다.
애니메이션에 사용할 SVG 속성은 2가지입니다.
offset-path: offset-path CSS 속성은 요소가 배치되는 오프셋 경로를 지정합니다.
offset-distance: offset-distance CSS 속성은 오프셋 경로를 따라 위치를 지정합니다.
이 두 속성을 결합하면 다음과 같은 애니메이션을 쉽게 만들 수 있습니다.
CodePen에서 Toptal 블로그(@toptalblog)의 Pen Toptal - SVG 및 CSS 경로를 참조하십시오.
보시다시피 새 요소 div.ball 이 있습니다.
이 요소는 div, 이미지, 텍스트 등 무엇이든 될 수 있습니다. 이 예제의 아이디어는 offset-path 및 offset-distance를 사용하여 요소에 따라가는 경로를 제공하고 거리를 애니메이션할 수 있으며 요소가 경로를 통해 이동한다는 것입니다.
JavaScript를 사용한 SVG 애니메이션
이 모든 것이 이미 충분히 화려하지 않다면 언제든지 JavaScript에 의존할 수 있습니다.
JavaScript로 SVG 요소에 애니메이션을 적용하는 것은 DOM 요소에 애니메이션을 적용하는 것과 매우 유사할 수 있습니다. 그러나 JavaScript를 사용하면 위에서 확인한 애니메이션 기술을 더 쉽게 달성할 수 있습니다.
이전에는 CSS에서 경로 길이를 하드코딩해야 했습니다. JavaScript 함수 path.getTotalLength() 의 도움으로 경로의 길이를 즉석에서 계산하고 필요에 따라 사용할 수 있습니다. 여기에서 자세히 알아볼 수 있습니다.
게다가 SVG 애니메이션을 지금보다 훨씬 쉽게 만들 수 있는 많은 라이브러리가 이미 있습니다.
Snap.svg를 사용하면 JavaScript를 사용하여 SVG 이미지를 쉽게 그릴 수 있을 뿐만 아니라 .animate({}) 를 호출하는 것처럼 간단하게 애니메이션을 적용할 수 있습니다.
또 다른 라이브러리인 anime.js를 사용하면 몇 줄의 코드만으로 div 요소가 SVG 경로를 따르도록 만들 수 있습니다.
자체적으로 더 많은 작업을 수행하지만 결과를 여전히 놀랍게 만드는 라이브러리를 찾고 있다면 Vivus가 바로 당신입니다. SVG 경로 애니메이션에 대해 보다 구성 중심적인 접근 방식을 취합니다. 이 라이브러리를 사용하면 그리려는 SVG 요소에 ID를 추가하고 해당 ID로 Vivus 개체를 정의하기만 하면 됩니다. 나머지는 Vivus가 처리합니다.
추가 읽기
다음은 SVG 이미지를 처리하고 애니메이션을 적용할 때 유용할 수 있는 리소스 목록입니다.
SVG 애니메이션에 대해 더 자세히 알아보려면 SVG 이미지에 애니메이션을 적용하고 CSS Tricks가 제공하는 비디오 스크린캐스트를 시청하는 세 가지 방법에 대한 이 짧은 기사를 읽을 수 있습니다.
이 기사에서 다루지 않은 한 가지는 SMIL(Synchronized Multimedia Integration Language)을 사용하여 SVG 이미지에 애니메이션을 적용하는 것입니다. SVG용 CSV를 사용하면 이미 익숙한 작업을 할 수 있다는 이점이 있지만 SMIL은 다음 단계로 넘어갑니다.
SMIL을 사용하면 SVG만 사용하여 모양 모핑과 같은 고급 애니메이션 효과를 구현할 수 있습니다. 이러한 효과를 위해 SMIL을 사용하는 짧지만 효과적인 가이드는 여기에서 볼 수 있습니다.
그러나 SMIL에 대한 지원은 현재 약간 초조 합니다(말장난 없음).
타협 없는 웹용 애니메이션
이 기사에서는 SVG 경로에서 CSS 또는 HTML 요소를 사용하여 SVG 요소에 애니메이션을 적용할 수 있는 여러 방법을 살펴보았습니다.
SVG는 가볍고 화면 크기, 확대/축소 수준 및 화면 해상도에 관계없이 선명한 그래픽을 생성하는 데 사용할 수 있습니다. SVG를 사용하면 표준 웹 기술을 사용하는 이점을 누리면서 현대적이고 생생한 경험을 그 어느 때보다 쉽게 제공할 수 있습니다.
그리고 그게 다야! 이 SVG 애니메이션 튜토리얼이 유용하고 재미있게 읽으셨기를 바랍니다.
Toptal 엔지니어링 블로그에 대한 추가 정보:
- CSS에서 SVG 애니메이션에 접근하는 방법