Animate를 사용하여 모션 트윈 편집

Animate의 [모션 편집기]를 사용하면 복잡한 [모션 트윈]을 간단하게 만들 수 있습니다. 모션 편집기는 선택한 트윈 범위에 해당하는 모든 속성을 2차원 그래프로 보여주는 압축 뷰를 제공합니다. 이러한 각각의 그래프와 해당 트윈 속성을 개별적으로 수정할 수 있도록 선택할 수 있습니다. 모션 편집기를 사용하면 정밀하게 제어할 수 있을 뿐 아니라 세밀성도 매우 높으므로 애니메이션 품질을 높여 실제 비헤이비어를 에뮬레이션할 수 있습니다.

모션 편집기

모션 편집기는 복잡한 트윈을 간편하게 만들 수 있도록 설계되었습니다. 모션 편집기를 사용하면 트윈 속성을 제어하고 조작할 수 있습니다. 모션 트윈을 만든 후에는 모션 편집기를 사용하여 트윈을 정밀하게 미세 조정할 수 있습니다. 모션 편집기는 한 번에 하나의 속성을 선택하여 편집할 수 있도록 허용하므로 트윈 편집에 좀 더 쉽게 집중할 수 있도록 상당히 개선되었습니다.

모션 편집기를 사용하는 이유

모션 편집기는 복잡한 트윈을 간편하게 만들 수 있도록 설계되었습니다. 따라서 모션 편집기를 통해 트윈 및 해당 속성을 세부적으로 제어할 수 있습니다. 다음은 모션 편집기가 독보적으로 제공하는 기능입니다.

간편한 액세스 및 수정 - 트윈에 적용되는 모든 속성을 단일 패널 내에서 간편하게 액세스하고 수정할 수 있습니다.
서로 다른 여러 프리셋을 추가하거나 사용자 정의 속도 추가: 모션 편집기를 통해 서로 다른 프리셋을 추가하거나 여러 프리셋을 추가하거나 사용자 정의 속도를 만들 수 있습니다. 트인 속성에 [부드럽게]를 추가하는 것은 객체의 실제 비헤이비어를 에뮬레이션하는 가장 쉬운 방법입니다.
결과 곡선: 개별 속성에 [부드럽게]를 적용하고 결과 곡선을 사용하여 개별 속성 그래프에서 이러한 부드럽게 효과를 볼 수 있습니다. 결과 곡선은 실제 트윈을 표현합니다.
앵커 포인트 및 제어점: 앵커 포인트 및 제어점을 사용하여 트윈의 주요 섹션을 분리한 후 편집할 수 있습니다.
미세 조정된 애니메이션: 모션 편집기는 속성 곡선을 조정하여 개별 속성에 곡선 패스 트윈을 만드는 등 특정 종류의 애니메이션을 제작하는 유일한 수단입니다.

모션 편집기 창 열기

이 문서의 설명은 모션 트윈을 이미 만들었다는 가정 하에서 모션 편집기를 사용한 트윈 미세 조정에 대해 설명합니다.

모션 편집기를 열려면 다음을 수행합니다.

타임라인에서 미세 조정하려는 모션 트윈 범위를 선택한 후 트윈 범위를 두 번 클릭합니다. 또는 트윈 범위에서 마우스 오른쪽 버튼을 클릭하여 트윈 미세 조정을 선택하면 모션 편집기가 열립니다.

속성 곡선

모션 편집기는 속성 곡선이라는 2차원 그래프를 사용하여 트윈의 속성을 표현합니다. 이러한 그래프는 모션 편집기의 격자 내에 합성됩니다. 각 속성에는 자체 속성 곡선이 있으며, 이 속성 곡선의 가로축은 왼쪽에서 오른쪽으로 시간 경과를 나타내고 세로축은 속성의 값 변화를 나타냅니다.

모션 편집기 내에서 속성 곡선을 편집하여 모션 트윈을 조작할 수 있습니다. 또한 모션 편집기를 사용하면 속성 곡선을 원활하게 편집할 수 있으며 트윈을 더 정밀하게 제어할 수 있습니다. 속성 곡선은 속성 키프레임 또는 앵커 포인트를 추가하여 조작합니다. 그러면 트윈에서 해당 속성의 전환을 표시할 속성 곡선의 주요 부분을 조작할 수 있습니다.

참고로, 모션 편집기를 사용하여 트윈 범위 동안 변경할 수 있는 속성만 편집할 수 있습니다. 예를 들어 트윈 범위 동안 [그래디언트 경사] 필터의 [품질] 속성에는 한 값만 할당할 수 있으므로 모션 편집기를 사용하여 편집할 수 없습니다.

앵커 포인트

앵커 포인트를 사용하면 곡선의 주요 부분을 명시적으로 수정하는 방식으로 속성 곡선을 더 잘 제어할 수 있습니다. 속성 키프레임 또는 앵커 포인트를 추가하여 모션 편집기에서 곡선 대부분의 모양을 정밀하게 제어할 수 있습니다.

앵커 포인트는 격자에서 사각형으로 나타납니다. 모션 편집기를 사용하면 앵커 포인트를 속성 곡선에 추가하거나 위치를 수정하여 트윈 비헤이비어를 제어할 수 있습니다. 앵커 포인트 추가 시 곡선이 각도를 통과하는 지점에 모퉁이가 생성됩니다. 하지만 제어점의 베지어(Bezier) 제어를 사용하여 속성 곡선의 선분을 부드럽게 할 수 있습니다.

제어점

제어점을 사용하면 앵커 포인트의 어느 쪽에서든 속성 커브를 부드럽게 하거나 수정할 수 있습니다. 제어점은 표준 베지어 제어를 사용하여 수정할 수 있습니다.

속성 곡선 편집

트윈의 속성을 편집하려면 다음을 수행합니다.

Animate에서 트윈 범위를 선택한 상태로 마우스 오른쪽 버튼 클릭 > 트윈 미세 조정을 선택하면 [모션 편집기]가 열립니다. 또는 간단히 선택한 트윈 범위를 두 번 클릭해도 됩니다.
아래로 스크롤하여 편집할 속성을 선택합니다. 선택 항목을 반전하려면 마우스 오른쪽 버튼을 클릭하고 [선택 항목 반전]을 선택합니다.
선택한 속성의 속성 곡선을 표시한 상태로 다음을 수행하도록 선택할 수 있습니다.
1. 버튼을 클릭하고 앵커 포인트를 추가하려는 속성 곡선의 프레임을 클릭하여 앵커 포인트를 추가합니다. 또는 앵커 포인트를 추가할 곡선을 두 번 클릭합니다.
2. 방향에 상관없이 기존 앵커 포인트를 선택하여 격자 내의 원하는 프레임으로 이동합니다. 수직으로 이동할 수 있는 거리는 속성의 값 범위로 제한됩니다.
3. 앵커 포인트를 선택하고 Ctrl 키(MAC의 경우 Cmd 키)를 누른 채 클릭하여 앵커 포인트를 제거합니다.

제어점을 사용하여 속성 곡선 편집

제어점을 사용하여 속성 곡선을 편집하려면 다음을 수행합니다.

Animate에서 트윈 범위를 선택한 상태로 마우스 오른쪽 버튼 클릭 > 트윈 미세 조정을 선택하면 모션 편집기가 열립니다. 또는 선택한 트윈 범위를 두 번 클릭해도 됩니다.
아래로 스크롤하여 편집할 속성을 선택합니다. 선택 항목을 반전하려면 마우스 오른쪽 버튼을 클릭하고 [선택 항목 반전]을 선택합니다.
선택한 속성의 속성 곡선을 표시한 상태로 다음을 수행하도록 선택할 수 있습니다.
1. 버튼을 클릭하고 격자 내에서 앵커 포인트를 추가하려는 프레임을 클릭하여 앵커 포인트를 추가합니다.또는 앵커 포인트를 추가할 곡선을 두 번 클릭합니다.
  
  또는
2. 격자에서 기존 앵커 포인트를 선택합니다.
앵커 포인트를 선택한 상태에서 Alt 키를 누른 채 수직으로 드래그하여 제어점을 활성화합니다. 베지어 제어를 통해 모퉁이 선분을 부드럽게 하는 방식으로 곡선의 모양을 수정할 수 있습니다.

속성 곡선 복사

모션 편집기 내의 속성 간에 속성 곡선을 복사할 수도 있습니다.

속성 곡선을 복사하려면 다음을 수행합니다.

Animate에서 트윈 범위를 선택한 상태로 마우스 오른쪽 버튼 클릭 > 트윈 미세 조정을 선택하면 모션 편집기가 열립니다. 또는 선택한 트윈 범위를 두 번 클릭해도 됩니다.
복사하려는 곡선의 속성을 선택하고 마우스 오른쪽 버튼 클릭 > 복사를 선택하거나 Ctrl + C(MAC의 경우 Cmd + C)를 누릅니다.
절대값을 갖는 곡선을 붙여넣으려면 복사한 속성 곡선을 붙여넣을 속성을 선택하고 마우스 오른쪽 버튼 클릭 > 붙여넣기를 선택하거나 Ctrl + V(MAC의 경우 Cmd + V)를 누릅니다.
대상 곡선의 범위 내에 곡선을 붙여넣으려면 복사한 속성 곡선을 붙여넣을 속성을 선택하고 마우스 오른쪽 버튼 클릭 > 현재 범위에 맞게 붙여넣기를 선택합니다.

속성 곡선 반전

속성 곡선을 반전하려면 다음을 수행합니다.

모션 편집기에서 속성을 선택합니다.
마우스 오른쪽 버튼 클릭 > 반전을 선택하여 속성 곡선을 반전합니다.

프리셋 및 사용자 정의 속도 적용

[부드럽게]를 사용하면 트윈의 속도를 제어하여 더 사실적인 움직임이나 더 재미있는 효과를 표현할 수 있습니다. 모션 트윈에 [부드럽게]를 적용하면 애니메이션의 시작 또는 끝 부분을 조작하여 객체의 좀 더 자연스러운 움직임을 만들 수 있습니다. 예를 들어 [부드럽게]를 사용하는 가장 일반적인 용도 중 하나는 객체 모션 경로의 끝에 실감나는 가속과 감속을 추가하는 것입니다. 요약하자면 Animate는 [속성]에 적용한 [부드럽게]에 따라 [속성] 값의 변경 속도를 조정합니다.

[부드럽게]는 간단하거나 복잡할 수 있습니다. Animate에는 간단한 효과 또는 복잡한 효과에 적용할 수 있는 다양한 프리셋 [부드럽게] 범위가 포함되어 있습니다. 또한 [부드럽게]에 강도를 할당하여 트윈의 시각적 효과를 개선할 수도 있습니다. 모션 편집기에서 사용자가 직접 사용자 정의 곡선 [부드럽게]를 만들 수도 있습니다.

모션 편집기의 부드러운 곡선은 복잡할 수 있으므로 부드러운 곡선을 사용하여 스테이지에 복잡한 모션 경로를 만들지 않고도 스테이지에 복잡한 모션을 만들 수 있습니다. 또한 부드러운 곡선을 사용하여 위치 X 및 Y 같은 공간적 속성뿐만 아니라 다른 속성의 복잡한 트윈을 만들 수 있습니다.

사용자 정의 속도

사용자 정의 속도를 사용하면 모션 편집기에서 사용자 정의 부드러운 곡선을 사용하여 사용자 자신의 부드럽게를 만들 수 있습니다. 그런 다음 선택한 트윈의 모든 속성에 사용자 정의 속도를 적용할 수 있습니다.

사용자 정의 속도 그래프는 시간 경과에 따른 모션 정도를 나타냅니다. 가로축은 프레임 수를 나타내고 세로축은 트윈의 변경률을 나타냅니다. 애니메이션의 첫 번째 값은 0%이고 마지막 키프레임은 0% ~ 100%로 설정될 수 있습니다. 트위닝된 인스턴스의 변경률은 그래프의 곡선 기울기로 표시됩니다. 그래프에 가로 선(기울기 없음)을 생성하면 속도는 0이고 그래프에 세로 선을 생성하면 속도가 즉시 변경됩니다.

속성 곡선에 부드러운 곡선 적용

트위닝된 속성에 [부드럽게]를 추가하려면 다음을 수행합니다.

모션 편집기에서 [부드럽게]를 적용하려는 속성을 선택하고 [속도 추가] 버튼을 클릭하여 [부드럽게] 패널을 표시합니다.
[부드럽게] 패널에서 다음을 선택할 수 있습니다.
1. 왼쪽 창에서 프리셋을 선택하여 프리셋 부드럽게를 적용합니다. [부드럽게] 필드에 값을 입력하여 부드럽게의 강도를 지정합니다.
2. 왼쪽 창에서 [사용자 정의 속도]를 선택하고 부드러운 곡선을 수정하여 사용자 정의 속도를 만듭니다. 자세한 내용은 사용자 정의 부드러운 곡선 만들기 및 적용을 참조하십시오.
[부드럽게] 패널 바깥쪽에서 아무 위치나 클릭하여 패널을 닫습니다. 속성에 적용한 속도의 이름이 [속도 추가] 버튼에 나타납니다.

사용자 정의 속도 곡선 만들기 및 적용

트위닝된 속성에 사용자 정의 속도를 만들어 적용하려면 다음을 수행합니다.

모션 편집기에서 사용자 정의 속도를 적용하려는 속성을 선택하고 [속도 추가] 버튼을 클릭하여 [부드럽게] 패널을 표시합니다.
[부드럽게] 패널에서 기본 사용자 정의 속도 곡선을 다음 방식으로 수정할 수 있습니다.
1. Alt 키를 누른 채 클릭하여 곡선에 앵커 포인트를 추가합니다. 또한 격자의 원하는 지점으로 앵커 포인트를 이동할 수도 있습니다.
2. 앵커 포인트의 어느 쪽으로든 곡선 선분을 부드럽게 할 수 있도록 앵커 포인트의 제어점(앵커 포인트에서 Alt+클릭)을 활성화합니다.
[부드럽게] 패널 바깥쪽을 클릭하여 패널을 닫습니다. [속도 추가] 버튼은 속성에 사용자 정의 속도를 적용했다는 것을 나타내는 '사용자 정의'로 표시됩니다.

부드러운 곡선 복사

부드러운 곡선을 복사하려면 다음을 수행합니다.

[부드럽게] 패널에서 복사하려는 부드러운 곡선을 선택하고 Ctrl + C(MAC의 경우 Cmd + C)를 누릅니다.
복사한 부드러운 곡선을 붙여넣을 속성을 선택하고 Ctrl + V(MAC의 경우 Cmd + V)를 누릅니다.

여러 속성에 속도 적용

이제 속성 그룹에 프리셋 또는 사용자 정의 속도를 적용할 수 있습니다. 모션 편집기에서는 속성을 속성 그룹 및 하위 속성의 계층 구조로 구성합니다. 임의의 수준, 즉 이 계층 구조 내의 개별 속성 또는 속성 그룹에 속도를 적용할 수 있습니다.

속성 그룹에 속도를 적용한 후 하위 속성을 개별적으로 계속 편집할 수 있습니다. 또한 그룹의 속도와는 다른 속도를 하위 속성에 적용할 수도 있습니다.

여러 속성에 속도를 적용하려면 다음을 수행합니다.

모션 편집기에서 속성 그룹을 선택하고 [속도 추가] 버튼을 클릭하여 [부드럽게] 패널을 표시합니다.
[부드럽게] 패널에서 [프리셋 부드럽게]를 선택하거나 [사용자 정의 속도]를 만듭니다. [부드럽게] 패널 외부의 아무 곳이나 클릭하여 선택한 속도를 속성 그룹에 적용합니다.

결과 곡선

속성 곡선에 부드러운 곡선을 적용하면 시각적 오버레이(일명, 결과 곡선)가 격자에 표시됩니다. 결과 곡선은 속성 곡선에 적용된 부드럽게 효과를 정확하게 표현합니다. 또한 결과 곡선은 트윈 객체의 최종 애니메이션을 나타냅니다. 결과 곡선을 사용하면 애니메이션 테스트 시 스테이지에서 볼 수 있는 효과를 더 쉽게 이해할 수 있습니다.

모션 편집기 표시 제어

모션 편집기에서 편집하기 위해 표시할 속성 곡선 및 각 속성 곡선의 표시 크기를 제어할 수 있습니다. 속성 곡선을 크게 표시할수록 편집하기 쉬워집니다.

새로운 모션 편집기에는 트윈에 적용된 속성만 표시됩니다.
보기에 맞추기 전환()을 사용하여 타임라인 폭에 모션 편집기를 맞출 수 있습니다.
모션 편집기의 크기를 조정하고 타임라인의 확대/축소 컨트롤을 사용하여 더 적은 프레임() 또는 더 많은 프레임()을 표시하도록 선택할 수 있습니다. 또한 슬라이더를 사용하여 모션 편집기의 적합한 보기를 설정할 수도 있습니다.
모션 편집기에는 세로 확대/축소 전환 기능이 있습니다. 세로 확대/축소를 사용하면 모션 편집기 내에서 적합한 범위의 속성 값을 표시할 수 있습니다. 또한 확대/축소를 사용하면 속성 곡선에 초점을 맞춰 더 미세하게 편집할 수 있습니다.
기본적으로 속성은 모션 편집기의 왼쪽 창에 확장되어 나타납니다. 하지만 속성 이름을 클릭하여 드릴다운 목록을 축소할 수 있습니다.

키보드 단축키

두 번 클릭 - 속성 곡선을 두 번 클릭하면 앵커 포인트가 추가됩니다.

Alt+드래그 - 앵커 포인트를 Alt+드래그하면 제어점이 활성화됩니다.

Alt+드래그 - 선택한 제어점을 조작합니다(한쪽 부분만 편집).

Alt+클릭 - 앵커 포인트를 Alt+클릭하면 하나 이상의 제어점이 비활성화됩니다.

Shift+드래그 - 직선 방향으로 앵커 포인트가 이동합니다.

Command/Ctrl + 클릭 - 앵커 포인트가 삭제됩니다.

위/아래 화살표 키 - 선택한 앵커 포인트를 세로로 이동합니다.

Command/Ctrl + C/V - 선택한 곡선을 복사하고 붙여넣습니다.

Command/Ctrl + R - 선택한 곡선을 반전합니다.

Command/Ctrl + 마우스 휠 스크롤 - 확대/축소합니다.

모션 편집기를 사용하여 모션 트윈을 편집하는 방법