Qt Quick 의 핵심 개념 - 상태, 전환 및 애니메이션

현대적인 사용자 인터페이스에서는 상태 간 전환과 사용자 인터페이스 애니메이션이 매우 유용합니다. 이는 Qt Quick 에서 핵심 개념입니다.

이 페이지에서는 상태, 상태 전환 및 속성 애니메이션의 개념을 설명합니다. 어떤 개념이 중요한지, 그 이유는 무엇인지, 그리고 이러한 개념들이 어떻게 상호 연관되는지에 대해 자세히 다룹니다. 또한 이러한 개념을 구현하기 위해 Qt Quick 가 제공하는 QML 유형에 대한 심층적인 정보를 확인할 수 있는 링크도 제공합니다.

상태

특정 시각적 항목의 상태란, 해당 시각적 항목 내에서 개별 구성 요소가 어떻게, 어디에 표시되는지를 설명하는 정보 집합과 그 상태와 관련된 모든 데이터를 말합니다. 사용자 인터페이스의 대부분의 시각적 항목은 제한된 수의 상태를 가지며, 각 상태는 명확하게 정의된 속성을 갖습니다.

예를 들어, 목록에 있는 요소는 선택되었거나 선택되지 않은 상태일 수 있으며, 선택된 경우 현재 활성화된 단일 선택 항목이거나 선택 그룹의 일부일 수 있습니다.

이러한 각 상태에는 특정 시각적 모양(중립, 강조 표시, 확장 등)이 연관될 수 있습니다.

Qt Quick State 유형을 제공하며, 이 유형에는 의미론을 정의하고 동작이나 애니메이션을 트리거하는 데 사용할 수 있는 속성이 있습니다. 자세한 내용은 Qt Quick States에 대한 문서를 참조하십시오.

전환

시각적 항목이 한 상태에서 다른 상태로 전환되면 해당 항목의 모양이 변경됩니다. 전환은 두 상태 사이의 "경계"입니다. 애플리케이션의 다른 부분에서 특정 상태로 진입하거나 해당 상태를 벗어날 때 트리거되는 동작이 있을 수 있으므로, 전환은 다른 이벤트를 발생시킬 수도 있습니다.

Qt Quick Transition 유형은 애플리케이션이 한 상태에서 다른 상태로 변경될 때 어떤 일이 발생할지 정의하는 속성을 제공합니다. 전환에 대한 자세한 내용은 ‘상태 변경 시 전환’ 문서를 참조하십시오.

애니메이션

상태 간 전환 시, 부드러운 애니메이션을 사용하여 사용자의 전환 과정을 돕습니다. 시각적 캔버스의 갑작스럽고 예상치 못한 변화는 최적이 아닌 사용자 경험을 초래하므로 피해야 합니다.

목록 내의 요소가 선택되면, 색상 변경(중립색에서 강조색으로)을 애니메이션으로 표현할 수 있습니다. 목록에서 요소의 위치가 변경될 경우, 사용자의 시선이 변화를 따라갈 수 있도록 부드럽게 애니메이션 효과를 적용하여 이동시킬 수 있습니다.

이러한 유형의 애니메이션은 Qt Quick 에서 다양한 애니메이션 및 전환 유형을 통해 지원됩니다. 이러한 유형과 사용 방법에 대한 자세한 내용은 Qt Quick 의 ‘애니메이션 및 전환’ 문서를 참조하십시오.

속성 할당 애니메이션

애니메이션은 상태 및 상태 간 전환에만 국한되지 않습니다. 예를 들어, 애니메이션은 별개의 상태와 관련이 없는 다른 이벤트에 의해 트리거될 수도 있습니다.

변화의 원인과 관계없이 시각적 항목의 특정 속성 변경에 항상 애니메이션을 적용하는 것이 종종 유용합니다(예: 불투명도 효과). Qt Quick 는 클라이언트가 속성 변경에 대한 애니메이션 동작을 지정할 수 있도록 하는 Behavior 유형을 제공합니다. Behavior 유형은 QML 객체 속성 수정자의 한 예입니다.

Behavior 유형을 사용하여 기본 속성 변경 애니메이션을 제공하는 방법에 대한 자세한 내용은 기본 속성 애니메이션에 관한 문서를 참조하십시오.

기본 속성 애니메이션( Behavior 유형을 통해)을 상태 전환 애니메이션과 함께 사용할 경우, 때때로 정의되지 않은 동작이 발생할 수 있다는 점에 유의해야 합니다. 이 주제에 대한 자세한 내용은 ‘상태와 함께 Qt Quick 동작 사용하기’ 문서를 참조하십시오.

애니메이터

Animator 유형은 QML 객체를 우회하고 장면 그래프 내의 기본 요소에 직접 작용하는 특수한 유형의 애니메이션입니다. 이를 통해 Animator 기반 애니메이션은 (적용 가능한 경우) 장면 그래프의 렌더링 스레드에서 실행될 수 있으며, UI가 다른 이유로 차단된 상태에서도 애니메이션을 계속 진행할 수 있다는 장점이 있습니다.

Qt Quick 다음과 같은 Animator 유형을 제공합니다:

• XAnimator - Item 의 수평 위치를 애니메이션 처리합니다.
• YAnimator - ` Item`의 수직 위치를 애니메이션 처리합니다.
• ScaleAnimator - ` Item`의 스케일 계수를 애니메이션화합니다.
• RotationAnimator - ` Item`의 회전을 애니메이션 처리합니다.
• OpacityAnimator - ` Item`의 불투명도를 애니메이션으로 표현합니다.
• UniformAnimator - ShaderEffect 내의 유니폼에 애니메이션을 적용합니다.

애니메이션 스프라이트

애니메이션 스프라이트의 개념은 이 페이지의 다른 부분에서 사용되는 애니메이션의 개념과는 별개입니다. 애니메이션 이미지나 스프라이트를 생성하거나 사용하려면 스프라이트 애니메이션에 대한 문서를 참조하십시오.