SVGator로 SVG 파일 애니메이션
게시 됨: 2022-03-10( 이 기사는 SVGator 의 후원을 받았습니다 .) SVG 애니메이션 파일은 큰 인기를 얻었습니다. 그것들은 완전히 확장 가능하고(벡터이기 때문에) 작고 100% 코드 기반이므로 많은 변형과 조정이 가능합니다. 그러나 이것은 완전한 초보자를 위한 가파른 학습 곡선이라는 대가를 치르게 됩니다.
SVGator는 이 문제를 해결하여 누구나 친숙한 인터페이스를 사용하여 간단한 애니메이션을 정말 쉽게 만들 수 있도록 할 것을 약속합니다. SVG 애니메이션을 가져오고, 애니메이션화하고, 내보낼 수 있는 웹 기반 애니메이션 앱이며 초보자가 코딩을 배울 필요가 없습니다. 우리는 그것을 시도했고 우리는 그것을 정말로 좋아했습니다.
앱 사용 시작
앱 사용을 시작하려면 https://www.svgator.com으로 이동하십시오. 가입 절차는 매우 간단합니다(그림 1-3): "지금 애니메이션 만들기"를 클릭한 다음 "계정 만들기"를 클릭하고 세부 정보를 입력하면 됩니다.
SVGator의 기능을 탐색할 수 있는 샘플 "Stopwatch" 프로젝트로 바로 이동합니다. 앱 내에서 길을 찾을 수 없는 경우 사용을 시작하는 방법을 안내하는 깔끔한 자습서(그림 4)가 있습니다. 정적 SVG 가져오기, 타임라인에 요소 추가, 요소 및 키프레임에 애니메이터 추가 현재 사용 가능한 네 가지 속성(크기, 불투명도, 위치 및 회전)에 애니메이션 효과를 줍니다.
애니메이션 앱을 사용해 본 적이 있다면 SVGator의 사용자 인터페이스가 매우 친숙할 것이며 모든 것이 제 위치에 있다고 느낄 것입니다. 타임라인을 깔끔하고 쉽게 스캔할 수 있도록 애니메이션할 요소만 추가합니다.
스타터 애니메이션 시계 프로젝트는 SVGator를 소개하는 데 훌륭한 역할을 합니다. 언제든지 다시 돌아와 참조로 사용할 수 있습니다.
이제 기본 사항은 정리했으므로 직접 애니메이션을 만들어 보겠습니다.
우리가 만들 것
Sketch에서 디자인한 이 간단한 봉투 아이콘을 확인하십시오(그림 5). 닫혀 있는 상태에서 시작해서 열리면 문자가 뜨고 그 내용이 나옵니다. 그런 다음 편지가 봉투에서 튀어 나와 녹색 확인란을 표시하도록 확대됩니다.
다음은 프로세스를 요약한 것입니다.
- 다양한 상태에서 아이콘을 시각화하는 간단한 스토리보드를 만드는 것으로 시작하겠습니다. 모든 것이 예상대로 작동하는지 확인하기 위해 계속해서 SVGator와 동기화하고 아이콘의 요소를 가져올 것입니다.
- 그런 다음 필요한 모든 단일 요소를 포함하는 아이콘의 마스터 복사본을 만들고 SVGator로 내보냅니다. 프로세스 전반에 걸쳐 이 마스터 사본을 많이 수정해야 할 수도 있습니다.
- 다음으로 단일 SVGator 프로젝트에서 전체 애니메이션을 수행하고 예상대로 작동하는지 확인하여 내보냅니다.
- 마지막으로 실제 웹 환경에서 아이콘이 어떻게 보이는지 확인하기 위해 미리 코딩된 간단한 뉴스레터 형식에 아이콘을 포함합니다. 또한 더 작은 해상도에 맞게 크기가 조정되는 것도 볼 수 있습니다.
- 여기에서 모든 것을 다운로드할 수 있습니다.
시작하자!
1부: 스케치에서 아이콘 생성 및 내보내기
- 간단한 SVG 아이콘을 디자인하는 것과 나중에 애니메이션을 적용할 SVG 아이콘을 디자인하는 것 사이에는 몇 가지 차이점이 있습니다. 처음에는 상당히 단순한 모양으로 구성되어야 하며 배율, 회전, 위치 및 불투명도 만 조작하여 간단한 전환을 중심으로 애니메이션을 계획해야 합니다. 이것들은 현재 SVGator에서 애니메이션을 적용할 수 있는 유일한 4가지 속성이므로 더 복잡한 것을 초안을 작성한 경우에는 이를 수행할 수 없습니다.
시간을 절약하기 위해 간단한 스토리보드 만들기
스토리보드를 사용하면 SVGator에서 실제로 가져오기 전에 모든 전환을 시각화할 수 있습니다. 또한 전체 애니메이션을 만들기 전에 변형을 쉽게 테스트할 수 있습니다. Sketch에서 다르게 수행했어야 하는 일러스트레이션의 문제를 발견하여 다시 들어가서 변경해야 하는 경우가 종종 있습니다. 그런 다음 SVGator에서 전체 파일을 다시 가져와서 처음부터 애니메이션으로 시작해야 합니다. 매번 이 작업을 수행하고 싶지 않기 때문에 스토리보드는 미리 계획을 세우도록 하여 도움이 됩니다.
예를 들어, 처음에는 봉투가 화면 아래쪽에 더 많이 머물도록 계획했지만 SVGator로 가져와서 닫고 여는 작업을 한 후 닫을 때는 중간에, 닫을 때는 약간 아래로 유지해야 한다는 것이 분명해졌습니다. 열림 — 정적 이미지에서 생략된 세부 사항.
팁: 스케치 파일 → 아트보드 "스토리보드"에서 스토리보드를 확인하세요 .
레이어 이름 지정 및 구성
Sketch에서 레이어 이름을 지정하면 예상대로 작동하고 Sketch에서 지정한 모든 이름이 SVGator의 프로젝트로 전송됩니다. 그러나 SVGO 압축기 또는 유사한 플러그인을 사용하여 SVG 파일을 더 작게 만들면 이름이 사라지고 SVGator가 HTML 태그를 기반으로 하는 파일로 대체하며 결국 그림 7에 표시된 것과 유사한 결과를 얻게 됩니다. .
팁: 이미 다른 SVG에 SVGO 압축기를 사용하고 있고 비활성화하고 싶지 않다면 Sketch의 내보내기 미리보기 영역에서 원하는 위치로 파일을 끌어다 놓기만 하면 됩니다(그림 8). 이것은 SVGO 압축기를 우회하고 SVG를 있는 그대로 내보냅니다!
그룹을 사용하는 것도 좋습니다. 앱이 그룹을 인식하고 레이어와 상위 그룹에 동시에 애니메이션을 적용하여 복잡성을 더할 수 있기 때문입니다.
사용된 레이어 수에는 제한이 없지만 아이콘은 매우 간단합니다.
애니메이션용 아이콘 준비
이제 스토리보드에 아이디어가 있고 마스터 파일을 준비했으므로 SVGator에서 이해할 수 있는 방식으로 내보내겠습니다. 레이어 계층 구조를 다시 확인하십시오. 특정 레이어가 다른 레이어와 상호 작용하는 방식과 레이어 패널에서 해당 레이어를 배치해야 하는 위치를 생각해 보세요. 그림 9에서 "top_opened"를 선택한 것을 볼 수 있습니다. 이는 봉투의 열린 상단 덮개입니다. 그것은 흰 종이 뒤에 서 있어야 합니다. 그 반대의 경우도 마찬가지입니다. "top_closed"는 봉투의 닫힌 덮개이며 모든 것 위에 있어야 합니다. 이것이 "콘텐츠" 그룹의 첫 번째 레이어인 이유입니다.
팁: 전체 상단 덮개가 두 개의 레이어로 구성된 이유가 궁금할 수 있습니다. SVGator를 사용하여 3D 공간에서 모양을 회전하거나 실제로 변형할 수 없기 때문입니다. 첫 번째 레이어를 스쿼시하고 두 번째 레이어를 늘림으로써 이를 에뮬레이트하여 3D 변형의 환상을 만듭니다 .
스토리보드를 보면 원래 아이디어는 봉투에서 시트가 튀어나오도록 하고 확장하여 결국 숨기는 것이었습니다. 봉투 앞에 숨겨진 또 다른 시트("sheet_top")가 있는 동안 원본 시트를 위로 밀어서 이를 달성할 것입니다(그림 10). 최상단에서 만나는 순간 서로 바뀌고 앞표지가 봉투 앞으로 떨어지게 됩니다. 그것도 시각적 환상입니다. 우리는 z 공간에서 시트를 실제로 움직일 수 없기 때문에 그것을 에뮬레이트하는 한 가지 방법입니다.
이 모든 것을 고려하여 이제 아이콘을 내보낼 수 있습니다. 우리가 필요로 하는 모든 요소를 유용한 방식으로 서로 겹쳐서 포함하는 사실상 단일 SVG입니다.
팁: 내보내기 전에 모든 요소를 표시(숨김 아님)로 표시해야 합니다. Sketch 파일 → Artboard "내보내기"에서 내보내기로 사용한 파일을 볼 수 있습니다 .
2부: 아이콘 애니메이션
SVGator를 열고 "새로 가져오기"를 클릭하여 새 프로젝트를 시작합니다(그림 11).
모든 작업을 올바르게 수행했다면 그림 12와 같은 내용과 아래의 짧은 클립(클립 1)이 표시되어야 합니다. 모든 레이어가 서로의 위에 쌓이고 사용할 준비가 된 것입니다. 우연히 모든 것이 표시되지 않으면 Sketch로 돌아가서 모든 레이어가 표시되는지 다시 확인하십시오.
봉투 열기 애니메이션
타임라인에서 몇 가지 요소를 가져오는 것부터 시작하겠습니다. SVGator가 작동하는 방식은 빈 타임라인으로 시작하는 것입니다. "요소" 드롭다운에서 추가할 요소를 선택합니다. 찾고 있는 레이어가 무엇인지 보려면 눈 아이콘을 사용하여 수동으로 확인해야 합니다. 또는 화면의 요소를 직접 클릭해도 동일한 작업이 수행됩니다.
스토리보드의 1단계와 2단계, 특히 덮개가 열리는 부분에서 작업할 것입니다. 지금은 필요하지 않은 레이어를 비활성화합시다. 나중에 다시 설명하겠습니다(방법은 클립 1 참조). 기본 봉투만 남겨야 합니다. 즉, "sheet_top_content", "sheet_top_bgr" 및 "sheet_bottom_bgr" 레이어를 비활성화해야 합니다.
그런 다음 "top_opened"를 클릭하고 왼쪽에 있는 더하기 아이콘을 클릭하거나 요소를 더블 클릭하여 타임라인에 추가합니다. "top_closed"에 대해서도 동일한 작업을 수행합니다. 이제 타임라인에 두 레이어가 모두 있어야 합니다(그림 13).
팁: 전체 프로세스를 빨리 감으려면 클립 2를 확인하세요(아래 설명과 같이 작업 순서가 다를 수 있음) .
- 타임라인에서 "top_closed"를 클릭한 다음 "Animators" 드롭다운을 클릭합니다. 스케일 애니메이터를 추가합니다.
- "top_opened"에도 Scale 애니메이터를 추가합니다.
- 그런 다음 타임라인에서 레이어 이름 옆에 있는 작은 대상 아이콘을 클릭합니다. 이것은 transform-origin 속성이며 요소의 변형에 대한 피벗 포인트를 설정할 수 있습니다. 위쪽으로 축소할 것이기 때문에 "top_closed"에 대해 상단 중앙을 선택하고(그림 14) "top_opened"에 대해 하단 중앙을 선택하겠습니다.
- 이제 "top_closed"를 선택한 상태에서 Scale 속성의 더하기 기호를 클릭하여 타임라인에 키프레임을 추가합니다. 타임라인에 노란색 다이아몬드 모양이 나타납니다. 0.4초로 이동하여 더하기 기호를 다시 클릭해 보겠습니다(그림 15). 두 번째 키프레임은 덮개가 이미 열렸을 때 변형의 마지막 지점이 됩니다. 따라서 첫 번째 키프레임을 100% 100%로 두고 배율을 100% 0%로 설정하겠습니다.
- 레이어 이름 옆에 있는 작은 대상 아이콘을 클릭하여 "top_closed"에 대해 Ease-in을 켭니다(그림 16).
- 0.4s에서 "Animators" 메뉴에서 Opacity를 두 번 클릭한 다음 타임라인의 Opacity 속성 옆에 있는 더하기 기호를 클릭하여 "top_closed"에 대한 Opacity 키프레임을 추가합니다. 0%로 변경합니다.
- 몇 프레임 뒤로 이동하여 불투명도에 100%를 추가합니다. 우리는 상단 플랩 부분의 결함을 피하기 위해 그렇게하고 있습니다.
팁: 부드럽게는 모션을 보다 자연스럽게 보이게 하며, 단일 요소의 움직임을 에뮬레이트하는 애니메이션을 설계하고 있기 때문에 애니메이션의 시작 부분은 천천히 시작하고 끝 부분은 부드럽게 만드는 것이 자연스럽습니다 .
이제 애니메이션의 끝 부분인 "top_opened" 부분을 처리해 보겠습니다. 앞에서 언급한 것처럼 플랩의 3D 오프닝을 에뮬레이트하기 위해 두 부분으로 이 작업을 수행합니다.
- 타임라인에서 "top_opened" 레이어를 잡고 타임라인에서 0.4초로 이동하여 Scale 키프레임을 추가한 다음 0.8초에서 다른 키프레임을 추가합니다 . 0.4s의 Scale을 100% 0%로 만들고 0.8s Scale 값을 100% 100%로 유지합니다.
- 이즈아웃을 켭니다. 애니메이션을 미리 보려면 재생을 누르십시오.
멋지게 보이지만 이제 전체 봉투가 아래로 이동하여 원 배경에 맞도록 해야 합니다. Elements에서 "g"라는 그룹을 찾아 위치 애니메이터를 추가합니다. 위치 키프레임을 0.2초에 추가한 다음 0.8초에 추가합니다. 0.8s 값을 0 35로 변경합니다. 부드러운 애니메이션을 위해 Ease-in-out을 추가합니다. 그리고 그게 다야! 봉투가 열리는 애니메이션을 성공적으로 애니메이션화했으며 약간 아래쪽으로 이동하도록 만들었습니다.
복잡성 추가: 문자 팝업
봉투를 여는 것도 깔끔하지만, 종이 한 장을 소개하면 더 흥미롭게 만들 수 있습니다. 그렇게 하려면 "sheet_bottom_bgr"이라고 하는 시트 레이어를 표시해야 합니다.
- "요소" 메뉴에서 "sheet_bottom_bgr" 옆에 있는 눈 모양 아이콘을 클릭하여 표시되도록 합니다. 타임라인에 추가합니다(두 번 클릭).
- 이제 애니메이션 중간(예: 0.5초)으로 이동하여 위치 키프레임을 추가합니다. 0.4초 후에 다른 하나를 추가합니다. 첫 번째 키프레임을 선택하고 레이어를 y축에서 140픽셀만큼 오프셋합니다(0 140).
- Ease-in-out 효과를 추가합니다. 이제 좀 더 흥미로운 애니메이션이 있습니다.
팁: 동영상으로 보고 싶다면 아래 클립 3을 확인하세요 .
훨씬 더 복잡함: 글자 크기 조정 애니메이션
더 나아가 편지 봉투에서 튀어나온 편지를 애니메이션으로 만들고 편지에 "쓰여진" 텍스트의 일부 줄을 공개해 보겠습니다. 그렇게 하려면 이전 애니메이션을 약간 수정해야 합니다. (빨리 감기를 원하시면 스크린캐스트를 보고 반복하시면 됩니다.)
- "sheet_bottom_bgr"의 마지막 위치 키프레임을 0.9초에서 1.1초로 이동하여 시작하고 0 -190으로 변경합니다. 이것으로 우리가 하려는 것은 봉투에서 시트를 꺼내서 이미 준비한 다른 시트로 빠르게 교체할 수 있도록 하는 것입니다.
- 1.1s로 이동하여 "sheet_top_content" 및 "sheet_top_bgr"을 켜고 0 -190 모두에 대해 위치 키프레임이 있는 타임라인에 추가합니다.
- 1.5초에 키프레임을 추가하고 0 40으로 만듭니다.
- 둘 다에 대해 Ease-out을 활성화합니다.
이것은 전면 시트의 움직임이며 그림 17에서 보는 것과 같아야 합니다.
이제 백시트를 수정해 보겠습니다. 프론트가 나오면 사라져야 하고, 그 이후에 프론트 시트가 나타나야 합니다.
- 1.1s로 이동하여 "sheet_bottom_bgr"을 선택합니다. Opacity 애니메이터와 키프레임을 추가합니다. 0%로 설정합니다.
- 한 프레임 뒤로 이동하고 다른 불투명도 키프레임을 설정하여 100%로 만듭니다.
앞 시트에도 각각의 변경 사항을 적용해 보겠습니다.
- 1.1s로 이동하여 "sheet_top_bgr"을 선택하고 불투명도 키프레임을 100%로 추가합니다.
- 프레임을 뒤로 이동하고 불투명도를 0%로 만듭니다.
아래 그림 18과 같은 내용이 표시되어야 합니다. 여기서 두 가지 문제를 발견할 수 있습니다.
- 전환이 발생하기 전에 내용이 봉투 상단에 표시됩니다.
- 앞판과 뒤판을 교체할 때 오류가 있습니다.
첫 번째 문제를 해결합시다. 내용과 체크박스를 숨기고 앞시트가 나온 후에 보여줍시다.
- 1.5초로 이동하여 "sheet_top_content"를 선택하고 불투명도 키프레임을 100%로 추가합니다.
- 프레임을 뒤로 이동하고 다른 불투명도 키프레임을 0%로 설정합니다.
- 이제 전면 콘텐츠 내에서 각 레이어에 애니메이션을 적용하여 좀 더 흥미롭게 만들 것입니다.
- 1.5s로 이동하여 Elements 메뉴에서 "sheet_top_content"의 내용을 검색합니다.
- "sheet_top_content" 내의 세 레이어 모두에 대해 불투명도 키프레임을 추가합니다.
- 세 레이어 모두의 불투명도를 0%로 만듭니다.
- 1.7초로 이동하고 세 레이어 모두에 대해 100%로 설정합니다.
- 1.7초를 유지하고 Combined-shape 를 선택하고 회전 키프레임을 추가합니다.
- 1.5초로 이동하여 회전을 -45deg로 설정합니다.
- 회전에 Ease-in-out을 추가합니다.
두 번째 문제는 백시트가 너무 일찍 사라지기 때문에 발생하는 결함입니다.
- 1.1s로 이동하여 "sheet_bottom_bgr"을 선택하고 불투명도 키프레임을 한 프레임 앞으로 이동합니다. 다음은 확인해야 할 사항입니다(그림 19).
더 매력적으로 보이도록 봉투에서 앞장과 내용이 튀어나왔을 때 크기를 조정해 보겠습니다. 전체 "top_sheet_content"의 크기를 조정할 수 있지만 일부 브라우저에서는 정렬이 잘못될 수 있습니다. 각 하위 레이어의 크기를 자체적으로 조정하는 것이 가장 좋습니다.
- 1.1s로 이동하여 "sheet_top_bgr"을 선택하고 Scale 키프레임을 추가합니다.
- Combined-Shape, "line_top" 및 "line_bottom"에 대해 동일한 작업을 수행합니다.
- 1.5s로 이동하여 120% 120% 값으로 다른 Scale 키프레임을 추가합니다.
- Combined-Shape, "line_top" 및 "line_bottom"에 대해 동일한 작업을 수행합니다.
- Ease-in-out을 활성화합니다.
- 크기를 조정했기 때문에 전면 시트 전체가 아래로 이동하는 양을 줄여야 합니다. 1.5s로 이동하여 "sheet_top_content" 및 "sheet_top_bgr"을 선택하고 위치를 0 40에서 0 20으로 변경합니다.
팁: SVG에서 콘텐츠의 크기를 조정하는 것은 모두 벡터 기반이므로 품질을 잃지 않도록 하는 것이 좋습니다 .
이제 다음과 같이 표시됩니다(그림 20).
다 좋은데 전체 애니메이션이 첫 번째 프레임으로 돌아가야 합니다. 재사용하고 싶기 때문입니다. 우리의 아이디어는 앞 장을 아래로 밀고 봉투를 닫고 원래 위치로 돌리는 것입니다.
- 2.8s로 이동하여 "sheet_top_bgr"을 선택하고 위치 키프레임을 추가합니다.
- "sheet_top_content"에 대해서도 동일한 작업을 수행합니다.
- 기본 타임라인이 3초이기 때문에 시간을 더 추가해야 합니다. 타임라인 위의 왼쪽 하단 모서리에 있는 톱니바퀴 아이콘을 클릭하고 지속 시간을 00:04:50으로 변경한 다음(그림 21) "Enter" 키를 누릅니다. 이제 타임라인을 연장했습니다.
- 3.6초로 이동하고 다른 한 쌍의 위치 키프레임을 추가하고 값을 0 360으로 만듭니다. 두 레이어의 위치에 대한 여유를 이즈 인-아웃으로 변경합니다.
- 1.3초에서 "top_closed" 및 "top_opened"를 선택하고 Scale 키프레임을 추가합니다.
- 1.5초에 2개를 더 추가합니다. 두 번째 키프레임의 경우 "top_closed"는 100% 100%이고 "top_opened"는 100% 0%여야 합니다. 축소된 시트 뒤의 덮개를 성공적으로 닫았습니다.
- 이제 봉투를 중앙으로 다시 이동하고 상단 덮개가 다시 나타나는지 확인하기만 하면 됩니다. 3s로 이동하여 "g"에 대한 위치 키프레임을 추가합니다. 3.4초에 다른 것을 추가하고 0 0으로 만듭니다. 2.8초로 이동하고 "top_closed"에 대해 불투명도 0% 키프레임을 추가합니다. 그런 다음 3초로 이동하여 불투명도를 100%로 변경합니다.
축하합니다! 전체 아이콘에 애니메이션을 적용했습니다. 다음과 같이 표시됩니다(그림 22).
파트 3: 실제 웹 환경에서 내보낸 애니메이션 구현하기
아이콘을 실제 환경에 배치해 보겠습니다. 간단한 뉴스레터 양식을 코딩하고 거기에 아이콘을 포함시켰습니다. "SVG 내보내기"를 클릭하여 SVGator에서 아이콘을 내보낼 수 있습니다.
"구독"을 클릭하면 감사 메시지가 표시되고 아이콘 애니메이션이 시작됩니다.
두 개의 SVG 아이콘을 사용하여 작동합니다. 첫 번째는 애니메이션의 첫 번째 프레임만 포함된 정적 아이콘이고 두 번째는 애니메이션된 아이콘입니다. 스케치 파일 → 대지 "정적 내보내기"에서 정적 아이콘을 찾을 수 있습니다. 코드 내에 인라인 SVG 요소로 포함했습니다. 애니메이션 SVG 인라인도 포함했지만 기본적으로 숨겨져 있습니다. 다운로드에서 코드를 확인할 수 있습니다. "구독"이 클릭되면 정적 SVG를 숨기고 자동으로 시작되는 애니메이션된 SVG를 표시합니다.
정적 SVG에서 약간의 조정은 다음 줄을 바꾸는 것입니다.
<rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>... 이것으로:
<rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>이렇게 하면 모든 요소 위에 잘못 표시되는 회색 사각형이 제거됩니다.
이 예는 또한 반응형 디자인에서 SVG가 얼마나 좋은지 보여줍니다. 창을 더 작게 만들면 레이아웃이 재정렬되고 아이콘은 품질 손실 없이 확대됩니다.
팁: 아이콘을 더 작게 만들 때 시트가 캔버스에서 나오는 데 너무 많은 시간이 걸린다는 것을 알게 되었기 때문에 뒤로 돌아가서 더 짧게 만들기 위해 특정 타이밍을 약간 편집해야 했습니다. 더 빠른 이동을 위해 "sheet_top_bgr" 및 "sheet_top_content"의 마지막 위치 키프레임을 3.2초로 이동 했습니다.
원하는 경우 내보낸 후에도 애니메이션을 조정할 수 있지만 편리한 UI가 있는 SVGator에서 이 작업을 수행하는 것이 훨씬 쉽습니다.
결론
간단한 SVG 애니메이션을 만들 때 프로세스 속도를 정말 높여주는 SVGator와 같은 도구에 매우 기쁩니다. 사용이 간편하고 멋진 애니메이션을 순식간에 얻을 수 있습니다.
- Adobe After Effects만큼 강력하지는 않지만 훨씬 더 적응력이 뛰어나고 웹에서 사용할 준비가 된 모든 것을 코드로 내보냅니다. After Effects와 비교하면 두 도구가 너무 다르기 때문에 사과와 오렌지입니다.
- 빠른 탐색을 위해 SVGator를 사용할 때 초보자는 더 큰 가치를 볼 수 있지만 그렇다고 해서 해당 사용자만을 대상으로 하는 것은 아닙니다. 고급 사용자는 이 도구를 사용하여 더 복잡한 도구를 사용하지 않고도 아이디어를 브레인스토밍하거나 빠르게 탐색할 수 있습니다. SVGator는 코드를 생성하기 때문에 거기에서 코드를 가져와 원하는 대로 사용자 정의할 수 있습니다. 유일한 단점은 전체 애니메이션이 하나의 타임라인 내에 배치된다는 것입니다. 즉, 기본적으로 하나의 CSS 애니메이션이고 내부에서 발생하는 모든 것이 시작되기 전에 지연 시간이 다릅니다. 이것은 모든 것이 올인원 CSS이기 때문에 현재 애니메이션의 특정 단계에서 이벤트를 실행할 수 없음을 의미합니다.
- SVGator의 주요 목적은 SVG 애니메이션을 더 쉽고 빠르게 만드는 것이기 때문에 바닐라 코드와 비교하는 것도 공정하지 않습니다. 처음부터 전체를 코딩하면 더 많은 것을 얻을 수 있다는 것은 분명하지만, 그렇게 하려면 시간이 얼마나 걸릴까요?
- SVGator의 가장 강력한 장점 중 하나는 초보자에게 매우 친숙하다는 것입니다. 누구나 사용을 시작할 수 있으며 디자인 또는 애니메이션 소프트웨어에 대한 경험이 있다면 학습 곡선은 거의 없습니다.
- 모든 사용자는 계정을 생성하면 7일 무료 평가판을 받게 됩니다. 모든 기능이 포함되어 있으며 평가판이 종료된 후에도 "내 프로젝트" 섹션에서 애니메이션을 계속 다운로드할 수 있습니다. 앱은 월간(월 $18), 분기별(분기당 $45) 또는 연간(연간 $144)으로 구독할 수 있습니다.
SVGator에 대한 추가 읽기
- SVGator를 사용하여 SVG에 애니메이션을 적용하는 방법(비디오)
- SVGator의 Twitter(많은 미니 자습서 및 앱에 대한 빈번한 업데이트 포함)
- SVGator 자주 묻는 질문
코드를 사용한 SVG 애니메이션에 대한 추가 읽기
- "내가 걱정을 멈추고 SVG를 애니메이션하는 방법을 배운 방법", Boaz Lederer, Medium
- "CSS 및 Snap.svg 라이브러리를 사용하여 SVG 코드를 최적화하고 SVG 아이콘에 애니메이션을 적용하는 방법", CodyHouse
- "비개발자를 위한 CSS 애니메이션 2부 - SVG", Nicholas Kramer, Prototypr
- "아름다운 SVG 애니메이션을 쉽게 만드는 방법", Lewis Menelaws, Medium
이 기사를 도와준 Boyan Kostov에게 특별한 감사를 전합니다. 시간과 노력에 감사드립니다!