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

모든 최신 사용자 인터페이스에서 상태 간 전환과 사용자 인터페이스 애니메이션은 매우 유용합니다. 이는 Qt Quick 의 최상위 개념입니다.

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

상태

특정 시각적 항목의 상태는 시각적 항목의 개별 구성 요소가 그 안에 표시되는 방법과 위치, 그리고 해당 상태와 관련된 모든 데이터를 설명하는 정보 집합입니다. 사용자 인터페이스의 대부분의 시각적 항목에는 각각 잘 정의된 속성을 가진 제한된 수의 상태가 있습니다.

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

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

Qt Quick 는 의미를 정의하고 동작이나 애니메이션을 트리거하는 데 사용할 수 있는 속성이 있는 State 유형을 제공합니다. 자세한 내용은 Qt Quick 상태에 대한 문서를 참조하세요.

전환

시각적 항목이 한 상태에서 다른 상태로 전환되면 해당 항목의 모양이 변경됩니다. 전환은 두 상태 사이의 "가장자리"입니다. 애플리케이션의 다른 부분에는 특정 상태가 입력되거나 종료될 때 트리거되는 동작이 있을 수 있으므로 다른 이벤트가 발생할 수 있습니다.

Qt Quick 는 애플리케이션이 한 상태에서 다른 상태로 변경될 때 발생하는 동작을 정의하는 속성이 있는 Transition 유형을 제공합니다. 트랜지션에 대한 자세한 내용은 상태 변경 중 트랜지션 문서를 참조하세요.

애니메이션

상태 간에 전환할 때 유동적인 애니메이션을 사용하여 전환 중에 사용자를 도울 수 있습니다. 시각적 캔버스가 갑작스럽고 예기치 않게 변경되면 사용자 환경이 최적화되지 않으므로 피해야 합니다.

목록의 요소가 선택되면 색상 변경(무채색에서 강조 표시됨)에 애니메이션을 적용할 수 있습니다. 목록에서 요소의 위치가 변경되면 사용자의 시선이 변경 사항을 추적할 수 있도록 유동적인 애니메이션 방식으로 이동할 수 있습니다.

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

애니메이션 속성 할당

애니메이션은 상태 및 상태 간 전환에만 관련된 것이 아닙니다. 예를 들어 애니메이션은 별개의 상태와 관련이 없는 다른 이벤트에 의해 트리거될 수 있습니다.

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

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

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

애니메이터

Animator 유형은 QML 객체를 우회하고 씬 그래프의 프리미티브에서 직접 작동하는 특수한 유형의 애니메이션입니다. 애니메이터 기반 애니메이션은 씬 그래프의 렌더링 스레드(해당되는 경우)에서 실행될 수 있으며 UI가 차단된 상태에서도 애니메이션을 계속할 수 있다는 장점이 있습니다.

Qt Quick 는 다음과 같은 애니메이터 유형을 제공합니다:

• XAnimator - Item 의 가로 위치를 애니메이션합니다.
• YAnimator - Item 의 수직 위치를 애니메이션합니다.
• ScaleAnimator - Item 의 배율을 애니메이션합니다.
• RotationAnimator - Item 의 회전을 애니메이션합니다.
• OpacityAnimator - Item 의 불투명도를 애니메이션합니다.
• UniformAnimator - ShaderEffect 의 유니폼을 애니메이션합니다.

애니메이션 스프라이트

애니메이션 스프라이트의 개념은 이 페이지의 다른 곳에서 사용되는 애니메이션의 개념과는 별개입니다. 애니메이션 이미지 또는 스프라이트를 만들거나 사용하려면 스프라이트 애니메이션에 대한 문서를 참조하세요.