애니메이션 추가하기

방법 애니메이션 추가하기

Qt Quick 디자이너는 다양한 목적에 적합한 다음 유형의 애니메이션 기법을 지원합니다:

• 2D용 일반적인 모션 디자인 기법
• 상태 간 애니메이션
• 데이터 기반 UI 로직 애니메이션

일반적인 모션 디자인 기법

다음 표에는 2D용 일반적인 모션 디자인 기법과 일반적인 사용 사례가 요약되어 있습니다.

타임라인 및 키프레임 기반 애니메이션

타임라인 애니메이션은 키프레임을 기반으로 합니다. Qt Quick 디자이너에서 키프레임은 특정 시점의 컴포넌트 속성 값을 결정합니다. 속성에 애니메이션을 적용하면 해당 값이 즉시 목표 값으로 변경되지 않고 중간 값을 통해 이동할 수 있습니다.

예를 들어 직사각형의 y 위치 속성을 애니메이션 시작 시 0으로 설정하고 애니메이션이 끝날 때 100으로 설정할 수 있습니다. 애니메이션이 실행되면 직사각형이 y축의 0에서 100까지 이동합니다. 키프레임은 기본적으로 선형 보간되므로 애니메이션 중간에서 y 속성의 값은 50입니다.

곡선 완화하기

선형적인 움직임은 원하지 않지만 직사각형이 애니메이션의 시작 부분에서 더 빠르게 움직이고 끝 부분에서 더 느리게 움직이기를 원하는 경우가 있습니다. 이 효과를 얻으려면 시작 프레임과 끝 프레임 사이에 많은 수의 키프레임을 삽입할 수 있습니다. 이러한 수고를 피하려면 키프레임 사이에 비선형 보간을 위한 완화 커브를 지정할 수 있습니다. 완화 커브를 사용하면 애니메이션이 끝날 때 컴포넌트가 속도를 높이거나, 느리게 하거나, 다시 튀어나오는 것처럼 보이게 할 수 있습니다.

애니메이션 커브

이징 커브는 대부분의 간단한 UI 애니메이션에 적합하지만, 복잡한 애니메이션에는 여러 키프레임이 필요하므로 키프레임의 값과 보간을 동시에 시각화해야 합니다. Curves 보기는 프로퍼티의 전체 애니메이션을 한 번에 시각화하고 키프레임의 유효 값과 키프레임 간의 보간을 함께 표시합니다. 또한 서로 다른 속성의 애니메이션을 동시에 표시할 수 있으므로 x 위치에 대한 애니메이션과 y 위치에 대한 애니메이션을 나란히 볼 수 있습니다.

상태 간 애니메이션

키프레임에 기반한 전환 타임라인을 사용하여 UI의 여러 상태 간에 전환을 사용하여 UI 상태를 탐색할 수 있습니다. 키프레임에 완화 커브를 적용할 수 있습니다.

상태 간 전환

UI는 다양한 시나리오에서 다양한 UI 구성을 표시하거나 사용자 상호 작용에 따라 모양을 수정할 수 있도록 설계되었습니다. 종종 UI가 내부적으로 한 상태에서 다른 상태로 변경되는 것처럼 보이도록 여러 가지 변경이 동시에 이루어집니다.

이는 복잡성에 관계없이 일반적으로 UI에 적용됩니다. 사진 뷰어는 처음에는 이미지를 그리드 형태로 표시하다가 이미지를 클릭하면 개별 이미지가 확장되고 인터페이스가 변경되어 이미지 편집을 위한 새로운 옵션이 표시되는 상세 상태로 변경될 수 있습니다. 다른 쪽 끝에서는 버튼을 누르면 색상과 위치가 수정되어 눌린 것처럼 보이는 눌린 상태로 변경될 수 있습니다.

모든 컴포넌트는 서로 다른 상태 간에 변경하여 관련 컴포넌트의 속성을 수정하는 일련의 변경 사항을 적용할 수 있습니다. 예를 들어 각 상태는 서로 다른 구성을 나타낼 수 있습니다:

• 일부 UI 컴포넌트를 표시하고 다른 컴포넌트를 숨깁니다.
• 사용자에게 사용 가능한 다양한 동작을 표시합니다.
• 애니메이션을 시작, 중지 또는 일시 중지합니다.
• 새 상태에서 필요한 일부 스크립트를 실행합니다.
• 특정 컴포넌트의 속성 값을 변경합니다.
• 다른 보기를 표시합니다.

상태 변경은 갑작스러운 동작을 도입하는데, 트랜지션을 사용하여 시각적으로 매력적으로 만들 수 있습니다. 트랜지션은 상태 변경으로 인한 속성 변경을 보간하는 애니메이션 유형입니다.

Transitions 보기에서 각 속성의 전환에 대한 시작 프레임, 종료 프레임 및 지속 시간을 설정할 수 있습니다. 또한 각 애니메이션에 대한 완화 곡선과 전체 전환의 최대 지속 시간을 설정할 수도 있습니다.

데이터 기반 UI 로직 애니메이션

다음 표에는 백엔드의 실제 데이터 또는 모의 데이터를 사용하여 UI 로직을 애니메이션하는 데 사용되는 기법이 요약되어 있습니다.

데이터 기반 타임라인 애니메이션

속성 값을 데이터 백엔드에 연결하여 타임라인 애니메이션을 구동할 수 있습니다. 데이터 모델, JavaScript 파일, 백엔드 서비스 등 다양한 소스에서 데이터를 가져올 수 있습니다.

이러한 데이터 소스를 타임라인의 현재 프레임에 연결하여 백엔드에서 현재 프레임 속성을 변경할 때 애니메이션을 만들 수 있습니다.

예를 들어 백엔드의 속도 값을 클러스터의 타코미터 다이얼에 연결할 수 있습니다. 백엔드에서 속도 값이 증가하거나 감소하면 바늘 애니메이션이 타임라인의 한쪽 끝에서 다른 쪽 끝으로 이동합니다.

프로그래밍 방식의 애니메이션

프로퍼티 애니메이션을 프로그래밍 방식으로 제어할 수 있습니다. 속성 애니메이션은 Animation 컴포넌트를 컴포넌트 인스턴스의 속성 값에 바인딩하여 시간에 따라 속성 값을 점진적으로 변경하는 방식으로 생성됩니다. 프로퍼티 애니메이션은 프로퍼티 값 변경 사이에 값을 보간하여 부드러운 움직임을 적용합니다. 타이밍 제어 기능을 제공하고 완화 곡선을 통해 다양한 보간을 가능하게 합니다.

개발자는 start(), stop(), resume(), pause(), restart(), complete() 함수를 사용하여 속성 애니메이션의 실행을 제어할 수 있습니다.

Components > Default Components > Animation 에서 제공되는 사전 설정 애니메이션 컴포넌트의 인스턴스를 생성하여 원하는 프로퍼티 유형과 동작에 따라 애니메이션을 만들 수 있습니다.

Animation 컴포넌트 및 해당 속성에 대한 자세한 내용은 속성 변경 애니메이션을 참조하세요.