모션 경로를 사용하면 곡선 및 복잡한 모양을 따라 움직이는 개체에 애니메이션을 적용할 수 있습니다. 펜 도구로 선을 그릴 때처럼, 앵커 포인트를 설정하여 모션 경로를 정의하면 이 경로가 직선 또는 곡선으로 연결됩니다.
모션 경로 애니메이션의 근사치는 CSS로 계산되므로 애니메이션 요소가 모션 경로를 정확하게 따르지 않을 수도 있습니다. 일반적으로 그 차이는 기본적으로 픽셀보다 작아 눈에 띄지 않으며, 모션 경로 속성에서 편차의 범위를 제한할 수 있습니다.
모션 경로 보기
단일 요소 또는 그룹을 선택하면 애니메이션이 진행되는 동안 앵커 포인트를 따라 움직일 방향을 확인할 수 있습니다.
앵커 포인트
앵커 포인트는 다음 두 가지 방식으로 설정할 수 있습니다.
- 요소의 새로운 x 또는 y 위치를 지정하는 썸네일 이미지 또는 키프레임에서 앵커 포인트를 자동 생성합니다. 시작 및 종료 앵커 포인트는 항상 키프레임에 위치해 있습니다.
- 모션 경로 도구를 사용하면 모션 경로를 따라 앵커 포인트를 추가할 수 있습니다.
제어 핸들
제어 핸들은 모션 경로 도구 를 선택하면 표시됩니다. 앵커 포인트 사이의 각 세그먼트에는 두 개의 제어 핸들(각 앵커 포인트에 하나씩 연결됨)이 있습니다. 제어 핸들의 길이와 방향은 모션 경로의 곡률 정도를 나타냅니다. 직선의 경우 제어 핸들이 세그먼트에 맞닿거나 축소됩니다.
모션 경로 수정
모션 경로의 모양 수정
모션 경로는 단순한 곡선일 수도 있고, 다각형이나 원과 같은 닫힌 모양일 수도 있으며, 다른 개체의 상세한 윤곽선일 수도 있습니다. 모션 경로의 모양을 수정하는 방법은 아래와 같습니다.
앵커 포인트 추가
- 요소 위치를 변경하는 썸네일 이미지 또는 키프레임을 추가합니다. 그러면 이징 변경이 가능한 위치에 앵커 포인트가 추가됩니다.
- 모션 경로 도구의
앵커 포인트 추가 옵션
을 사용하면 모션 경로의 한 지점을 클릭하여 앵커 포인트를 추가해, 모션 포인트를 고정할 수 있습니다. 이 방법으로 앵커 포인트를 추가하면 썸네일 이미지나 키프레임이 추가되지 않습니다.
곡률 조정
- 모션 경로 도구
또는 선택 도구를 선택한 경우 앵커 포인트를 포함한 모션 경로의 모든 지점을 드래그하여 경로 모양을 변경할 수 있습니다.
- 모션 경로 도구
- 앵커 포인트를 더블클릭하여 연결된 제어 핸들을 축소합니다. 다시 더블클릭하면 제어 핸들이 확장됩니다.
모션 경로를 직선화하려면 두 앵커 포인트를 더블클릭하세요.
앵커 포인트 삭제
- 모션 경로 도구
을 사용하면 기존 앵커 포인트를 클릭하여 이를 삭제할 수 있습니다. 모션 경로 외의 애니메이션 속성이 없는 썸네일 이미지 또는 키프레임에 해당하는 앵커 포인트를 삭제하면 썸네일 이미지나 키프레임도 삭제됩니다.
- 썸네일 이미지 또는 키프레임을 삭제하면 썸네일 또는 키프레임에서 종료되는 모션 경로의 세그먼트가 삭제됩니다.
모션 경로 변환
모션 경로 도구 를 선택한 다음 도구 옵션 막대에서 변환 컨트롤 체크박스를 선택하면 모션 경로의 이동, 크기 조절, 방향 뒤집기, 회전이 가능합니다. 이 옵션이 사용 설정되어 있으면 모션 경로가 있는 요소를 선택하는 경우 변환 컨트롤이 표시됩니다.
모션 경로 이동
모션 경로를 스테이지의 새 위치로 드래그합니다.
모션 경로 크기 조절
- 크기 조절 상자는 모션 경로의 테두리에 파란색으로 표시됩니다(각 모서리와 측면에는 핸들이 있음). 핸들을 드래그하면 모션 경로의 크기를 변경할 수 있습니다.
- Shift 키를 누른 상태에서 드래그하면 원래의 가로세로 비율을 유지할 수 있습니다.
- Alt 키를 누른 상태에서 드래그하면 모션 경로의 중심을 같은 지점에 유지할 수 있습니다.
- 다른 방향으로 모션 경로의 크기를 조절하려면 도구 옵션 막대의 필드
에 회전 각도를 입력하여 크기 조절 상자를 회전합니다. 또한 Alt(Windows) 또는 option(Mac) 키를 누른 상태에서 왼쪽 또는 오른쪽 화살표 키를 누르면 크기 조절 상자를 5° 회전할 수 있습니다. 이 필드는 항상 0°로 재설정되므로 현재 방향에서 원하는 회전을 입력해야 합니다. 크기 조절 상자를 회전하더라도 모션 경로 자체의 방향은 변경되지 않습니다.
- 크기 조절 상자의 방향을 재설정하려면 안쪽의 회전 컨트롤(작은 원)을 더블클릭합니다. 그러면 회전의 피봇 포인트 위치도 재설정됩니다.
에 회전 각도를 입력하여 크기 조절 상자를 회전합니다. 또한 Alt(Windows) 또는 option(Mac) 키를 누른 상태에서 왼쪽 또는 오른쪽 화살표 키를 누르면 크기 조절 상자를 5° 회전할 수 있습니다. 이 필드는 항상 0°로 재설정되므로 현재 방향에서 원하는 회전을 입력해야 합니다. 크기 조절 상자를 회전하더라도 모션 경로 자체의 방향은 변경되지 않습니다.모션 경로 뒤집기
- 한쪽의 크기 조절 핸들을 반대쪽 크기 조절 핸들 너머로 드래그합니다.
모션 경로 회전
- 바깥쪽의 회전 컨트롤(큰 원)을 시계 방향 또는 반시계 방향으로 드래그하면 모션 경로를 회전할 수 있습니다.
- Shift 키를 누른 상태에서 드래그하면 45° 단위로 회전하도록 제한할 수 있습니다.
- 회전의 피봇 포인트를 이동하려면 안쪽의 회전 컨트롤(작은 원)을 다른 위치로 드래그합니다. 안쪽의 회전 컨트롤을 더블클릭하여 피봇 포인트 위치를 재설정합니다. 그러면 크기 조절 상자의 방향도 재설정됩니다.
애니메이션 속도 수정
썸네일 이미지 또는 키프레임의 타이밍 그리고 그 사이의 이징을 변경하면 모션 경로를 따라 움직이는 개체의 속도를 제어할 수 있습니다. 모션 경로 애니메이션을 반복할 수도 있습니다.
최적화
모션 경로를 생성하거나 수정할 때마다 Google Web Designer는 애니메이션을 자동으로 최적화하여 렌더링에 사용되는 CSS의 수를 줄이는 동시에 모션 경로 속성에서 지정하는 허용치를 관찰합니다. 허용치가 낮을수록 애니메이션이 모션 경로 근처에 더 근접하여 따라가며, 가능한 최적화 수준은 더 낮아집니다.
더 압축하려면 모션 경로 속성에서 곡선 최적화 를 클릭합니다. 이 과정은 자동 최적화보다 더 오래 걸릴 수 있습니다.
Google Web Designer는 속성 패널에서 선택한 요소의 모션 경로가 어느 정도의 크기일지 표시하여 문서 게시 이후에 모션 경로가 차지하게 될 디스크 공간을 보여줍니다.
모션 경로 속성
모션 경로 도구로 앵커 포인트를 추가하거나 모션 경로를 곡선으로 수정하고 나면 속성 패널에 모션 경로 속성이 표시됩니다.
| 속성 | 설명 |
|---|---|
| 경로 방향 따름 | 사용 설정하면 애니메이션 도중 요소가 회전하여 모션 경로 방향을 향합니다(예: 모션 경로의 하향 곡선을 따라가면서 요소가 아래로 기울어짐). 각도 허용치 속성으로 회전 정확도를 제어합니다. |
| 위치 허용 범위 | 요소의 모션 경로 이탈을 어디까지 허용할지 설정합니다.
|
| 각도 허용 범위 | 모션 경로 방향과 요소 방향 간의 차이를 얼마나 허용할지 제어합니다. 경로 방향 따름 옵션이 사용 설정된 경우에만 적용됩니다.
|
| 곡선 최적화 | |
| 크기 예상값 | 모션 경로의 예상 크기를 표시합니다. 더 압축하려면 곡선 최적화 버튼을 사용합니다. |