정확한 경로를 따라 움직이는 애니메이션

패스 애니메이션(Path Animation) 만들기

복잡한 곡선 모양의 도로를 자동차가 동일한 속도로 움직이도록 애니메이션 설정할 때는 위치에 키프레임을 주는 방식이 아닌 패스 애니메이션을 활용하면 쉽고 빠르고 정확한 애니메이션을 만들 수 있습니다. 패스 애니메이션이란 일정한 경로를 미리 그려 놓고 그 패스에 그림을 붙여서 따라가도록 하는 것을 말합니다. 

다음 그림과 같이 구불구불한 도로를 따라서 핑크색 트럭이 동일한 구간속도를 유지하면서 이동하게 애니메이션 하는 것은 시간도 많이 걸리고 키프레임도 많아질 뿐 아니라 부드러운 동작 제어 또한 어렵습니다. 

자~ 쉽고 빠르게 만들어 봅시다!

구불 구불한 도로를 따라 이동하는 차

[Mask Path] 복사해서 [Position]에 붙여 넣기

1. 가장 상위에 있는 [Path] 레이어에는 도로의 선을 따라 그려 둔 [Mask]가 있습니다. 컴포지션의 시작 지점에서 [Path] 레이어를 선택하고 [M]을 눌러 [Mask Path]를 엽니다. 그리고 [Car] 레이어를 선택하고 [P]를 눌러 [Position]을 엽니다.

2.  [Path] 레이어의  [Mask Path]를 클릭하고 Ctrl+C를 눌러 패스를 복사합니다. 자동으로 다수의 키프레임이 생성되었습니다.

3. [Car] 레이어의  [Position]을 클릭하고 Ctrl+V를 눌러 붙여 넣습니다. Spacebar를 눌러 재생해 보면 차의 속도가 매우 빠릅니다. 

속도 수정하기

4. [End]를 눌러 컴포지션의 끝 지점으로 시간을 이동합니다. [Car] 레이어의  [Position]에 생성된 키프레임 중에서 마지막 키프레임을 선택하고 [Shift]를 누르고 오른쪽으로 드래그하면 현재 시간에 스냅 됩니다. 

[Spacebar]를 눌러 재생해 보면 차가 경로를 따라서 움직이지만 도로는 구불구불한데 헤드라이트가 계속 정면만 보면서 움직이는 부분이 부자연스럽습니다. 

[Auto-Orient] 적용하기

4. [Timeline] 패널에서 [Car] 레이어를 마우스 오른쪽 버튼으로 클릭하고  [Layer]-[Transform]-[Auto-Orient] 메뉴를 클릭합니다. 그리고 대화 상자가 열리면 Auto-Orientation]을 [Orient Along Path]를 클릭하고 [OK] 합니다. Path를 따라 오리엔테이션이 자동으로 변경됩니다.

정확한 경로를 따라서 자연스럽게 이동하는 애니메이션이 완성되었습니다. 

예제 파일을 원하시면 댓글 남겨주세요.