표현 애니메이터로 탄성 및 바운스 효과 생성 – Smashing Magazine

현대적인 웹 디자인의 세계에서 SVG 이미지는 그림에서 아이콘, 배경 효과에 이르기까지 모든 곳에서 사용되며 선명도와 가벼운 크기로 보편적으로 유명합니다. 정적 SVG 이미지는 웹 디자인에서 중요한 역할을하지만 대부분의 경우 진정한 잠재력이 모션과 결합 될 때만 잠금 해제됩니다.

잘 실행 된 SVG 애니메이션보다 웹 사이트에 더 많은 삶과 개성을 더하는 것은 거의 없습니다. 그러나 모든 애니메이션이 디지털 경험 측면에서 동일한 영향을 미치는 것은 아닙니다. 예를 들어, 탄성 및 바운스 효과 모션 디자인에서 독특한 매력을 가지고 있습니다. 운동으로의 현실감애니메이션을 더 매력적이고 기억에 남는다.

그러나 SVG를 애니메이션하는 사람은 누구나 관련된 기술적 장애물을 알고 있습니다. 설득력있는 탄성 또는 바운스 효과를 생성하려면 전통적으로 복잡한 CSS 키 프레임을 처리하거나 JavaScript 애니메이션 라이브러리와의 레슬링이 필요합니다. SVG 애니메이션 편집기를 사용하더라도 키 프레임을 수동으로 추가하고 그 사이의 완화 기능을 조정해야하므로 경험 수준에 관계없이 시행 착오의 시간이 소요되는 과정이 될 수 있습니다.

이것은 표현적인 애니메이터가 빛나는 곳입니다. 제작자는 탄성 및 바운스 효과를 적용 할 수 있습니다 몇 초 만에수동 키 프레임 편집의 지루한 작업을 우회합니다. 그리고 결과는 항상 예외적입니다 살아 있는노력의 일부로 생산됩니다.

표현 애니메이터를 사용하여 탄성 효과를 만듭니다

표현 애니메이터에서 탄성 효과를 만드는 것은 효과가 완화 기능으로 소프트웨어에 바로 구축되기 때문에 놀랍도록 간단하고 빠르며 직관적입니다. 즉, 효과를 얻으려면 두 개의 키 프레임 (시작 및 끝) 만 있으면 소프트웨어가 스프링 모션을 자동으로 처리합니다. 더 좋은 점은 탄성 완화를 적용 할 수 있습니다 모든 애니메이션 속성 (예 : 위치, 스케일, 회전, 불투명도, 모프 등), 애니메이션에 추가 할 수있는 일관된 방법을 제공합니다.

튜토리얼에 뛰어 들기 전에 아래 비디오를 살펴보고 무엇을 배우고 전체 프로세스를 처음부터 끝까지 확인하십시오.

먼저, 장면을 설정합시다. 이를 위해서는 누르면 새로운 프로젝트를 만들 것입니다 Ctrl 키/CMD + 피 그리고 팝업되는 “새 프로젝트 만들기”대화 상자에서 구성합니다. 프레임 크기의 경우 00:01:30의 지속 시간 동안 1080 × 1080을 선택하고 프레임 속도는 초당 60 프레임 (FPS)으로 변경되지 않도록합니다.

“Project Create”버튼을 누르면 펜 및 타원 도구를 사용하여 애니메이션 할 아트 워크를 만들거나 아래의 아트 워크를 간단히 복사하여 붙여 넣을 수 있습니다.

이제 모든 것이 설정되었으므로 애니메이션을 만들어 봅시다. 스냅 및 자동 녹음이 활성화되어 있는지 확인한 다음 플레이 헤드를 01 : 00F로 이동하십시오. 스냅을 활성화하면 캔버스에서 노드와 그래픽 객체를 완벽하게 정렬 할 수 있습니다. 반면에 이름에서 알 수 있듯이 자동 녹음은 아트 워크에 대한 모든 변경 사항을 추적하고 타임 라인에 적절한 키 프레임을 추가합니다.

눌러 에이 키보드의 키 노드 도구로 전환하려면 문자열 객체를 선택하고 핸들을 아트 보드의 오른쪽 중앙 지점으로 이동하십시오. 스냅이 당신을 위해 모든 무거운 리프팅을 할 것이기 때문에 정밀도에 대해 걱정하지 마십시오. 이렇게하면 모프 애니메이터의 모양이 구부리고 키 프레임이 추가됩니다.

다음으로 누르십시오 다섯 선택 도구로 전환하려면 키보드의 키. 이 도구가 활성화 된 상태에서 볼을 선택하고 오른쪽으로 이동 한 다음 문자열 중앙에 놓습니다. 다시 한번, 스냅 핑은 모든 노력을 기울여 원하는 곳에 공을 정확하게 배치 할 수 있으며 자동 녹화는 적절한 키 프레임을 자동으로 추가합니다.

이제 자동 녹음 버튼을 다시 클릭하여 애니메이션을 재생하고 자동 녹화를 비활성화 할 수 있습니다.

재생시킬 때 알 수 있듯이 문자열과 볼 객체가 움직이는 방향이 잘못되었습니다. 다행스럽게도 키 프레임을 뒤집는 것만으로는 매우 쉽게 문제를 해결할 수 있습니다. 이렇게하려면 타임 라인의 키 프레임을 선택하고 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 반대를 선택하십시오. 이렇게하면 키 프레임이 뒤집어지며 애니메이션을 재생하면 방향이 올바른 것을 알 수 있습니다.

이것을 벗어나서, 우리는 마침내 탄성 효과를 추가 할 수 있습니다. 타임 라인의 모든 키 프레임을 선택하고 사용자 정의 완화 버튼을 클릭하여 완화 옵션이있는 대화 상자를 엽니 다. 대화 상자에서 탄성을 선택하고 진동을 4로, 강성을 2.5로 설정하십시오.

그게 다야! 완화 대화 상자 외부의 어느 곳에서나 클릭하여 닫고 애니메이션을 재생하여 결과를 확인하십시오.

애니메이션도 내보낼 수 있습니다. 누르다 CMD/Ctrl 키 + 이자형 키보드에서 내보내기 대화 상자를 열고 SVG 및 Lottie와 같은 벡터 형식에서 GIF 및 비디오와 같은 래스터 화 형식에 이르기까지 다양한 내보내기 옵션 중에서 선택하십시오.

이 특정 애니메이션의 경우 SVG Export 형식을 선택할 것입니다. 표현 애니메이터를 사용하면 애니메이션에 사용되는 기술에 따라 SMIL, CSS 또는 JavaScript에 따라 세 가지 유형의 SVG 중에서 선택할 수 있습니다.

이러한 기술 각각마다 강점과 약점이 있지만이 튜토리얼의 경우 Smil을 선택할 것입니다. Safari 브라우저에서도 SMIL 기반 애니메이션이 널리 지원되며 배경 이미지로 사용하거나 HTML 페이지에 포함시킬 수 있기 때문입니다. 꼬리표. 사실, Andy Clarke는 최근 Smashing Magazine의 Smil Animations에 관한 모든 것을 썼다면 그것이 어떻게 작동하는지에 대한 자세한 설명을 원한다면.

다음 Codepen 데모에서 내보낸 SVG를 시각화 할 수 있습니다.

바운스 및 기타 효과를위한 표현 애니메이터

애니메이션에 바운스 효과를 추가하는 것은 탄성 효과를 만들기 위해 방금 다루는 프로세스와 매우 유사합니다. 둘 다 완화 기능으로 표현 애니메이터에 내장되어 있기 때문입니다. 탄성과 마찬가지로 바운스 완화는 모든 애니메이션 가능한 속성에 적용될 수 있으므로 현실적인 움직임을 빠르게 만들 수 있습니다.

이 두 가지 효과 외에도 Expressive Animator는 Back, Steps, Sinc와 같은 애니메이션의 성격을 형성 할 수있는 다른 완화 옵션을 제공합니다.

결론

탄성 및 바운스 효과는 오랫동안 모션 디자인에서 가장 바람직하지만 시간이 많이 걸리는 기술 중 하나였습니다. 표현 애니메이터는이를 완화 기능에 직접 통합함으로써 수동 키 프레임 조작의 복잡성을 제거하고 기술적 인 도전이었던 것을 창의적인 기회로 변환합니다.

가장 중요한 부분은 표현 애니메이터를 시작하는 데 위험이 없다는 것입니다. 이 소프트웨어는 7 일 전체를 제공합니다 계정이 필요없는 무료 평가판따라서 즉시 다운로드하고 즉시 자신의 디자인 실험을 시작할 수 있습니다. 시험이 끝나면 일회성 결제로 표현 애니메이터를 구입할 수 있습니다. 구독이 필요하지 않습니다. 이것은 Windows와 MacOS를 모두 다루는 영구 라이센스를 제공합니다.

더 빨리 시작할 수 있도록 추가 자원을 준비했습니다. 이 튜토리얼에서 생성 된 애니메이션의 소스 파일과 표현 애니메이터 및 SVG 애니메이션을 탐색하는 데 도움이되는 유용한 링크 목록과 함께 찾을 수 있습니다. 이 자료는 확실한 출발점을 제공하여 자신감을 가지고 배우고 실험하고 구축 할 수 있습니다.

(GG, YK)