애니메이션

제품

학습하기

소개

커뮤니티

✍️

참고

주의하세요! Phase에서는 항상 업데이트와 개선이 거의 이루어지지 않습니다. 우리의 튜토리얼은 현재 앱과 약간 다를 수 있습니다.

Phase의 간단하면서도 강력한 애니메이션 도구를 통해 디자인에 생명을 불어넣으세요! 애니메이션 모드로 이동하여 타임라인의 특정 지점으로 이동한 후 편집하기만 하면 됩니다. 나머지는 Phase가 알아서 해줍니다.

Animate 모드

애니메이트 모드로 전환

시작하려면 화면 하단의 Animate 버튼을

누르거나 간단히

버튼을 누르세요.

Animate 모드에서는 Animate 슬라이더 옆에 몇 가지 추가 아이콘이 나타납니다:

재생 / 일시정지: 동영상 재생을 위한 기본적인 제어 기능입니다. 또는
스페이스
바를 사용하여 ‘재생’과 ‘중지’를 쉽게 할 수 있습니다.
루프: 애니메이션이 연속재생됩니다.
재생 속도: 이 버튼을 클릭하면 x0.25, x0.5, x1.0, x1.25, x1.5, x2.0 사이를 오갑니다.

아이콘들이 중요하지만, Animate 모드의 주요 변경 사항은 화면 하단에 타임라인 패널이 나타난다는 것입니다. 전형적인 Phase 애니메이션 작업 흐름은 타임라인을 광범위하게 활용하므로 여기에 기본 개요가 있습니다.

타임라인 인터페이스

애니메이션을 처음부터 만들면 타임라인은 흰색 세로줄을 제외하고는 비어 있습니다. 이것이 바로 애니메이션의 플레이헤드이자 시간 마커입니다. 이 플레이헤드를 드래그하거나 타임라인의 가장 왼쪽 위에 있는 칸에 입력하여 일정한 시간으로 이동시킬 수 있습니다.

것은 드래그하여 이동하거나 타임라인 가장 왼쪽의 위에 있는 필드에 입력하여 고정된 시간으로 이동할 수 있습니다.

반면에 Lottie를 가져오면 여러 개의 다이아몬드 모양이 타임라인에 나타납니다. 이것들은 키프레임으로, 애니메이션에서 레이어가 변경되는 지점입니다. 레이어에 키프레임이 설정된 경우, 새 레이어 패널에 타임라인의 왼쪽에 나타납니다.

각 키프레임은 하나 이상의 속성이 수정된 지점을 나타냅니다. 각 레이어 안에는 변경된 모든 속성이 겹쳐져 있습니다. 레이어를 확장하면 키프레임이 있는 모든 속성을 보여주는 목록을 표시할 수 있습니다.

✍️

참고

0초에 키프레임이 없으면 해당 시간의 속성은 Animate 모드가 꺼진 경우와 동일합니다.

대부분의 애니메이션 제작 작업은 키프레임을 설정하는 것이므로, 그 부분에 대해 바로 알아보겠습니다!

키프레임 생성

Phase에서 키프레임을 추가하는 것은 정적 디자인을 만드는 것만큼이나 직관적입니다. 유일한 차이점은 변경하기 전에 플레이헤드를 원하는 시간대로 이동해야 한다는 점입니다.

키프레임을 만드는 두 가지 방법이 있습니다:

방법 A: 속성 변경을 하여 키프레임 생성

요소의 위치를 조정하여 자동으로 키프레임 생성

타임라인의 특정 지점으로 플레이헤드를 이동합니다.
요소를 선택하고 이동하거나 해당 속성 중 하나를 변경합니다.
Phase는 새로 설정한 키프레임을 자동으로 생성합니다.

방법 A는 시간이 흐름에 따라 재설계하는 것과 동일합니다. 많은 클릭이 필요하지 않으므로 사용하기 쉬울 수 있습니다. 그러나 때로는 키프레임을 수동으로 만들어야 하는 경우가 있습니다.

방법 B: 수동으로 키프레임 추가

수동 입력으로 키프레임 추가

타임라인의 특정 지점으로 플레이헤드를 이동합니다.
어떤 속성이든 호버링합니다. 다이아몬드 키프레임 인디케이터가 나타납니다.
아이콘을 클릭합니다.
속성이 변경되지 않았더라도 Phase는 해당 시간에 키프레임을 생성합니다.

방법 B는 애니메이션을 딜레이할 때 가장 유용합니다. 예를 들어 애니메이션이 0초부터 이후 시점까지 동일하게 유지되어야 하는 경우 시간이 지나도 해당 속성이 유지되는 키프레임을 만듭니다. 이 키프레임은 애니메이션의 맨 처음이 아니더라도 새로 만든 첫 번째 키프레임처럼 사용할 수 있습니다.

키프레임 조정

키프레임에 스냅합니다

키프레임을 클릭할 때마다 재생 헤드가 자동으로 여기에 맞춰집니다. 키프레임을 선택하고 수정할 수 있는 다른 방법이 있습니다.

타임라인을 따라 키프레임을 드래그하여 애니메이션의 시간을 변경할 수 있습니다.
키프레임 시간에 매개변수를 변경하여 해당 시간에 애니메이션을 업데이트할 수 있습니다.
⌫ Backspace
또는
Delete
를 눌러 키프레임을 제거할 수 있습니다.
키프레임을 선택한 후 나중에 시간을 변경하고
Command ⌘
C
또는
Ctrl
C
를 눌러 복사할 수 있습니다.

키프레임을 마우스 오른쪽 버튼으로 클릭하면 Phase에 다음 옵션이 표시됩니다:

현재 시간에 복제: 현재 시간에 키프레임의 복사본을 만듭니다. 복제는 플레이 헤드가 현재 키프레임과 다른 시간으로 설정된 경우에만 실행됩니다. 예를 들어, 1초를 기준으로 새 키프레임을 만들려면 복제하기 전에 시간을 조금 더 늦게(예: 1.2초) 설정합니다.
Command ⌘
D
또는
Ctrl
D
를 누르면 키프레임도 복제됩니다.
초기값으로 재설정: 선택한 키프레임의 속성을 애니메이션 모드가 꺼졌을 때의 값과 동일하게 변경합니다. 애니메이션 루프를 만들 때 유용합니다.
키프레임 삭제: 키프레임을 제거합니다. 애니메이션은 제거된 키프레임의 양쪽에 연결된 키프레임을 포함하여 없는 것처럼 다시 애니메이션이 실행됩니다.

타임라인의 오른쪽에서 키프레임을 클릭하면 이징 설정을 볼 수 있습니다. 이를 통해 애니메이션의 속도와 부드러움을 조정할 수 있습니다.

보간

2초 동안 형태 보간

애니메이션을 만들 때 키프레임을 다양한 간격으로 설정하여 해당 시점에 애니메이션이 어떻게 보일지 결정할 수 있습니다. 각 키프레임 사이에서 Phase는 보간이라는 과정을 통해 애니메이션을 자동으로 보정해 계산합니다.

여기에 간단한 애니메이션이 있습니다. 0초에는 키프레임이 없습니다. 그런 다음 기본 디자인으로 노란색 원이 사용됩니다. 그리고 1초 마커에서 애니메이션은 빨간색 다이아몬드로 설정됩니다. 그 시점에서 애니메이션은 180도 회전하도록 설정됩니다.

0 초	0.5 초	1 초

0초와 1초 사이에는 키프레임이 없습니다. 그러나 Phase는 모든 포인트 사이의 테두리 위치와 채우기 색상을 미리 예상합니다. 따라서 0초와 1초 사이의 모양을 보면, 주황색으로 채워진 둥근 사각형 형태로 나타날 것입니다.

📖

Phase는 서서히 속도를 높이거나 낮출 수 있는 정교한 보간을 생성할 수 있습니다. 이 프로세스를 이징이라고 하며, 이에 대한 내용은 관련 문서를 별도로 작성했습니다.