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

목표 값으로 즉시 변경하는 대신, 지정된 키프레임의 중간 값을 통해 선형 보간이 이루어지도록 타임라인 및 키프레임 기반 애니메이션을 생성할 수 있습니다.

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

타임라인 추가

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 Designer는 해당 타임라인에 대한 애니메이션을 하나 생성합니다. 타임라인에 대해 원하는 만큼 애니메이션을 생성할 수 있습니다. 예를 들어, 타임라인의 일부 구간만 재생하거나 타임라인을 역방향으로 재생하는 애니메이션을 만들 수 있습니다.

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)에 프레임 번호를 입력하여 해당 프레임으로 이동할 수 있습니다.
• 타임라인(5)에서 속성 이름 옆에 있는 ‘ Previous ’ 및 ‘ Next ’ 버튼을 선택하여 해당 속성의 이전 또는 다음 키프레임으로 이동할 수 있습니다.

타임라인 확대/축소

도구 모음의 슬라이더를 사용하여 ‘ Timeline ’에서 확대/축소 수준을 설정합니다. ‘ ’ 및 ‘ ’ 버튼을 선택하여 보기를 축소하거나 확대합니다.

키프레임 트랙 색상 설정

키프레임 트랙의 색상을 변경하려면 컨텍스트 메뉴에서 ‘ Override Color ’을 선택한 다음, 색상 선택기에서 색상을 선택하십시오. 색상을 초기화하려면 ‘ Reset Color ’을 선택하십시오.

애니메이션 보기

애니메이션을 미리 보려면 ‘ Timeline ’ 뷰에서 다음 중 하나를 수행하십시오.

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

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

회전 애니메이션 적용

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

도형 애니메이션

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

• EllipseShape
• RectangleShape
• 정다각형 도형
• StarShape