애니메이션 추가하기

방법: 애니메이션 추가

Qt Quick Designer는 다양한 용도에 적합한 다음과 같은 애니메이션 기법을 지원합니다:

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

일반적인 모션 디자인 기법

다음 표는 2D에서 일반적으로 사용되는 모션 디자인 기법과 그 대표적인 사용 사례를 요약한 것입니다.

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

타임라인 애니메이션은 키프레임을 기반으로 합니다. Qt Quick Designer에서 키프레임은 특정 시점의 컴포넌트 속성 값을 결정합니다. 속성에 애니메이션을 적용하면 값이 목표 값으로 즉시 변경되는 대신 중간 값을 거쳐 변화하게 됩니다.

예를 들어, 사각형의 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 컴포넌트 및 해당 속성에 대한 자세한 내용은 ‘속성 변경 애니메이션 적용’을 참조하십시오.