타임라인 애니메이션 만들기

목표 값으로 즉시 변경하는 대신 지정된 키프레임에서 중간 값을 통해 선형 보간을 위한 타임라인 및 키프레임 기반 애니메이션을 만들 수 있습니다.

타임라인을 슬라이더와 같은 컴포넌트의 속성 값에 바인딩하고 이러한 방식으로 애니메이션을 제어할 수도 있습니다.

타임라인 추가하기

Timeline 보기에서 타임라인 및 키프레임 기반 편집기를 사용하여 컴포넌트의 속성에 애니메이션을 적용할 수 있습니다. 타임라인을 만들 때까지 뷰는 비어 있습니다.

다음 동영상은 컴포넌트 속성에 키프레임을 삽입하고 Timeline 에서 애니메이션을 적용하는 방법을 보여줍니다:

타임라인 만들기

UI 컴포넌트에 애니메이션을 적용할 타임라인을 만들려면 다음과 같이 하세요:

1. View > Views > Timeline 로 이동합니다.
2. (Add Timeline)를 선택하여 타임라인에 대한 설정을 지정하고 애니메이션을 실행합니다.

   

3. Timeline Settings 에서
   1. Timeline ID 에 타임라인을 설명하는 ID를 입력합니다.
   2. Start frame 에서 타임라인의 첫 번째 프레임을 설정합니다. 음수 값도 허용됩니다.
   3. End frame 에서 타임라인의 마지막 프레임을 설정합니다.
4. Animation Settings 에 입력합니다:
   1. Animation ID 에 애니메이션의 ID를 입력합니다.
   2. Start frame 에서 애니메이션의 첫 번째 프레임을 설정합니다.
   3. End frame 에서 애니메이션의 마지막 프레임을 설정합니다.
   4. Duration 에서 애니메이션의 길이를 밀리초 단위로 설정합니다.

   선택적 애니메이션 설정의 용도는 툴팁을 참조하세요.

5. Close 을 선택하여 대화 상자를 닫고 설정을 저장합니다.

   

이제 애니메이션을 적용할 속성의 키프레임을 설정할 수 있습니다.

키프레임 값 설정하기

타임라인을 만들면 Qt Quick 디자이너는 타임라인에 대해 하나의 애니메이션을 만듭니다. 타임라인에 대해 원하는 만큼 애니메이션을 만들 수 있습니다. 예를 들어 타임라인의 작은 부분만 실행하거나 타임라인을 거꾸로 실행하는 애니메이션을 만들 수 있습니다.

Timeline 보기에서 컴포넌트에 애니메이션을 적용하려면 애니메이션을 적용할 속성의 키프레임 값을 설정합니다. Qt Quick Designer는 두 키프레임 사이에 키프레임을 자동으로 추가하고 해당 값을 균등하게 설정하여 예를 들어 이동 또는 변환을 만듭니다.

컴포넌트 속성의 키프레임 값을 설정하려면 다음과 같이 하세요:

1. Navigator 보기에서 애니메이션을 적용할 컴포넌트를 선택합니다.
2. Properties 보기에서 애니메이션을 적용하려는 속성에 대해 (Actions) > Insert Keyframe 을 선택합니다.

   

3. Timeline 보기에서 Per Property Recording 버튼을 선택하여 속성 변경 사항 녹화를 시작합니다.

   

4. 재생 헤드가 0프레임에 있는지 확인하고 타임라인의 속성 이름 옆 필드에 속성 값을 입력합니다. Enter를 선택하여 값을 저장합니다.
5. 타임라인에서 재생 헤드를 다른 프레임으로 이동하고 해당 프레임에 값을 지정합니다. 자세한 내용은 타임라인 탐색하기를 참조하세요.
6. 필요한 만큼 값을 지정했으면 Per Property Recording 을 다시 선택하여 녹화를 중지합니다.

스테이트에서 사용할 타임라인 만들기

States 보기에 추가하는 상태에서 사용할 타임라인을 두 개 이상 만들 수 있습니다.

두 번째 상태에 대한 타임라인을 만들려면 다음과 같이 하세요:

1. Timeline > Timeline Settings 으로 이동합니다.
2. 을 선택하여 다른 타임라인을 만듭니다.
3. 아래 표의 Animation Settings 탭에서 타임라인을 사용하려는 상태의 타임라인을 설정합니다.

   

타임라인을 속성에 바인딩하기

타임라인을 컴포넌트 속성에 바인딩하면 애니메이션의 현재 프레임이 속성 값에 의해 제어됩니다.

이 예에서는 타임라인을 슬라이더 컴포넌트에 바인딩합니다.

타임라인이 생성되고 키프레임 값이 설정되었습니다:

1. Components 에서 슬라이더를 2D 또는 Navigator 보기로 드래그합니다.
2. Navigator 에서 슬라이더를 선택하고 Properties 에서 To 를 1000으로 설정합니다.

   참고: 슬라이더로 전체 애니메이션을 제어하려면 슬라이더의 From 및 To 값이 타임라인의 Start Frame 및 End Frame 값과 일치해야 합니다.

3. Timeline Settings 대화 상자에서 Animation Settings 탭 옆의 을 선택하여 애니메이션을 삭제합니다. 애니메이션이 여러 개 있는 경우 모두 삭제합니다.
4. Expression binding 에 slider.value 을 입력합니다.

   

애니메이션을 상태에 바인딩하기

애니메이션을 상태에 바인딩하여 상태를 입력할 때 애니메이션을 실행합니다.

Timeline Settings 대화 상자의 하단에 있는 표에서:

1. Timeline 의 값을 두 번 클릭하고 상태에 바인딩할 애니메이션이 있는 타임라인을 선택합니다.
2. Animation 에서 값을 두 번 클릭하고 상태에 바인딩할 애니메이션을 선택합니다.

   

애니메이션을 실행하지 않고 애니메이션의 특정 키프레임에 상태를 바인딩하려면 Fixed Frame 에서 키프레임을 설정합니다.

키프레임 관리

키프레임 편집

프로퍼티에 대해 기록한 모든 변경 사항을 제거하려면 타임라인에서 프로퍼티 이름을 마우스 오른쪽 버튼으로 클릭하고 Remove Property 을 선택합니다.

재생 헤드의 현재 위치에 있는 컴포넌트의 키프레임 트랙에 키프레임을 추가하려면 타임라인에서 컴포넌트 이름을 마우스 오른쪽 단추로 클릭하고 Add Keyframes at Current Frame 을 선택합니다.

키프레임은 활성 또는 비활성 여부 또는 완화 커브를 적용했는지 여부에 따라 다양한 색상과 모양의 마커를 사용하여 타임라인에 표시됩니다.

키프레임 값 편집하기

키프레임 값을 미세 조정하려면 키프레임 마커를 두 번 클릭하거나 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Edit Keyframe 을 선택합니다.

Edit Keyframe 대화 상자에 애니메이션 중인 속성의 이름과 Frame 에 지정된 프레임의 현재 값이 표시됩니다. 키프레임과 해당 값을 모두 변경할 수 있습니다.

키프레임 복사

컴포넌트의 키프레임 트랙에서 키프레임을 복사하여 다른 컴포넌트의 키프레임 트랙에 붙여넣을 수 있습니다.

한 트랙에서 다른 트랙으로 모든 키프레임을 복사하려면 다음과 같이 하세요:

1. 컴포넌트 ID를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Copy All Keyframes 을 선택합니다.
2. 다른 컴포넌트 ID를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Paste Keyframes 을 선택합니다.

키프레임 삭제하기

키프레임을 삭제하려면 해당 키프레임을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Delete Keyframe 을 선택합니다.

선택한 컴포넌트에서 모든 키프레임을 삭제하려면 Timeline 에서 컴포넌트 이름을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Delete All Keyframes 을 선택합니다.

타임라인 탐색하기

다음과 같은 방법으로 타임라인을 탐색할 수 있습니다:

• 재생헤드(1)를 프레임으로 드래그합니다.
• 눈금자(2)를 클릭하여 프레임으로 이동합니다.
• Start Frame (Home), Previous Frame (,), NextFrame (.), 또는 End Frame (End) 버튼(3)을 선택하거나 키보드 단축키를 사용하여 타임라인의 첫 번째, 이전, 다음 또는 마지막 프레임으로 이동합니다.
• 해당 프레임으로 이동하려면 현재 키프레임 필드(4)에 프레임 번호를 입력합니다.
• 타임라인에서 속성 이름 옆의 Previous 및 Next 버튼을 선택(5)하면 해당 속성의 이전 또는 다음 키프레임으로 이동합니다.

타임라인 확대하기

툴바의 슬라이더를 사용하여 Timeline 에서 확대/축소 수준을 설정합니다. 및 버튼을 선택하여 뷰를 축소하거나 확대합니다.

키프레임 트랙 색상 설정

키프레임 트랙의 색상을 변경하려면 상황에 맞는 메뉴에서 Override Color 을 선택한 다음 색상 선택기에서 색상을 선택합니다. 색상을 재설정하려면 Reset Color 을 선택합니다.

애니메이션 보기

애니메이션을 미리 보려면 Timeline 보기에서 다음 중 하나를 수행합니다:

• 타임라인을 따라 재생 헤드를 드래그합니다.
• (Play) 또는 스페이스를 선택합니다.

전체 UI를 미리 보려면 상단 도구 모음에서 실행 드롭다운을 선택한 다음 Live Preview 을 선택하거나 Alt + P 를 선택합니다.

회전 애니메이션 적용

중심점을 중심으로 회전하는 컴포넌트에 애니메이션을 적용하려면 회전하는 컴포넌트의 부모로 항목 컴포넌트를 사용할 수 있습니다. 그런 다음 항목에 대한 타임라인을 만들고 시작 및 종료 키프레임에 대한 회전 속성을 설정합니다.

도형 애니메이션

를 사용하여 Qt Quick Shapes Design Helpers 를 사용하여 다음 도형에 애니메이션을 적용할 수 있습니다:

• 타원형
• 직사각형 도형
• 정다각형도형
• 별 모양