SVGator로 경로 애니메이션의 힘을 발휘하십시오

(이 기사는 후원을 받은 기사입니다.) 작년에 SVGator의 기본 사용에 대한 포괄적인 소개가 Smashing Magazine에 게시되었습니다. SVGator의 기본 사항, 첫 번째 프로젝트 설정 및 첫 번째 애니메이션 만들기에 대해 배우고 싶다면 이 문서를 계속 진행하기 전에 읽어보는 것이 좋습니다.

오늘은 새로운 Path Animator 를 포함하여 지난 몇 달 동안 추가된 몇 가지 새로운 기능을 살펴보기 위해 다시 살펴보겠습니다.

참고 : Path Animator는 SVGator의 프리미엄 기능이며 평가판 사용자는 사용할 수 없습니다. 7일 평가판 기간 동안 앱에서 찾을 수 있는 샘플 프로젝트에서 Path Animator가 어떻게 작동하는지 확인할 수 있지만 유료 서비스를 선택하지 않는 한 이를 자신의 SVG에 적용할 수 없습니다. 계획. SVGator는 구독 기반 서비스입니다. 현재 월간 요금제($18USD/월)와 연간 요금제(총 $144USD, $12USD/월) 중에서 선택할 수 있습니다. 더 긴 프로젝트의 경우 연간 옵션을 고려하는 것이 좋습니다.

Path Animator는 SVGator가 향후 몇 달 안에 출시할 계획인 프리미엄 기능 중 첫 번째에 불과합니다. 모든 새로운 기능은 구독 시점에 관계없이 모든 유료 사용자가 사용할 수 있습니다.

경로 애니메이션의 매력

SVG 경로 애니메이션은 결코 새로운 것이 아닙니다. 지난 몇 년 동안 벡터 그래픽을 강화하는 이 방법은 웹 전체에서 많이 사용되었습니다.

경로 애니메이션은 상대적 단순성 때문에 인기를 얻었습니다. 언뜻 보기에는 인상적이고 복잡해 보일 수 있지만 기본 규칙은 사실 매우 간단합니다.

경로 애니메이션은 어떻게 작동합니까?

SVG 경로 애니메이션에는 매우 복잡한 그리기 및 변환 기능이 필요하다고 생각할 수 있습니다. 하지만 보기보다 훨씬 간단합니다. 위의 예와 유사한 효과를 얻으려면 실제 경로를 생성하거나 그리거나 애니메이션을 적용할 필요가 없습니다. 획에 애니메이션을 적용하기만 하면 됩니다. 이 뛰어난 개념을 사용하면 단일 SVG 속성인 stroke-dashoffset 에 애니메이션을 적용하여 겉보기에 복잡한 애니메이션을 만들 수 있습니다.

이 작은 속성 하나를 애니메이션하면 전체 효과가 나타납니다. 점선이 있으면 대시와 간격의 위치로 재생할 수 있습니다. 올바른 설정과 결합하면 자체 드로잉 SVG 경로의 원하는 효과를 얻을 수 있습니다.

이것이 여전히 다소 미스터리하게 들리거나 경로 애니메이션이 어떻게 만들어지는지 더 자세히 알고 싶다면 기사 끝부분에서 이 주제에 대한 유용한 리소스를 찾을 수 있습니다.

경로 애니메이션이 어떻게 생겼는지와 비교하더라도 경로 애니메이션을 코딩하는 것이 항상 간단하다고 생각하지 마십시오. 파일이 복잡해지면 애니메이션도 복잡해집니다. 이것이 SVGator가 구출하는 곳입니다.

또한 때로는 원시 SVG 파일을 건드리지 않는 것을 선호할 수도 있습니다. 또는 코드 작성을 전혀 좋아하지 않을 수도 있습니다. 그런 다음 SVGator가 당신을 덮었습니다. 새로운 Path Animator를 사용하면 코드 한 줄도 건드리지 않고 가장 복잡한 SVG 경로 애니메이션도 만들 수 있습니다. SVGator를 사용하여 코딩을 결합할 수도 있습니다.

Path Animator가 제공하는 가능성을 더 잘 이해하기 위해 경로 애니메이션의 다양한 사용 사례를 제시하는 세 가지 개별 예제를 다룰 것입니다.

예제 #1: 애니메이션 텍스트

첫 번째 예에서는 텍스트에 애니메이션을 적용하여 자필 편지의 인상을 줍니다.

레터링에 자주 사용되는 이 귀여운 효과는 그림 및 일러스트레이션과 같은 다른 요소에도 적용할 수 있습니다. 하지만 문제가 있습니다. 애니메이션 요소는 채우기가 아닌 획으로 스타일이 지정되어야 합니다. 즉, 텍스트의 경우 기존 글꼴을 사용할 수 없습니다.

윤곽선 글꼴은 아무리 얇더라도 항상 열린 경로가 아니라 닫힌 모양이 됩니다. 선과 획을 기반으로 하는 일반 글꼴은 없습니다.

따라서 경로 애니메이션을 사용하여 텍스트에 애니메이션을 적용하려면 텍스트를 직접 그려야 합니다(또는 이 목적에 적합한 기성 벡터 문자를 찾아야 함). 글자를 그릴 때 기존 글꼴이나 타이포그래피를 참조로 자유롭게 사용하십시오. 하지만 저작권을 침해하지는 마십시오! 기본적으로 글꼴을 사용할 수 없다는 점을 염두에 두십시오.

파일 준비

기존 서체로 시작하는 대신 간단한 손으로 그린 ​​스케치로 시작합니다.

이제 디자인 도구에서 스케치를 다시 그릴 차례입니다. 저는 Figma를 사용했지만 Sketch, Adobe XD 또는 Adobe Illustrator와 같이 SVG 내보내기를 지원하는 모든 앱을 사용할 수 있습니다.

일반적으로 펜 도구로 시작하여 아래에 있는 레이어로 가져온 스케치를 대략적으로 따릅니다.

완료되면 배경에서 스케치를 제거하고 결과에 만족할 때까지 경로를 수정합니다. 어떤 도구를 사용하든 기술을 사용하든 가장 중요한 것은 그림을 선으로 준비하고 채우기가 아닌 획만 사용하는 것입니다.

이 예에는 4개의 그러한 경로가 있습니다. 첫 번째는 문자 "H"입니다. 두 번째는 세 개의 중간 문자 "ell"입니다. 그리고 "o"는 세 번째입니다. 네 번째 경로는 느낌표 줄입니다.

"!"의 점 예외입니다. 획이 아닌 채우기로 스타일을 지정할 유일한 레이어입니다. Path Animator를 사용하지 않고 다른 레이어와 다른 방식으로 애니메이션됩니다.

Path Animator로 애니메이션을 적용할 모든 경로는 타원인 "o"를 제외하고 열려 있습니다. Path Animator를 사용하여 닫힌 경로(예: 타원 또는 다각형)에 애니메이션을 적용하는 것은 매우 훌륭하고 실행 가능하지만 열린 경로로 만드는 것도 가치가 있습니다. 이것이 애니메이션이 시작되는 위치를 정확히 제어하는 ​​가장 쉬운 방법이기 때문입니다. 이 예에서는 일반적으로 필기체로 "o"를 쓰기 시작하는 위치인 "l"의 끝에 타원에 작은 간격을 추가했습니다.

레이어를 SVGator로 가져오기 전에 레이어의 구조를 정리하고 설명적인 방식으로 이름을 바꾸는 것이 가장 좋습니다. 이렇게 하면 SVGator에서 작업한 후 파일을 빠르게 찾는 데 도움이 됩니다.

경로 애니메이션을 위해 모양을 준비하는 방법에 대해 자세히 알아보려면 SVGator에서 제공하는 이 자습서를 확인하는 것이 좋습니다.

레이어를 신중하게 준비하고 가능한 한 미리 생각하는 것이 좋습니다. 작성 당시 SVGator에서는 파일을 이미 존재하는 애니메이션으로 다시 가져올 수 없습니다. 애니메이션 작업을 하는 동안 원본 파일을 약간 변경해야 하는 문제를 발견하면 새 프로젝트로 SVGator로 다시 가져와서 처음부터 애니메이션 작업을 시작해야 합니다.

애니메이션 만들기

레이어의 구조와 이름이 마음에 들면 SVGator로 가져옵니다. 그런 다음 타임라인에 첫 번째 경로를 추가하고 Animators 목록에서 선택하거나 Shift + T 를 눌러 Path Animator를 적용합니다.

자체 그리기 효과를 얻기 위해 우리의 목표는 경로의 획을 점선으로 바꾸는 것입니다. 대시와 간격의 길이는 전체 경로의 길이와 같아야 합니다. 이를 통해 전체 경로를 간격으로 덮어 사라지게 할 수 있습니다. 숨겨진 후에는 전체 경로가 대시로 덮이는 지점으로 stroke-dashoffset 을 변경합니다.

SVGator는 경로의 길이를 자동으로 제공하여 우리에게 매우 편리합니다. 클릭 한 번으로 복사하여 SVGator에 필요한 두 개의 매개변수인 대시 및 오프셋 에 붙여넣기만 하면 됩니다. 대시에 값을 붙여넣으면 획이 파선으로 바뀝니다. 선의 첫 번째 대시가 전체 경로를 덮기 때문에 바로 볼 수 없습니다. 오프셋을 설정하면 간격이 경로를 덮도록 stroke-dashoffset 이 변경됩니다.

완료되면 타임라인을 따라 새 키프레임을 추가하여 애니메이션을 만들어 보겠습니다. Offset을 0으로 되돌리고... ta-da! 당신은 방금 자기 그리기 편지 애니메이션을 만들었습니다.

하지만 애니메이션에는 작은 문제가 하나 있습니다. 편지는 애니메이션이지만 앞뒤가 맞닿아 있습니다. 즉, 애니메이션은 경로의 잘못된 끝에서 시작됩니다. 적어도 그것을 고칠 수 있는 몇 가지 방법이 있습니다. 첫째, 양수 값에서 0으로 오프셋을 애니메이션하는 대신 음수 오프셋으로 시작하여 0으로 가져올 수 있습니다. 불행히도 이것은 일부 브라우저에서 예상대로 작동하지 않을 수 있습니다(예: Safari는 음수 스트로크 오프셋을 허용하지 않습니다). 이 버그가 수정될 때까지 기다리는 동안 다른 접근 방식을 선택하겠습니다.

경로가 공백으로 시작하고 그 뒤에 대시가 오도록 대시 값을 변경해 보겠습니다(기본적으로 파선은 항상 대시로 시작함). 그런 다음 오프셋 애니메이션의 값을 반대로 합니다. 이렇게 하면 반대 방향으로 선이 애니메이션됩니다.

이제 "H" 작업이 완료되었으므로 동일한 방식으로 다른 모든 경로에 애니메이션을 적용할 수 있습니다. 마지막으로 느낌표의 점에 애니메이션을 적용하여 마무리합니다. 윤곽선이 아닌 채우기가 있는 원이므로 Path Animator를 사용하지 않습니다. 대신 Scale Animator를 사용하여 애니메이션이 끝날 때 점이 튀어나오도록 합니다.

스케일 애니메이션으로 플레이할 때는 항상 요소의 변형 원점 위치를 확인하는 것을 잊지 마십시오. SVG에서 모든 요소는 기본적으로 캔버스의 왼쪽 상단 모서리에 변형 원점이 있습니다. 이것은 종종 코딩 변환 기능을 매우 어렵고 지루한 작업으로 만듭니다. 다행스럽게도 SVGator는 캔버스가 아닌 객체와 관련된 모든 변환을 계산하여 이러한 번거로움을 덜어줍니다. 기본적으로 SVGator는 각 요소의 변환 원점을 자체 왼쪽 상단 모서리에 설정합니다. 레이어 이름 옆에 있는 버튼을 사용하여 타임라인에서 위치를 변경할 수 있습니다.

애니메이션에 최종 터치를 추가하고 타이밍 기능을 조정해 보겠습니다. 타이밍 함수는 애니메이션되는 개체의 시간에 따른 속도를 정의하여 우리가 개체의 역학을 조작하고 애니메이션을 보다 자연스럽게 만들 수 있도록 합니다.

이 경우 한 번의 연속적인 손 움직임으로 텍스트가 쓰여지는 느낌을 주고자 합니다. 따라서 첫 글자 에 Ease-in 함수를 적용하고 마지막 글자에 Ease-out 함수를 적용하고 가운데 글자는 기본 Linear 함수로 남겨두었습니다. SVGator에서는 Animator의 매개변수 옆에 있는 타임라인에서 타이밍 기능을 적용할 수 있습니다.

느낌표에 동일한 논리를 적용한 후 애니메이션이 완료되고 내보낼 준비가 되었습니다!

예제 #2: 애니메이션 아이콘

이제 좀 더 UI 중심의 예를 분석해 보겠습니다. 여기에서는 SVGator를 사용하여 인기 있는 아이콘 애니메이션을 복제할 것입니다. 햄버거 메뉴를 닫기 버튼으로 바꾸는 것입니다.

애니메이션의 목표는 햄버거의 중간 막대가 원이 되고 주변 막대가 서로 교차하여 닫기 아이콘이 되도록 아이콘을 부드럽게 변환하는 것입니다.

파일 준비

우리가 만들고 있는 것과 그러한 애니메이션을 위한 파일을 준비하는 방법을 더 잘 이해하려면 애니메이션의 주요 상태를 나타내는 대략적인 스케치로 시작하는 것이 좋습니다.

애니메이션이 무엇으로 구성되어 있는지에 대한 일반적인 아이디어가 있으면 애니메이션을 만들 수 있는 모양을 그릴 수 있습니다. 원부터 시작하겠습니다. 경로 애니메이션을 사용할 것이므로 햄버거 메뉴의 중간에 직선 막대로 시작하여 주위에 원으로 끝나는 전체 경로를 포함하는 경로를 만들어야 합니다.

메뉴 아이콘의 다른 두 막대는 더 쉬운 작업이 있습니다. 우리는 그것들을 회전하고 원의 중심에 정렬할 것입니다. 모든 모양을 결합하면 파일을 SVG로 내보내고 SVGator로 가져올 준비가 된 것입니다.

애니메이션 만들기

먼저 첫 번째 모양을 타임라인에 추가하고 Path Animator를 적용해 보겠습니다. 초기 상태의 경우 중간에 수평선만 보이고 나머지 경로는 숨겨져 있습니다. 이를 달성하려면 대시의 길이를 햄버거 라인의 길이와 동일하게 설정하십시오. 이것은 메뉴 아이콘의 직선 중간선을 만들 것입니다. 올바른 값을 찾기 위해 햄버거의 다른 줄 중 하나의 길이를 사용할 수 있습니다. 타임라인이나 앱 오른쪽 사이드바의 속성 패널에서 복사할 수 있습니다.

그런 다음 다음 간격의 길이를 경로의 나머지 길이보다 큰 값으로 설정하여 투명하게 만듭니다.

이제 애니메이션의 초기 상태가 준비되었습니다. 다음에 일어나는 일은 이 선을 원으로 바꾸는 것입니다. 그러려면 두 가지 일이 동시에 일어나야 합니다. 먼저 오프셋 을 사용하여 경로를 따라 선을 이동합니다. 둘째, 대시의 너비를 변경하여 선을 더 길게 만들고 전체 원을 덮습니다.

원이 준비되면 닫기 아이콘을 처리해 보겠습니다. 이전과 마찬가지로 두 개의 애니메이션을 동시에 추가해야 합니다. 먼저 상단 라인이 아래로 기울어지고(45도) 하단 라인이 대칭적으로 교차할 때까지 위로 이동(-45도)되기를 원합니다. 둘째, 선이 원과 정렬된 상태를 유지하도록 선을 약간 오른쪽으로 이동해야 합니다.

이전 예제에서 기억할 수 있듯이 SVGator에서 변환 원점은 기본적으로 왼쪽 상단 모서리에 있습니다. 이 경우 우리가 원하는 바로 그 위치에 있기 때문에 매우 편리합니다. 올바른 회전 각도를 적용하기만 하면 됩니다.

원과 선을 정렬할 때 별도로 이동할 필요가 없습니다. 두 라인 모두에 애니메이터를 추가하는 대신 두 라인을 모두 포함하는 그룹을 타임라인에 추가하고 단일 Position Animator로 함께 애니메이션할 수 있습니다. 멋지고 깔끔한 파일 구조가 효과를 발휘하는 순간 중 하나입니다.

다음으로 할 일은 닫기 버튼을 다시 햄버거 메뉴로 바꾸는 역방향 애니메이션을 추가하는 것입니다. 이를 달성하기 위해 기본적으로 이전 단계를 역순으로 수행할 수 있습니다. 작업 속도를 조금 더 높이려면 기존 키프레임을 복사하여 타임라인에 붙여넣으세요. 이는 지난 몇 개월 동안 SVGator가 도입한 또 다른 개선 사항입니다.

완료되면 타이밍 기능을 조정하는 것을 잊지 마십시오. 여기서는 모든 요소에 Ease-in-out 효과를 적용하기로 결정했습니다. 아이콘이 작동할 준비가 되었습니다.

구현

마이크로인터랙션을 구현하는 것은 이 기사의 범위를 훨씬 벗어나지만, 잠시 시간을 내어 실제 프로젝트에서 그러한 애니메이션을 어떻게 구현할 수 있는지 간략하게 설명하겠습니다.

일러스트레이션과 장식 애니메이션은 일반적으로 더 간단합니다. 종종 SVGator에서 생성된 SVG 파일을 즉시 사용할 수 있습니다. 그러나 우리는 우리 아이콘에 대해 말할 수 없습니다. 우리는 사용자가 버튼을 클릭하여 메뉴 서랍을 열 때 애니메이션의 첫 번째 부분이 트리거되고 메뉴를 닫기 위해 두 번째 클릭하면 애니메이션의 두 번째 부분이 재생되기를 원합니다.

그렇게 하려면 애니메이션을 몇 개의 개별 조각으로 분할해야 합니다. 작업 중인 환경과 기술 스택에 따라 크게 달라지기 때문에 이러한 애니메이션 구현에 대한 기술적인 세부 사항은 여기에서 논의하지 않습니다. 하지만 생성된 SVG 파일을 검사하여 중요한 애니메이션 상태를 추출해 보겠습니다.

먼저 배경을 숨기고 아이콘 크기와 일치하도록 캔버스 크기를 조정합니다. SVGator에서는 언제든지 이 작업을 수행할 수 있으며 캔버스 크기에는 제한이 없습니다. 또한 획의 색상 및 너비와 같은 아이콘 스타일을 편집하고 오른쪽 상단 모서리에 있는 스위치를 사용하여 어두운 배경에서 그래픽이 어떻게 보이는지 테스트할 수 있습니다.

준비가 되면 아이콘을 SVG로 내보내고 텍스트 편집기에서 열 수 있습니다.

문서 본문에 표시되는 요소는 그래픽의 구성 요소입니다. 또한 코드의 첫 번째 줄이 예외적으로 길다는 점에 유의해야 합니다. 여는 <svg> 태그 바로 뒤에는 내부에 축소된 CSS가 많이 포함된 <style> 요소가 있습니다. 여기에서 모든 애니메이션이 발생합니다.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

SVGator는 우리를 위해 코드를 축소하는 것이 정말 좋습니다. 그러나 실행을 취소해야 합니다. CSS 코드가 완전히 작성되면(브라우저의 개발 도구 또는 많은 온라인 코드 포맷터 중 하나에서 이 작업을 수행할 수 있음) @keyframes 의 긴 목록과 다음을 사용하는 id 규칙 목록이 뒤따르는 것을 볼 수 있습니다. animation 속성의 @keyframes 입니다.

코드를 읽을 수 없는 것처럼 보일 수 있지만(형식이 좋은 경우에도) 오히려 매우 반복적입니다. 기본 규칙을 이해하면 따르는 것이 더 이상 어렵지 않습니다. 먼저 @keyframes 가 있습니다. 각 애니메이션 요소에는 고유한 @keyframes @-규칙이 있습니다. SVGator의 요소와 동일한 순서로 정렬됩니다. 따라서 우리의 경우 첫 번째 @ 규칙은 햄버거 아이콘의 중간 막대에 적용되고 두 번째 규칙은 상단 막대에 적용되는 식입니다. 내부의 키프레임은 SVGator에서 생성된 키프레임의 순서와도 일치합니다.

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

이제 키프레임에서 이러한 값을 사용하여 상호 작용을 코딩하기만 하면 됩니다. 아직 해야 할 일이 많지만 SVGator 덕분에 중요한 부분이 이미 완료되었습니다.

다음에 일어나는 일은 또 다른 이야기입니다. 그러나 이 애니메이션이 실제로 어떻게 작동하는지에 대한 예가 궁금하다면 다음과 같은 작은 CodePen이 있습니다.

이 예제는 React로 빌드되었으며 상태를 사용하여 CSS 클래스를 전환하고 각 CSS 값 사이에서 전환을 트리거합니다. 따라서 animation 속성과 @keyframes @-규칙이 필요하지 않습니다.

SCSS 코드 상단에 나열된 CSS 사용자 정의 우선 순위 세트를 사용하여 아이콘의 스타일과 전환 기간을 제어할 수 있습니다.

예제 #3: 애니메이션 일러스트레이션

이 기사의 세 번째이자 마지막 예에서는 궤도 입자가 있는 원자의 애니메이션 그림을 만들 것입니다.

점선 및 점선

앞의 두 가지 예에서는 점선 SVG 경로를 활용했습니다. 점선은 멋지지만 SVG도 점선을 지원한다는 사실을 알고 계셨습니까? SVG에서 점선은 둥근 캡이 있는 점선 이상도 이하도 아니며 대시 길이는 0과 같습니다.

많은 점이 있는 경로를 가질 수 있다면 단일 점이 있는 경로는 있을 수 없다고 누가 말했습니까? 획의 오프셋에 애니메이션을 적용하면 원하는 경로를 따라가는 원의 애니메이션이 생성됩니다. 이 예에서 경로는 타원이고 원은 궤도를 도는 입자를 나타냅니다.

파일 준비

SVG 요소는 동시에 두 개의 획을 가질 수 없으므로 각 입자에 대해 두 개의 타원이 필요합니다. 첫 번째는 궤도이고 두 번째는 입자에 대한 것입니다. 3을 곱하고 핵의 중간에 있는 다른 원과 결합하면 다음과 같습니다. 간단한 원자 그림, 애니메이션할 준비가 되었습니다.

참고 : 글을 쓰는 시점에서 Figma에서 점선을 만드는 것은 어려운 작업입니다. 대시의 길이를 0으로 설정할 수 없을 뿐만 아니라 전체 경로를 덮을 만큼 긴 대시 사이의 간격을 만들 수도 없습니다. 내보내기와 관련하여 모든 설정이 어쨌든 사라졌습니다. 그럼에도 불구하고 Figma로 작업하고 있다면 낙담하지 마십시오. SVGator에서 이러한 모든 문제를 쉽게 해결할 것입니다. Sketch, Illustrator 등에서 작업하는 경우 이러한 문제가 전혀 발생하지 않아야 합니다.

애니메이션 만들기

SVG 파일을 SVGator로 가져오면 점선을 수정하는 것으로 시작합니다. 위에서 언급했듯이 완벽한 원형 점을 얻으려면 대시 길이를 0으로 설정해야 합니다. 또한 간격의 길이를 경로의 길이와 동일하게 설정합니다(위에서 복사). 이렇게 하면 점이 하나만 표시됩니다.

세 개의 입자가 모두 준비되면 새 키프레임을 추가하고 경로의 전체 길이만큼 오프셋을 애니메이션할 수 있습니다. 마지막으로 점의 위치가 좀 더 무작위로 느껴지도록 오프셋 값을 사용합니다.

애니메이션이 너무 빠르거나 너무 느린 경우 설정에서 언제든지 지속 시간을 변경할 수 있습니다. 현재 SVGator는 최대 30초 길이의 애니메이션을 지원합니다.

마지막으로 전체 그래픽에 약간의 바운스를 추가했습니다.

이제 애니메이션이 준비되었으며 로더 그래픽으로 사용할 수 있습니다.

접근성에 대한 간략한 설명

보시다시피 SVG로 달성할 수 있는 것에는 거의 제한이 없습니다. 그리고 경로 애니메이션은 도구 키트의 매우 중요한 부분입니다. 그러나 현명한 사람이 말했듯이 큰 힘에는 큰 책임이 따릅니다. 과용을 삼가해 주십시오. 애니메이션은 제품에 생기를 더하고 사용자를 즐겁게 할 수 있지만 애니메이션이 너무 많으면 전체 경험을 망칠 수도 있습니다.

또한 사용자가 애니메이션을 비활성화하도록 허용하는 것을 고려하십시오. 멀미 및 기타 관련 질환으로 고통받는 사람들은 이러한 옵션이 매우 유용하다는 것을 알게 될 것입니다.

결론

오늘은 여기까지입니다. 경로 애니메이션의 가능성을 통해 이 여행을 즐겼기를 바랍니다. 직접 사용해 보려면 SVGator의 웹사이트를 방문하여 다른 기능과 가격에 대해서도 알아볼 수 있습니다. 의견이나 질문이 있으면 주저하지 말고 댓글에 추가해 주세요. SVGator에 대한 다음 업데이트를 기대해 주십시오. 이미 진행 중인 다른 놀라운 새 기능이 많이 있습니다!

추가 읽기

• "SVG 라인 애니메이션 작동 방식", Chris Coyer SVG 경로 애니메이션이 실제로 작동하는 방식을 아름답게 설명하는 그림 가이드입니다.
• "A Practical Guide to SVG and Design Tools," Mikolaj Dobrucki SVG 기본에 대한 광범위한 안내서는 SVG가 디자인 도구에 의해 생성되는 방식과 이를 사용하여 자신의 장점을 활용하는 방법을 이해하는 데 도움이 됩니다.
• "Revisiting Prefers-Reduced-Motion, The Reduced Motion Media Query," Eric Bailey 애니메이션 및 접근성 주제에 대한 훌륭한 소개입니다.
• SVGator "경로 애니메이션을 만드는 방법" Path Animator에 대한 짧고 달콤한 YouTube 비디오 자습서

유용한 리소스

• SVGator 경로 애니메이션 Path Animator에 대한 자세한 내용은 원래 랜딩 페이지에서 읽어보십시오.
• SVGator 튜토리얼 SVGator 의 중요한 기능을 설명하는 일련의 비디오 튜토리얼.
• SVGator 도움말 센터 SVGator, 기능 및 멤버십 플랜에 대한 가장 일반적인 질문에 대한 답변입니다.