언어: HTML | XAML

UI 애니메이션(XAML)

Applies to Windows and Windows Phone

이 항목에서 설명하는 애니메이션 라이브러리를 사용하면 Windows 모양과 느낌을 앱에 통합할 수 있습니다. 이 항목에서는 애니메이션 및 각 애니메이션이 사용되는 일반적인 시나리오의 예를 간략하게 소개합니다.

XAML용 Windows 런타임 컨트롤에는 일부 유형의 애니메이션이 애니메이션 라이브러리에서 가져온 기본 제공 동작으로 포함되어 있습니다. ListView 컨트롤, FlipView 컨트롤, Flyout 컨트롤, AppBar 컨트롤 등의 컨트롤은 모두 이러한 애니메이션을 기본 제공 동작으로 사용합니다. 앱에서 이러한 컨트롤을 사용하면 직접 프로그래밍하지 않고도 애니메이션 효과를 준 모양과 느낌을 얻을 수 있습니다.

Windows 런타임 애니메이션 라이브러리의 애니메이션을 사용할 경우 다음과 같은 이점이 있습니다.

  • 동작이 애니메이션 원칙에 할당됩니다.
  • UI 상태를 빠르고 유연하게 전환하여 사용자에게 혼동을 주지 않고 정보를 알려 줍니다.
  • 앱 내에서 사용자에게 전환을 나타내는 시각적 동작을 제공합니다.

예를 들어 사용자가 목록에 항목을 추가할 경우 새 항목을 목록에 바로 표시하는 대신 새 항목 위치에 애니메이션 효과를 주고, 목록의 다른 항목은 짧은 기간 동안 새 위치에 애니메이션 효과를 주어 추가된 항목을 위한 공간을 확보합니다. 이때 전환 동작은 컨트롤 조작이 사용자에게 보다 명확하게 나타나도록 합니다.

애니메이션 라이브러리는 모든 가능 시나리오에 대해 애니메이션 효과를 제공하지는 않습니다. XAML에서 사용자 지정 애니메이션을 만들고자 하는 경우가 있을 수 있습니다. 자세한 내용은 스토리보드 애니메이션을 참조하세요.

이 항목에서 다루는 API를 사용하는 예제 코드는 XAML 애니메이션 샘플, XAML 개성 애니메이션 샘플 또는 빠른 시작: 라이브러리 애니메이션을 사용하여 UI 애니메이션을 참조하세요.

애니메이션 유형

Windows 런타임 애니메이션 시스템 및 애니메이션 라이브러리는 컨트롤 및 UI의 다른 부분에 애니메이션 동작을 적용하는 더 큰 목적으로 사용할 수 있습니다. 애니메이션 유형에는 여러 가지가 있습니다.

  • 테마 전환은 미리 정의된 Windows 런타임 XAML UI 유형의 컨트롤 또는 요소를 포함하여 UI에서 일부 조건이 변경될 경우 자동으로 적용됩니다. 이러한 애니메이션은 Windows 모양과 느낌을 지원하고 모든 앱이 조작 모드 변경 시 특정 UI 시나리오에 대해 수행하는 작업을 정의하므로 테마 전환이라고 합니다. 테마 전환은 애니메이션 라이브러리의 일부입니다.
  • 테마 애니메이션은 미리 정의된 Windows 런타임 XAML UI 유형의 하나 이상의 속성에 대한 애니메이션입니다. 테마 애니메이션은 하나의 특정 요소를 대상으로 하고 컨트롤 내에서 특정 시각적 상태로 존재하는 반면, 테마 전환은 시각적 상태 외부에 있는 컨트롤의 속성에 할당되고 해당 상태 간 전환에 영향을 주므로 테마 애니메이션은 테마 전환과 다릅니다. 많은 Windows 런타임 XAML 컨트롤은 애니메이션이 시각적 상태에 따라 트리거되는, 컨트롤 템플릿의 일부인 스토리보드 내에 테마 애니메이션을 포함합니다. 템플릿을 수정하지 않는 한 해당 기본 제공 테마 애니메이션을 UI의 컨트롤에 사용할 수 있습니다. 그러나 템플릿을 대체하는 경우 기본 제공 컨트롤 테마 애니메이션도 제거됩니다. 해당 애니메이션을 복구하려면 컨트롤의 시각적 상태 집합 내에서 테마 애니메이션을 포함하는 스토리보드를 정의해야 합니다. 또한 시각적 상태 내에 없는 스토리보드에서 테마 애니메이션을 실행하고 Begin 메서드를 사용하여 시작할 수도 있지만 일반적이지 않습니다. 테마 애니메이션은 애니메이션 라이브러리의 일부입니다.
  • 시각적 전환은 컨트롤이 정의된 시각적 상태 중 하나에서 다른 상태로 전환될 때 적용됩니다. 이러한 애니메이션은 직접 작성하는 사용자 지정 애니메이션으로, 일반적으로 컨트롤에 대해 작성한 사용자 지정 템플릿 및 해당 템플릿 내의 시각적 상태 정의와 연결되어 있습니다. 이 애니메이션은 상태 사이의 시간 동안에만 실행되며 이 시간은 일반적으로 최대 몇 초에 지나지 않을 정도로 짧습니다. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션의 "VisualTransition" 섹션을 참조하세요.
  • 스토리보드 애니메이션은 특히 앱 코드 또는 포함한 컨트롤 등의 구성 요소와 함께 제공된 코드로 시작될 때 적용됩니다. 스토리보드 애니메이션은 시간에 따라 Windows 런타임 종속성 속성의 값을 변경할 수 있습니다. 스토리보드 애니메이션은 UI 시나리오로 제한되지 않으며, 실제로 해당 용어에 익숙한 경우 이 애니메이션을 상태 시스템 기술로 간주하는 것이 유용할 수 있습니다. 스토리보드 애니메이션은 시각적 상태 사이의 전환 시간으로 제한되지 않으며 컨트롤 상태 변경에 관계없이 언제든지 실행될 수 있고 연속적으로 실행할 수도 있습니다. 자세한 내용은 스토리보드 애니메이션을 참조하세요. 종속성 속성 및 이 속성이 있는 위치에 대한 자세한 내용은 종속성 속성 개요를 참조하세요.

라이브러리에서 사용 가능한 애니메이션

애니메이션 라이브러리에는 다음 애니메이션이 제공됩니다. 애니메이션의 주 사용 시나리오, 정의 방법에 대해 자세히 알아보고 애니메이션 예제를 보려면 애니메이션의 이름을 클릭하세요.

참고  JavaScript 애니메이션 라이브러리를 통해 제공되는 expand, peek, badge, search list 애니메이션은 XAML에서 사용할 수 없습니다.

Windows 8 동작

Windows 8에서 애니메이션 라이브러리에 있는 XAML 테마 전환 및 기타 다양한 자동 애니메이션 동작은 사용자가 "불필요한 애니메이션"을 끌 수 있는 특정 Microsoft Windows 접근성 설정을 따르지 않았습니다.

Windows 8.1부터 테마 전환, 테마 애니메이션 및 시각적 전환은 모두 접근성필요 없는 애니메이션 모두 끄기(사용 가능한 경우) 설정을 따릅니다. 애니메이션이 실행되지 않고 컨트롤 상태가 변경되거나 즉시 시각적 변경이 발생합니다.

앱 코드를 Windows 8에서 Windows 8.1로 마이그레이션할 경우 필요 없는 애니메이션 모두 끄기(사용 가능한 경우) 설정을 사용할 때의 애니메이션 동작을 테스트할 수 있습니다. 이러한 애니메이션 중 일부는 스토리보드에 의해 제어되고 경우에 따라 시각적 전환 또는 테마 애니메이션이 완료된 후에 시작할 사용자 지정 애니메이션을 연결해 놓기도 하므로 필요 없는 애니메이션 모두 끄기(사용 가능한 경우) 설정은 애니메이션의 타이밍에 영향을 미칠 수도 있습니다. 또한 특정 애니메이션을 스토리보드 애니메이션이 아닌 시각적 상태의 VisualTransition으로 구현한 경우 필요 없는 애니메이션 모두 끄기(사용 가능한 경우) 설정에 의해 이 애니메이션이 사용되지 않는 일이 없도록 실제 사용자 지정 애니메이션으로 전환할 수도 있습니다.

Windows 8용으로 컴파일되었지만 Windows 8.1에서 실행 중인 앱은 테마 애니메이션 및 시각적 전환을 위해 계속해서 Windows 8 동작을 사용합니다. 그러나 앱을 다시 컴파일하지 않는 경우에도 테마 전환은 Windows 8.1의 설정에 의해 사용하지 않도록 설정됩니다.

콘텐츠 전환 및 시작 전환

콘텐츠 전환 애니메이션(ContentThemeTransition)은 하나의 콘텐츠 또는 콘텐츠 집합을 현재 보기의 안이나 밖으로 이동하는 데 사용합니다. 예를 들어 콘텐츠 전환 애니메이션은 처음 페이지가 로드되었을 때나 페이지에서 한 섹션의 콘텐츠가 변경될 때 표시할 준비가 되지 않은 콘텐츠를 표시합니다.

XAML 애니메이션 라이브러리에는 페이지가 로드될 때 전체 페이지에 적용되는 애니메이션 개념은 없지만, 콘텐츠를 포함하는 페이지가 처음 로드되고 콘텐츠의 해당 부분이 렌더링될 때 콘텐츠에 적용할 수 있는 별도의 전환(EntranceThemeTransition)은 있습니다. 따라서 처음 표시되는 콘텐츠는 콘텐츠가 변경된 경우와 다른 피드백을 제공할 수 있습니다.

자세한 내용은 콘텐츠 및 시작 전환 애니메이션을 참조하세요.

페이드 인/페이드 아웃 및 크로스페이드

페이드 인/페이드 아웃 애니메이션은 임시 UI 또는 컨트롤을 표시하거나 숨기는 데 사용합니다. XAML에서 이러한 애니메이션은 FadeInThemeAnimationFadeOutThemeAnimation으로 표현됩니다. 하나의 예는 사용자 조작으로 새 컨트롤이 표시될 수 있는 앱 바에 있습니다. 또 다른 예는 일정 시간 동안 사용자 입력이 감지되지 않을 경우 흐려지는 이동 표시기 또는 임시 스크롤 막대입니다. 또한 콘텐츠가 동적으로 로드되어 앱이 자리 표시자 항목에서 최종 항목으로 전환할 때도 페이드 인 애니메이션을 사용해야 합니다.

크로스페이드 애니메이션은 항목의 상태가 변경될 때, 예를 들면 앱이 현재 보기의 콘텐츠를 새로 고칠 때 전환을 부드럽게 하기 위해 사용합니다. XAML 애니메이션 라이브러리는 전용 크로스페이드 애니메이션(crossFade과 동일한 애니메이션 없음)을 제공하지 않지만 타이밍이 겹친 FadeInThemeAnimationFadeOutThemeAnimation을 사용하여 동일한 결과를 얻을 수 있습니다.

자세한 내용은 페이드 애니메이션을 참조하세요.

포인터 위로/아래로

PointerUpThemeAnimationPointerDownThemeAnimation 애니메이션은 성공한 타일 탭 또는 클릭에 대한 사용자 피드백을 제공하는 데 사용합니다. 예를 들어 사용자가 타일의 아래쪽을 클릭하거나 탭하면 포인터 아래로 애니메이션이 재생됩니다. 클릭 또는 탭이 해제되면 포인터 위로 애니메이션이 재생됩니다.

자세한 내용은 포인터 동작 애니메이션을 참조하세요.

위치 변경

위치 변경 애니메이션(RepositionThemeAnimation 또는 RepositionThemeTransition)은 요소를 새 위치로 이동하는 데 사용합니다. 예를 들어 헤더 항목 컨트롤에서 헤더를 이동할 때 위치 변경 애니메이션이 사용됩니다.

자세한 내용은 위치 변경 애니메이션을 참조하세요.

팝업 표시/숨기기

PopInThemeAnimationPopOutThemeAnimation은 현재 보기의 맨 위에 Popup이나 유사한 컨텍스트 UI를 표시하거나 숨기는 데 사용합니다. PopupThemeTransition은 팝업을 빨리 해제하려는 경우에 유용한 피드백인 테마 전환입니다.

자세한 내용은 팝업 UI 애니메이션을 참조하세요.

가장자리 UI 표시/숨기기

EdgeUIThemeTransition 애니메이션은 가장자리 기반의 작은 UI를 보기의 안이나 밖으로 미는 데 사용합니다. 예를 들어 화면의 맨 위 또는 맨 아래에 사용자 지정 앱 바를 표시하거나 화면의 맨 위에 오류 및 경고에 대한 UI 화면을 표시할 때 이러한 애니메이션을 사용합니다.

PaneThemeTransition 애니메이션은 창이나 패널을 표시하거나 숨기는 데 사용합니다. 이 애니메이션은 사용자 지정 키보드나 작업 창과 같이 가장자리 기반의 큰 UI에 적합합니다.

자세한 내용은 가장자리 기반 UI 애니메이션을 참조하세요.

목록 항목 변경

AddDeleteThemeTransition 애니메이션은 기존 목록에서 항목을 추가하거나 삭제할 때 애니메이션 동작을 추가하는 데 사용합니다. 추가의 경우 전환은 먼저 목록에서 기존 항목의 위치를 변경하여 새 항목을 위한 공간을 확보한 다음 새 항목을 추가합니다. 삭제의 경우 전환은 목록에서 항목을 제거하고, 필요한 경우 삭제한 항목이 제거된 다음 나머지 목록 항목의 위치를 변경합니다.

목록에서 항목의 위치가 변경되는 경우 별도의 ReorderThemeTransition을 적용할 수도 있습니다. 이 전환은 관련된 삭제/추가 애니메이션을 사용하여 항목을 삭제하고 새 위치에 추가하는 경우와 다르게 애니메이션됩니다.

자세한 내용은 목록 항목 변경 애니메이션을 참조하세요.

끌기/놓기

끌기 애니메이션(DragItemThemeAnimation, DragOverThemeAnimation)과 놓기 애니메이션(DropTargetItemThemeAnimation)은 사용자가 항목을 끌거나 놓을 때 시각적 피드백을 제공하는 데 사용합니다.

활성화된 애니메이션은 사용자에게 놓은 항목 주위로 목록을 다시 정렬할 수 있음을 보여줍니다. 이는 항목을 현재 위치에 놓을 경우 목록의 어느 곳에 배치될지 사용자가 아는 데 도움이 됩니다. 이 애니메이션은 끌고 있는 항목을 목록의 다른 두 항목 사이에 놓을 수 있고 해당 두 항목이 사라지게 됨을 시각적 피드백으로 제공합니다.

자세한 내용은 끌어서 놓기 시퀀스 애니메이션을 참조하세요.

살짝 밀기 제스처

SwipeHintThemeAnimation 애니메이션은 타일이 살짝 밀기 조작을 지원함을 표시하는 데 사용합니다. 사용자는 아래쪽으로 살짝 밀어 타일을 선택할 수 있습니다. 사용자가 타일을 살짝 밀 수 있다는 것을 모르는 상태로 타일에 대해 길게 누르기 제스처를 취할 경우 살짝 밀기 힌트 애니메이션이 재생되어 사용자가 살짝 밀기를 통해 타일을 조작해야 한다는 것을 알려 줍니다.

SwipeBackThemeAnimation 애니메이션은 타일이 선택되었음으로 표시하고 타일을 나머지 위치로 되돌려 놓는 데 사용합니다.

자세한 내용은 살짝 밀기 제스처 애니메이션을 참조하세요.

사용자 지정 컨트롤에 애니메이션 사용

다음 표에는 이러한 Windows 런타임 컨트롤의 사용자 지정 버전을 만들 때 사용해야 하는 애니메이션에 대한 권장 사항이 요약되어 있습니다.

UI 유형권장 애니메이션
대화 상자 FadeInThemeAnimationFadeOutThemeAnimation
플라이아웃 PopInThemeAnimationPopOutThemeAnimation
도구 설명 FadeInThemeAnimationFadeOutThemeAnimation
상황에 맞는 메뉴 PopInThemeAnimationPopOutThemeAnimation
명령 모음 EdgeUIThemeTransition
작업 창 또는 가장자리 기반 패널 PaneThemeTransition
모든 UI 컨테이너의 콘텐츠 ContentThemeTransition
컨트롤 대상 또는 다른 어떤 애니메이션도 적용되지 않는 경우 FadeInThemeAnimationFadeOutThemeAnimation

 

관련 항목

C# 또는 Visual Basic으로 작성한 Windows 런타임 앱용 로드맵
XAML 개성 애니메이션 샘플
HTML 애니메이션 라이브러리 샘플
Windows.UI.Xaml.Media.Animation 네임스페이스

 

 

표시:
© 2014 Microsoft