다음을 통해 공유

컴퍼지션 애니메이션

  • 아티클

Windows.UI.Composition API를 사용하면 통합된 API 계층에서 작성자 개체를 만들고, 변환하고, 조작할 수 있으며 작성자 개체에 애니메이션 효과를 줄 수 있습니다. 컴퍼지션 애니메이션은 애플리케이션 UI에서 애니메이션을 강력하고 효율적으로 실행하는 방법입니다. 처음부터 UI 스레드와 별개로 60FPS에서 애니메이션이 실행되도록 설계되어, 애니메이션을 구동하기 위해 시간뿐만 아니라 입력 및 기타 속성도 사용하여 놀라운 환경을 유연하게 빌드할 수 있습니다.

Windows에서의 동작

움직임 디자인을 영화처럼 생각할 수 있습니다. 매끄러운 전환은 스토리에 대한 집중도를 높이고 생동감 있는 경험을 선사합니다. 이런 느낌을 디자인에 구현하여, 영화를 보듯 편안하게 여러 작업을 이어갈 수 있도록 했습니다. 동작은 사용자 인터페이스 및 사용자 환경 간의 차별화 요소인 경우가 많습니다.

Windows UI 플랫폼의 기본 구성 요소인 CompositionAnimations는 애플리케이션의 UI에서 동작 환경을 만드는 강력하고 효율적인 방법을 제공합니다. 애니메이션 엔진은 동작이 UI 스레드와 독립적으로 60FPS에서 실행되도록 처음부터 설계되었습니다. 이러한 애니메이션은 시간, 입력, 기타 속성에 따라 혁신적인 동작 환경을 빌드할 수 있는 유연성을 제공하도록 설계되었습니다.

동작의 예

다음은 앱 내에서 이루어지는 동작의 예입니다.

여기에 나오는 앱은 항목 이미지가 “계속해서” 다음 페이지의 머리글이 되도록 연결된 애니메이션을 사용하여 항목 이미지에 애니메이션 효과를 줍니다. 이 효과는 전환 시 사용자 컨텍스트를 유지하는 데 도움이 됩니다.

연결된 애니메이션의 예

여기서는 깊이감, 원근감, 운동성을 주기 위해 UI가 스크롤하거나 이동할 때 시각적 시차 효과를 통해 여러 개체를 서로 다른 속도로 움직입니다.

목록 및 배경 이미지를 사용한 시차의 예

CompositionAnimations를 사용하여 동작 만들기

개발자는 UI에서 동작을 생성하기 위해 XAML 또는 시각적 계층의 애니메이션에 액세스할 수 있습니다. 시각적 계층의 애니메이션은 개발자에게 다음과 같은 일련의 이점을 제공합니다.

  • 성능 - 기존의 UI 스레드 바운드 애니메이션 대신 Windows UI 플랫폼의 애니메이션이 60FPS의 독립 스레드에서 작동하여 부드러운 동작 환경을 지원합니다.
  • 템플릿 모델 - Windows UI 계층의 애니메이션은 템플릿입니다. 즉, 여러 개체에서 단일 애니메이션을 사용하고 이전 사용을 방해하지 않고 속성 또는 매개 변수를 조정할 수 있습니다.
  • 사용자 지정 - Windows UI 계층을 사용하면 멋진 UI를 쉽게 만들 수 있을 뿐만 아니라 다양한 애니메이션 형식을 사용하여 사용자 지정 그라데이션을 사용하여 새롭고 놀라운 환경을 만들 수 있습니다.

Windows UI 계층에서 환경을 만드는 개발자는 다양한 애니메이션 개념에 액세스하여 디자인을 실현할 수 있습니다. 이러한 개념을 사용하여 CompositionObject의 속성 또는 하위 채널 구성 요소(해당하는 경우)에 애니메이션을 적용할 수 있습니다.

참고 항목

CompositionObject의 모든 속성에 애니메이션을 적용할 수 있는 것은 아닙니다. 속성에 애니메이션을 적용할 수 있는지 확인하려면 개별 CompositionObject의 설명서를 참조하세요.

참고 항목

용어 하위 채널은 속성의 구성 요소 형식을 말하는 것입니다. 예를 들어 Vector3 Offset 속성의 X 또는 XY 하위 채널입니다.

애니메이션 개념 설명
KeyFrameAnimations를 이용한 시간 기반 동작 KeyFrameAnimations는 일정 기간 동안 동작 환경 전체를 직접 제어하는 데 사용됩니다. 동작의 시작, 끝, 보간, 기간을 기존 키 프레임 방식으로 설명하는 개발자.
ExpressionAnimations를 통해 상대 동작 ExpressionAnimations는 한 개체의 속성 동작을 다른 개체의 속성에 상대적으로 구동하는 방법을 설명하는 데 사용됩니다. 개발자는 참조 기반 관계를 정의하는 수학 방정식을 정의합니다.
ImplicitAnimations 이러한 애니메이션은 트리거 기반이며 핵심 앱 논리와 별도로 정의됩니다. ImplicitAnimations는 직접 속성 변경에 대한 응답으로 애니메이션이 발생하는 방법과 시기를 설명하는 데 사용됩니다.
입력 애니메이션을 통해 입력 기반 동작 입력 애니메이션은 개발자가 터치 또는 기타 입력 형식을 통해 조작 기반 동작을 설명할 수 있도록 하는 일련의 시나리오를 다룹니다. 이러한 애니메이션은 활성 사용자 입력 또는 제스처를 기반으로 합니다.
NaturalMotionAnimations를 이용한 물리학 기반 동작 NaturalMotionAnimations는 실제 강제 구동 동작을 기반으로 하는 자연적이고 친숙한 동작 환경을 설명하는 데 사용됩니다. 개발자는 시간을 정의하는 대신 동작의 특징을 정의합니다(예: Springs의 경우 비동기 비율).