애니메이션

애니메이션 반응 만들기

전체 액션 패널 / 간소화된 액션 패널

• 현재 시간을 표시하는 재생헤드라는 흰색 수직선. 드래그하거나 왼쪽 필드에 특정 시간을 입력할 수 있습니다.
• 애니메이션된 모든 요소 및 속성에 대한 키프레임 트랙 (가로 레인으로 표시됨).
• 속성 변경이 발생하는 키프레임을 나타내는 트랙의 다이아몬드 마커.

• 현재 시간을 나타내는 수직 재생헤드.
• 애니메이션된 각 요소 및 속성에 대한 키프레임 트랙.
• 키프레임 위치를 나타내는 마커.

• 재생헤드를 드래그하여 시간을 스크러빙합니다.
• 키프레임을 직접 추가하거나 삭제합니다.
• 레이어를 확장하여 속성별 애니메이션을 봅니다.
• 더 세밀한 제어를 위해 확대/축소합니다.

키프레임

키프레임 만들기

• 애니메이션의 지속시간을 조정하여 전체 길이를 정의한 다음 해당 시간 범위 내에서 변경 사항을 적용할 수 있습니다.
• 또는 전체 액션 패널을 열고 재생헤드를 속성을 수정하려는 정확한 순간으로 이동합니다. 이를 통해 정확한 타이밍과 애니메이션 레이어링이 가능합니다.

방법 A: 속성 변경

1. 요소를 선택합니다.
2. 캔버스에서 직접 또는 속성 패널에서 해당 속성을 조정합니다.
3. 현재 재생헤드 위치에 키프레임이 자동으로 추가됩니다.

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

1. 타임라인 패널의 특정 속성 위로 마우스를 가져갑니다.
2. 다이아몬드 아이콘이 나타나면 클릭하여 현재 재생헤드 시간에 키프레임을 삽입합니다.

키프레임 조정

• 키프레임을 드래그하여 타임라인을 따라 이동시켜 애니메이션의 타이밍을 변경합니다.
• 키프레임 시간에 매개변수를 변경하여 해당 시간의 애니메이션을 업데이트합니다.
• ⌫ 백스페이스 또는 Delete 키를 눌러 키프레임을 제거합니다.
• 키프레임를 선택하고 나중 시간으로 변경한 다음 Command ⌘ C 또는 Ctrl C를 눌러 복사합니다.

• 현재 시간으로 복제: 현재 시간에 키프레임의 복사본을 만듭니다. 복제는 재생헤드가 키프레임이 현재 있는 시간과 다른 시간으로 설정된 경우에만 효과가 있습니다. 예를 들어, 1초에 있는 키프레임을 기반으로 새 키프레임을 만들려면 복제하기 전에 시간을 약간 나중(예: 1.2초)으로 설정하십시오. Command ⌘ D 또는 Ctrl D를 눌러도 키프레임이 복제됩니다.
• 초기 값으로 재설정: 선택한 키프레임의 속성을 애니메이션 모드가 꺼져 있을 때의 값과 동일하게 전환합니다. 이는 반복 애니메이션을 만드는 데 유용합니다.
• 키프레임 삭제: 키프레임을 제거합니다. 애니메이션은 해당 키프레임이 없는 것처럼 다시 계산되며, 제거된 키프레임 양쪽에 있는 키프레임을 연결하는 것을 포함합니다.

보간

0초	0.5초	1초

애니메이션 프리셋

애니메이션 프리셋 적용 방법

1. 요소를 선택하고 속성 패널에서 "프리셋" 옵션을 클릭합니다.
2. 원하는 프리셋을 선택하여 요소에 적용합니다.

애니메이션 프리셋 유형

• 페이드 인: 요소를 점차적으로 표시하여 투명에서 불투명으로 전환합니다.
• 페이드 아웃: 요소를 점차적으로 사라지게 하여 불투명에서 투명으로 전환합니다.
• 이동 인: 화면 밖 위치에서 보기로 이동하는 요소를 애니메이션합니다.
• 이동 아웃: 화면 밖으로 이동하여 보기에서 벗어나는 요소를 애니메이션합니다.
• 크기 키워 등장 (Scale In): 요소가 표시될 때 크기를 확대하여 더 작거나 보이지 않는 크기에서 최종 크기로 증가시킵니다.
• 크기 줄여 퇴장 (Scale Out): 요소가 보이지 않게 될 때 크기를 축소하여 사라질 때까지 크기를 줄입니다.
• 회전 등장 (Spin In): 화면 밖 위치에서 최종 표시 상태로 회전하여 요소를 보기로 회전시킵니다.
• 회전 퇴장 (Spin Out): 더 이상 보이지 않을 때까지 회전하여 요소를 보기에서 회전시켜 빼냅니다.
• 앞부분 자르기 (Trim In): 경로 모양을 점차적으로 드러내면서 화면에 경로를 그리는 애니메이션을 적용합니다.
• 뒷부분 자르기 (Trim Out): 경로를 보기에서 점차적으로 제거하면서 경로를 지우는 애니메이션을 적용합니다.

애니메이션 프리셋 조정

1. 지연 설정을 사용하여 애니메이션이 시작되기 전의 시간을 설정합니다.

1. 타임라인으로 이동
2. 요소 트랙 세그먼트를 찾습니다.
3. 트랙 세그먼트의 가장자리를 드래그하여 애니메이션 프리셋의 지속 시간을 조정합니다.

경로 자르기

경로 자르기 만들기

1. 경로 자르기 효과를 적용해야 하는 모양을 그립니다. 간단한 사각형, 원 또는 사용자 정의 벡터 경로일 수 있습니다.
2. 속성 패널의 효과 옆에 있는 기호를 클릭하여 경로 자르기 기능에 액세스합니다. 이 작업을 수행하면 경로 자르기 도구 상자가 표시됩니다.
3. 재생헤드를 원하는 시작 지점으로 이동합니다. 일반적으로 0초입니다.
4. 경로 자르기의 시작과 끝을 100%로 설정합니다.
5. 재생헤드를 원하는 끝 지점으로 이동합니다.
6. 경로 자르기의 시작을 0%로, 끝을 100%로 설정합니다. 자르기가 0%이면 선이 표시됩니다.
7. 재생을 누릅니다.

오프셋

경로 자르기 모드

동시에

개별적으로

모션 경로

주요 구성 요소

• 모션 경로 시작점: 요소 이동의 시작점.
• 모션 경로 지점: 경로상의 주요 지점.
• 모션 경로 곡선 제어: 지점 간 곡률을 조정합니다.
• 모션 경로 세그먼트: 두 모션 경로 지점 사이의 공간.

모션 경로 만들기

1. 타임라인에서 재생헤드를 이동하여 초기 위치를 설정합니다. 요소를 선택하고 위치를 변경하여 모션 경로를 생성합니다.
2. 위치 키프레임에는 x 및 y 값이 자동으로 포함됩니다.

모션 경로 구부리기

• 경로 지점을 선택하여 모양 옵션을 표시합니다:
  • 직선: 곡선 없음, 예각.
  • 대칭: 핸들이 동일한 대칭 곡선.
  • 비대칭: 다양한 곡선을 위한 핸들이 같지 않음.
  • 독립: 양쪽 핸들을 개별적으로 완전히 제어합니다.
• 곡선 제어 핸들을 사용하여 경로 곡선을 조정합니다.

방향

타이밍, 지속시간 및 이징

• 시간: 키프레임을 사용하여 세그먼트별로 속도를 조정합니다.
• 지속시간: 경로는 타임라인 지속시간을 초과할 수 있지만 초과된 움직임은 렌더링되지 않습니다.
• 이징: 더 부드러운 움직임을 위해 개별 경로 세그먼트에 적용할 수 있습니다.

예: 튀는 공

• 사실감을 위해 찌그러뜨리고 늘리는 기법을 사용합니다.
• 공의 무게는 튀는 속도와 높이에 영향을 미칩니다.
• 곡선 조정을 사용하여 튀는 역학을 미세 조정합니다.

이징

이징 사용 방법

1. 키프레임을 선택합니다.
2. 속성 패널 하단의 이징 컨텍스트 메뉴를 엽니다.
3. 프리셋을 선택하거나 곡선 핸들을 수동으로 편집하여 사용자 정의 이징을 만듭니다.

이징 패널 기능

• 시각적 곡선 편집기: 곡선 핸들을 직접 조작할 수 있습니다.
• 유형 메뉴: 점점 빨라짐, 점점 느려짐 등과 같은 프리셋을 제공합니다.
• 사용자 정의 모드: 핸들을 수동으로 조정하면 트리거됩니다.
• 베지어 좌표: [Bx, By, Tx, Ty]로 표시되며 정밀도를 위해 편집할 수 있습니다.

곡선 그리드

• 조정 가능한 두 개의 핸들바가 있는 그래픽 인터페이스.
• 핸들이 길수록 = 더 극적인 이징.
• 핸들이 짧을수록 = 더 미묘한 이징.

프리셋 이징 유형

기본 이징

• 스텝: 다음 키프레임 값으로 즉시 이동합니다.
• 선형: 일정한 속도; 가속/감속 없음.
• 점점 빨라짐 (Ease In): 느리게 시작하여 빠르게 끝납니다.
• 점점 느려짐 (Ease Out): 빠르게 시작하여 느리게 끝납니다.
• 점점 빨라졌다 느려짐 (Ease In Out): 부드러운 시작과 끝.

백 이징

• Ease In Back / Out Back / In Out Back: 시작/끝/양쪽에 의도적인 오버슛을 추가하여 "반동" 느낌을 만듭니다.

탄성 및 바운스

홉 이징

베지어 곡선 이해

• 각 이징 곡선은 키프레임에 부착된 핸들바로 제어되는 베지어 수학을 기반으로 합니다.
• 시작점과 끝점은 (0,0)과 (1,1)에 고정됩니다.
• 핸들바는 곡률을 제어하며 x 값은 0–1 사이에 고정되고 y 값은 극단적인 효과를 위해 이를 초과할 수 있습니다.
• 값이 높을수록 = 곡선 굽힘이 강해지지만 효과는 감소합니다.