XAML의 애니메이션Animations in XAML

애니메이션은 이동 및 대화형 작업을 추가 하 여 앱을 향상 시킬 수 있습니다.Animations can enhance your app by adding movement and interactivity. Windows 런타임 애니메이션 라이브러리의 애니메이션을 사용 하 여 Windows 모양과 느낌을 앱에 통합할 수 있습니다.By using the animations from the Windows Runtime animation library, you can integrate the Windows look and feel into your app. 이 항목에서는 각각을 사용 하는 일반적인 시나리오의 애니메이션과 예제에 대해 간략하게 설명 합니다.This topic provides a summary of the animations and examples of typical scenarios where each is used.

XAML에 대 한 Windows 런타임 컨트롤은 애니메이션 라이브러리에서 제공 되는 기본 제공 동작으로 특정 형식의 애니메이션을 포함 합니다.The Windows Runtime controls for XAML include certain types of animations as built-in behaviors that come from an animation library. 앱에서 이러한 컨트롤을 사용 하 여 직접 프로그래밍 하지 않고도 애니메이션 모양의 모양과 느낌을 얻을 수 있습니다.By using these controls in your app, you can get the animated look and feel without having to program it yourself.

Windows 런타임 애니메이션 라이브러리의 애니메이션은 다음과 같은 이점을 제공 합니다.Animations from the Windows Runtime animation library provide these benefits:

  • 애니메이션에 대 한 지침 에 맞는 동작Motions that align to the Guidelines for animations
  • 사용자에 게 알려 주지만 방해 하지 않는 UI 상태 간의 빠른 유체 전환Fast, fluid transitions between UI states that inform but do not distract the user
  • 앱 내에서 사용자로의 전환을 나타내는 시각적 동작Visual behavior that indicates transitions within an app to the user

예를 들어 사용자가 목록에 항목을 추가 하는 경우 새 항목이 목록에 즉시 표시 되는 대신 새 항목이 현재 위치로 표시 됩니다.For example, when the user adds an item to a list, instead of the new item instantly appearing in the list, the new item animates into place. 목록의 다른 항목은 짧은 시간 동안 새 위치에 애니메이션을 적용 하 여 추가 된 항목을 위한 공간을 만듭니다.The other items in the list animate to their new positions over a short period of time, making room for the added item. 여기서 전환 동작은 사용자에 대 한 컨트롤 상호 작용을 보다 명확 하 게 합니다.The transition behavior here makes the control interaction more apparent to the user.

Windows 10, 버전 1607에서는 탐색 하는 동안 보기 사이에 애니메이션 효과를 주는 요소가 표시 되는 애니메이션을 구현 하기 위한 새로운 ConnectedAnimationService API를 도입 했습니다.Windows 10, version 1607 introduces a new ConnectedAnimationService API for implementing animations where an element appears to animate between views during a navigation. 이 API는 다른 애니메이션 라이브러리 API의 사용 패턴과 다릅니다.This API has a different usage pattern from the other animation library API's. ConnectedAnimationService 사용에 대해서는 참조 페이지에서 설명 합니다.Usage of ConnectedAnimationService is covered in the reference page.

애니메이션 라이브러리는 가능한 모든 시나리오에 대 한 애니메이션을 제공 하지 않습니다.The animation library does not provide animations for every possible scenario. XAML에서 사용자 지정 애니메이션을 만들려는 경우가 있습니다.There are cases where you might wish to create a custom animation in XAML. 자세한 내용은 Storyboarded 애니메이션(영문)을 참조 하세요.For more info, see Storyboarded animations.

또한 ScrollViewer의 스크롤 위치에 따라 항목에 애니메이션을 적용 하는 것과 같은 특정 고급 시나리오의 경우 개발자는 비주얼 계층 상호 운용을 사용 하 여 사용자 지정 애니메이션을 구현할 수 있습니다.Additionally, for certain advanced scenarios like animating an item based on scroll position of a ScrollViewer, developers may wish to use Visual Layer interoperation to implement custom animations. 자세한 내용은 시각적 계층 을 참조 하세요.See Visual Layer for more information.

애니메이션 형식Types of animations

Windows 런타임 애니메이션 시스템 및 애니메이션 라이브러리는 컨트롤과 UI의 다른 부분에 애니메이션 효과를 주는 데 더 큰 목표를 제공 합니다.The Windows Runtime animation system and the animation library serve the larger goal of enabling controls and other parts of UI to have an animated behavior. 애니메이션에는 여러 가지 다른 형식이 있습니다.There are several distinct types of animations.

  • 미리 정의 된 Windows 런타임 XAML UI 형식의 컨트롤이 나 요소를 포함 하 여 UI의 특정 조건이 변경 되 면 테마 전환이 자동으로 적용 됩니다.Theme transitions are applied automatically when certain conditions change in the UI, involving controls or elements from the predefined Windows Runtime XAML UI types. 애니메이션은 Windows 모양과 느낌을 지원 하 고 한 상호 작용 모드에서 다른 상호 작용 모드로 변경 될 때 특정 UI 시나리오에 대해 모든 앱이 수행 하는 작업을 정의 하므로 테마 전환 이라고 합니다.These are termed theme transitions because the animations support the Windows look and feel, and define what all apps do for particular UI scenarios when they change from one interaction mode to another. 테마 전환은 애니메이션 라이브러리의 일부입니다.The theme transitions are part of the animation library.
  • 테마 애니메이션 은 미리 정의 된 WINDOWS 런타임 XAML UI 형식의 속성 하나 이상에 대 한 애니메이션입니다.Theme animations are animations to one or more properties of predefined Windows Runtime XAML UI types. 테마 애니메이션은 특정 요소 하나를 대상으로 하 고, 컨트롤 내의 특정 시각적 상태에 존재 하는 반면, 테마 전환은 시각적 상태 외부에 존재 하는 컨트롤의 속성에 할당 되 고 해당 상태 간의 전환에 영향을 주므로 테마 전환과는 다릅니다.Theme animations differ from theme transitions because theme animations target one specific element and exist in specific visual states within a control, whereas the theme transitions are assigned to properties of the control that exist outside of the visual states and influence the transitions between those states. 대부분의 Windows 런타임 XAML 컨트롤에는 시각적 상태에 의해 트리거되는 애니메이션을 포함 하는 컨트롤 템플릿의 일부인 storyboard 내 테마 애니메이션이 포함 되어 있습니다.Many of the Windows Runtime XAML controls include theme animations within storyboards that are part of their control template, with the animations triggered by visual states. 템플릿을 수정 하지 않는 한 UI의 컨트롤에 사용할 수 있는 기본 제공 테마 애니메이션을 사용할 수 있습니다.So long as you're not modifying the templates, you'll have those built-in theme animations available for the controls in your UI. 그러나 템플릿을 바꾸는 경우 기본 제공 컨트롤 테마 애니메이션도 제거 됩니다.However, if you do replace templates, then you'll be removing the built-in control theme animations too. 이를 되돌리려면 컨트롤의 시각적 상태 집합 내에서 테마 애니메이션을 포함 하는 스토리 보드를 정의 해야 합니다.To get them back, you must define a storyboard that includes theme animations within the control's set of visual states. 시각적 상태에 있지 않은 storyboard에서 테마 애니메이션을 실행 하 여 Begin 메서드로 시작할 수도 있지만 일반적이 지 않습니다.You can also run theme animations from storyboards that aren't within visual states and start them with the Begin method, but that's less common. 테마 애니메이션은 애니메이션 라이브러리의 일부입니다.Theme animations are part of the animation library.
  • 시각적 전환은 컨트롤이 정의 된 시각적 상태 중 하나에서 다른 상태로 전환 될 때 적용 됩니다.Visual transitions are applied when a control transitions from one of its defined visual states to another state. 이러한 사용자 지정 애니메이션은 사용자가 작성 하는 사용자 지정 애니메이션 이며 일반적으로 컨트롤에 대해 작성 하는 사용자 지정 템플릿과 해당 템플릿 내의 시각적 상태 정의와 관련이 있습니다.These are custom animations that you write, and are typically related to the custom template you write for a control and the visual state definitions within that template. 애니메이션은 상태 간 시간 동안만 실행 되며 일반적으로 짧은 시간 (가장 짧은 시간)입니다.The animation only runs during the time between states, and that's typically a short amount of time, a few seconds at most. 자세한 내용은 Storyboarded 애니메이션 (시각적 상태)의 "Visualtransition" 섹션을 참조 하세요.For more info, see "VisualTransition" section of Storyboarded animations for visual states.
  • Storyboarded 애니메이션 은 시간이 지남에 따라 Windows 런타임 종속성 속성의 값에 애니메이션 효과를 적용 합니다.Storyboarded animations animate the value of a Windows Runtime dependency property over time. 스토리 보드를 시각적 전환의 일부로 정의 하거나 응용 프로그램에서 런타임에 트리거할 수 있습니다.Storyboards can be defined as part of a visual transition, or triggered at runtime by the application. 자세한 내용은 Storyboarded 애니메이션(영문)을 참조 하세요.For more info, see Storyboarded animations. 종속성 속성 및 존재 하는 위치에 대 한 자세한 내용은 종속성 속성 개요를 참조 하세요.For more info about dependency properties and where they exist, see Dependency properties overview.
  • ConnectedAnimationService API에서 제공 하는 연결 된 애니메이션 을 통해 개발자는 탐색 하는 동안 요소가 보기 사이에 애니메이션 효과를 주는 효과를 쉽게 만들 수 있습니다.Connected animations provided by the new ConnectedAnimationService API allow developers to easily create an effect where an element appears to animate between views during a navigation. 이 API는 Windows 10 버전 1607부터 사용할 수 있습니다.This API is available starting in Windows 10, version 1607. 자세한 내용은 ConnectedAnimationService 를 참조 하세요.See ConnectedAnimationService for more information.

라이브러리에서 사용할 수 있는 애니메이션Animations available in the library

애니메이션 라이브러리에서 제공 되는 애니메이션은 다음과 같습니다.The following animations are supplied in the animation library. 애니메이션의 이름을 클릭 하 여 기본 사용 시나리오, 정의 하는 방법 및 애니메이션 예제를 확인 합니다.Click on the name of an animation to learn more about their main usage scenarios, how to define them, and to see an example of the animation.

페이지 전환Page transition

페이지 전환을 사용 하 여 앱 내에서 탐색에 애니메이션 효과를 주는 경우Use page transitions to animate navigation within an app. 거의 모든 앱에서 일종의 탐색을 사용 하므로 페이지 전환 애니메이션은 앱에서 사용 하는 가장 일반적인 유형의 테마 애니메이션입니다.Since almost all apps use some kind of navigation, page transition animations are the most common type of theme animation used by apps. 페이지 전환 Api에 대 한 자세한 내용은 NavigationThemeTransition 를 참조 하세요.See NavigationThemeTransition for more information about the page transition APIs.

콘텐츠 전환 및 입구 전환Content transition and entrance transition

내용 전환 애니메이션 (ContentThemeTransition)을 사용 하 여 조각 또는 콘텐츠 집합을 현재 뷰에서 이동 하거나 외부로 이동 합니다.Use content transition animations (ContentThemeTransition) to move a piece or a set of content into or out of the current view. 예를 들어 콘텐츠 전환 애니메이션은 페이지가 처음 로드 될 때 또는 페이지의 섹션에서 콘텐츠가 변경 될 때 표시할 준비가 되지 않은 콘텐츠를 표시 합니다.For example, the content transition animations show content that was not ready to display when the page was first loaded, or when the content changes on a section of a page.

EntranceThemeTransition 는 페이지 또는 많은 UI 섹션이 처음 로드 될 때 콘텐츠에 적용할 수 있는 동작을 나타냅니다.EntranceThemeTransition represents a motion that can apply to content when a page or large section of UI is first loaded. 따라서 콘텐츠의 첫 번째 형태는 내용에 대 한 변경 내용에 비해 다른 피드백을 제공할 수 있습니다.Thus the first appearance of content can offer different feedback than a change to content does. EntranceThemeTransition 는 기본 매개 변수를 사용 하는 NavigationThemeTransition 와 동일 하지만 프레임외부에서 사용 될 수 있습니다.EntranceThemeTransition is equivalent to a NavigationThemeTransition with the default parameters, but may be used outside of a Frame.

페이드 인/아웃/페이드 아웃Fade in/out, and crossfade

애니메이션 페이드 인 및 페이드 아웃을 사용 하 여 임시 UI 나 컨트롤을 표시 하거나 숨깁니다.Use fade in and fade out animations to show or hide transient UI or controls. XAML에서이는 FadeInThemeAnimationFadeOutThemeAnimation로 표시 됩니다.In XAML these are represented as FadeInThemeAnimation and FadeOutThemeAnimation. 한 가지 예는 사용자 상호 작용으로 인해 새 컨트롤이 표시 될 수 있는 앱 바에 있습니다.One example is in an app bar in which new controls can appear due to user interaction. 또 다른 예는 일정 시간 동안 사용자 입력이 검색 되지 않은 후 페이드 아웃 되는 임시 스크롤 막대 또는 패닝 표시기입니다.Another example is a transient scroll bar or panning indicator that is faded out after no user input has been detected for some amount of time. 콘텐츠를 동적으로 로드할 때 응용 프로그램은 자리 표시자 항목에서 최종 항목으로 전환할 때 애니메이션에서 페이드를 사용 해야 합니다.Apps should also use the fade in animation when they transition from a placeholder item to the final item as content loads dynamically.

항목의 상태가 변경 될 때 전환을 매끄럽게 하려면 페이드 애니메이션을 사용 합니다. 예를 들어 앱이 뷰의 현재 콘텐츠를 새로 고치는 경우입니다.Use a crossfade animation to smooth the transition when an item's state is changing; for example, when the app refreshes the current contents of a view. XAML 애니메이션 라이브러리는 전용 페이드 애니메이션 ( 교차일치에 해당 하지 않음)을 제공 하지 않지만 FadeInThemeAnimationFadeOutThemeAnimation 를 사용 하 여 동일한 결과를 얻을 수 있으며 겹치는 타이밍을 제공 합니다.The XAML animation library does not supply a dedicated crossfade animation (no equivalent for crossFade), but you can achieve the same result using FadeInThemeAnimation and FadeOutThemeAnimation with overlapped timing.

위쪽/아래쪽 포인터Pointer up/down

PointerUpThemeAnimationPointerDownThemeAnimation 애니메이션을 사용 하 여 사용자에 게 성공적으로 탭 하거나 타일을 클릭 하는 데 대 한 피드백을 제공 합니다.Use the PointerUpThemeAnimation and PointerDownThemeAnimation animations to give the user feedback for a successful tap or click on a tile. 예를 들어 사용자가 타일에서 마우스를 클릭 하거나 탭 하면 포인터 다운 애니메이션이 재생 됩니다.For example, when a user clicks or taps down on a tile, the pointer down animation is played. 클릭 또는 탭이 해제 되 면 포인터 위쪽 애니메이션이 재생 됩니다.Once the click or tap has been released, the pointer up animation is played.

변경할Reposition

위치 변경 애니메이션 (RepositionThemeAnimation 또는 RepositionThemeTransition)을 사용 하 여 요소를 새 위치로 이동 합니다.Use the reposition animations (RepositionThemeAnimation or RepositionThemeTransition) to move an element into a new position. 예를 들어 항목 컨트롤에서 헤더를 이동 하면 위치 변경 애니메이션이 사용 됩니다.For example, moving the headers in an items control uses the reposition animation.

팝업 표시/숨기기Show/hide popup

PopInThemeAnimationPopOutThemeAnimation 를 사용 하 여 현재 보기 위에 POPUP 또는 이와 유사한 컨텍스트 UI를 표시 하거나 숨길 수 있습니다.Use the PopInThemeAnimation and PopOutThemeAnimation when you show and hide a Popup or similar contextual UI on top of the current view. PopupThemeTransition 팝업을 해제 하려는 경우 유용한 피드백 인 테마 전환입니다.PopupThemeTransition is a theme transition that's useful feedback if you want to light dismiss a popup.

가장자리 UI 표시/숨기기Show/hide edge UI

EdgeUIThemeTransition 애니메이션을 사용 하 여 작은 가장자리 기반 UI를 뷰로 이동 합니다.Use the EdgeUIThemeTransition animation to slide small, edge-based UI into and out of view. 예를 들어 화면 위쪽 또는 아래쪽에 사용자 지정 응용 프로그램 표시줄을 표시 하거나 화면 위쪽에 오류 및 경고에 대 한 UI 화면을 표시 하는 경우 이러한 애니메이션을 사용 합니다.For example, use these animations when you show a custom app bar at the top or bottom of the screen or a UI surface for errors and warnings at the top of the screen.

PaneThemeTransition 애니메이션을 사용 하 여 창 또는 패널을 표시 하거나 숨깁니다.Use the PaneThemeTransition animation to show and hide a pane or panel. 이는 사용자 지정 키보드 또는 작업창과 같은 커다란 가장자리 기반 UI에 사용 됩니다.This is for large edge-based UI such as a custom keyboard or a task pane.

항목 변경 내용 목록List item changes

기존 목록에서 항목을 추가 하거나 삭제할 때 애니메이션 동작을 추가 하려면 AddDeleteThemeTransition 애니메이션을 사용 합니다.Use the AddDeleteThemeTransition animation to add animated behavior when you add or delete an item in an existing list. 추가의 경우, 먼저 목록에서 기존 항목의 위치를 변경 하 여 새 항목의 공간을 확보 한 다음 새 항목을 추가 합니다.For add, the transition will first reposition existing items in the list to make space for the new items, and then add the new items. 삭제의 경우 전환은 목록에서 항목을 제거 하 고 필요한 경우 삭제 된 항목이 제거 된 후 나머지 목록 항목의 위치를 재배치 합니다.For delete, the transition removes items from a list and, if necessary, repositions the remaining list items once the deleted items have been removed.

항목이 목록에서 위치를 변경 하는 경우에는 별도의 ReorderThemeTransition 적용 됩니다.There's also a separate ReorderThemeTransition that you apply if an item changes position in a list. 항목을 삭제 하 고 연결 된 delete/add 애니메이션을 사용 하 여 새 장소에 추가 하는 것과 다르게 애니메이션 효과가 적용 됩니다.This is animated differently than deleting an item and adding it in a new place with the associated delete/add animations.

이러한 애니메이션은 이러한 컨트롤을 이미 사용 하 고 있는 경우 해당 애니메이션을 수동으로 추가할 필요가 없도록 기본 ListViewGridView 템플릿에 포함 되어 있습니다.Note that these animations are included in the default ListView and GridView templates so you do not need to manually add these animations if you are already using these controls.

끌어서 놓기Drag/drop

끌기 애니메이션 (DragItemThemeAnimation, DragOverThemeAnimation) 및 drop 애니메이션 (DropTargetItemThemeAnimation)을 사용 하 여 사용자가 항목을 끌거나 놓을 때 시각적 피드백을 제공 합니다.Use the drag animations (DragItemThemeAnimation, DragOverThemeAnimation) and drop animation (DropTargetItemThemeAnimation) to give visual feedback when the user drags or drops an item.

활성 상태인 경우 애니메이션은 삭제 된 항목을 기준으로 목록을 다시 정렬할 수 있음을 사용자에 게 보여 줍니다.When active, the animations show the user that the list can be rearranged around a dropped item. 항목이 현재 위치에서 삭제 되는 경우 목록에 항목이 배치 될 위치를 사용자에 게 알려 주는 것이 유용 합니다.It is helpful for users to know where the item will be placed in a list if it is dropped at the current location. 애니메이션은 끌고 있는 항목을 목록에 있는 다른 두 항목 사이에 놓을 수 있음을 시각적으로 표시 하 고 해당 항목은 그 밖으로 이동 합니다.The animations give visual feedback that an item being dragged can be dropped between two other items in the list and that those items will move out of the way.

사용자 지정 컨트롤에 애니메이션 사용Using animations with custom controls

다음 표에는 이러한 Windows 런타임 컨트롤의 사용자 지정 버전을 만들 때 사용 해야 하는 애니메이션에 대 한 권장 사항이 요약 되어 있습니다.The following table summarizes our recommendations for which animation you should use when you create a custom version of these Windows Runtime controls:

UI 유형UI type 권장 애니메이션Recommended animation
대화 상자Dialog box FadeInThemeAnimation FadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation
플라이아웃Flyout PopInThemeAnimation PopOutThemeAnimationPopInThemeAnimation and PopOutThemeAnimation
도구 설명Tooltip FadeInThemeAnimation FadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation
상황에 맞는 메뉴Context menu PopInThemeAnimation PopOutThemeAnimationPopInThemeAnimation and PopOutThemeAnimation
명령 모음Command bar EdgeUIThemeTransitionEdgeUIThemeTransition
작업창 또는 가장자리 기반 패널Task pane or edge-based panel PaneThemeTransitionPaneThemeTransition
모든 UI 컨테이너의 내용Contents of any UI container ContentThemeTransitionContentThemeTransition
컨트롤의 경우 또는 다른 애니메이션이 적용 되지 않는 경우For controls or if no other animation applies FadeInThemeAnimation FadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation

 

전환 애니메이션 예제Transition animation examples

응용 프로그램에서 애니메이션을 사용 하 여 사용자 인터페이스를 개선 하거나 사용자에 게 성가신 작업 없이 더 매력적으로 만드는 것이 가장 좋습니다.Ideally, your app uses animations to enhance the user interface or to make it more attractive without annoying your users. 이 작업을 수행 하는 한 가지 방법은 UI에 애니메이션이 적용 된 전환을 적용 하는 것입니다 .이 경우에는 어떤 항목이 화면에 들어가거나 변경 되거나 변경 될 때 애니메이션이 사용자의 변경에 주의를 기울여야 합니다.One way you can do this is to apply animated transitions to UI so that when something enters or leaves the screen or otherwise changes, the animation draws the attention of the user to the change. 예를 들어 단추를 표시 하거나 사라지게 하는 대신 뷰에서 신속 하 게 페이드 인 및 페이드 아웃할 수 있습니다.For example, your buttons may rapidly fade in and out of view rather than just appear and disappear. 일관 된 권장 또는 일반적인 애니메이션 전환을 만드는 데 사용할 수 있는 많은 Api를 만들었습니다.We created a number of APIs that can be used to create recommended or typical animation transitions that are consistent. 예제에서는 단추에 애니메이션을 적용 하 여 슬라이드를 빠르게 보기에 적용 하는 방법을 보여 줍니다.The example here shows how to apply an animation to a button so that it swiftly slides into view.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

이 코드에서는 단추의 전환 컬렉션에 EntranceThemeTransition 개체를 추가 합니다.In this code, we add the EntranceThemeTransition object to the transition collection of the button. 이제 단추가 처음 렌더링 되 면 바로 표시 되는 것이 아니라 뷰로 빠르게 슬라이드를 표시 합니다.Now, when the button is first rendered, it swiftly slides into view rather than just appear. 애니메이션 개체에 대 한 몇 가지 속성을 설정 하 여 얼마나 멀리의 슬라이드와 그 방향을 조정할 수 있지만 실제로는 특정 시나리오에 대 한 간단한 API 인 것입니다. 즉, 눈에 띄는 입구를 만들 수 있습니다.You can set a few properties on the animation object in order to adjust how far it slides and from what direction, but it's really meant to be a simple API for a specific scenario, that is, to make an eye-catching entrance.

응용 프로그램의 스타일 리소스에서 전환 애니메이션 테마를 정의 하 여 효과를 균일 하 게 적용할 수 있습니다.You can also define transition animation themes in the style resources of your app, allowing you to apply the effect uniformly. 이 예제는 이전 예제와 동일 하며 스타일을 사용 하 여 적용 됩니다.This example is equivalent to the previous one, only it is applied using a Style:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

이전 예제에서는 개별 컨트롤에 테마 전환을 적용 하지만, 테마 전환은 개체의 컨테이너에 적용 하는 경우 훨씬 더 흥미롭습니다.The previous examples apply a theme transition to an individual control, however, theme transitions are even more interesting when you apply them to a container of objects. 이 작업을 수행 하면 컨테이너의 모든 자식 개체가 전환 작업에 포함 됩니다.When you do this, all the child objects of the container take part in the transition. 다음 예제에서는 EntranceThemeTransition 사각형의 모눈 에 적용 됩니다.In the following example, an EntranceThemeTransition is applied to a Grid of rectangles.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

이 애니메이션을 사각형에 개별적으로 적용 한 경우와 같이 눈금선 의 자식 사각형은 한 번에 모두 표시 되는 것이 아니라 시각적으로 보기 편 된 방식으로 전환 됩니다.The child rectangles of the Grid transition into view one after the other in a visually pleasing way rather than all at once as would be the case if you applied this animation to the rectangles individually.

이 애니메이션의 데모는 다음과 같습니다.Here's a demonstration of this animation:

자식 사각형을 뷰로 전환 하는 애니메이션

해당 자식 중 하나 이상이 위치를 변경 하는 경우에도 컨테이너의 자식 개체가 다시 흐를 수 있습니다.Child objects of a container can also re-flow when one or more of those children change position. 다음 예제에서는 사각형의 모눈에 RepositionThemeTransition 를 적용 합니다.In the following example, we apply a RepositionThemeTransition to a grid of rectangles. 사각형 중 하나를 제거 하면 다른 모든 사각형은 새 위치로 다시 흐릅니다.When you remove one of the rectangles, all the other rectangles re-flow into their new position.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>
private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}
// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

단일 개체 또는 개체 컨테이너에 여러 개의 전환 애니메이션을 적용할 수 있습니다.You can apply multiple transition animations to a single object or object container. 예를 들어 사각형 목록을 보기에 애니메이션 효과를 적용 하 고 위치를 변경 하는 경우에도 애니메이션 효과를 주려면 다음과 같이 RepositionThemeTransitionEntranceThemeTransition 를 적용 하면 됩니다.For example, if you want the list of rectangles to animate into view and also animate when they change position, you can apply the RepositionThemeTransition and EntranceThemeTransition like this:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

UI 요소를 추가, 제거, 다시 정렬 하는 등의 방법으로 애니메이션을 만드는 여러 가지 전환 효과가 있습니다.There are several transition effects to create animations on your UI elements as they are added, removed, reordered, and so on. 이러한 Api의 이름에는 모두 "ThemeTransition"가 포함 됩니다.The names of these APIs all contain "ThemeTransition":

APIAPI 설명Description
NavigationThemeTransitionNavigationThemeTransition 프레임의 페이지 탐색에 대 한 Windows 취향에 맞는 애니메이션을 제공 합니다.Provides a Windows personality animation for page navigation in a Frame.
AddDeleteThemeTransitionAddDeleteThemeTransition 컨트롤이 자식 또는 콘텐츠를 추가 하거나 삭제 하는 경우에 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for when controls add or delete children or content. 일반적으로 컨트롤은 항목 컨테이너입니다.Typically the control is an item container.
ContentThemeTransitionContentThemeTransition 컨트롤의 내용이 변경 되는 경우에 대 한 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for when the content of a control is changing. AddDeleteThemeTransition외에도이를 적용할 수 있습니다.You can apply this in addition to AddDeleteThemeTransition.
EdgeUIThemeTransitionEdgeUIThemeTransition (소형) 가장자리 UI 전환에 대 한 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for a (small) edge UI transition.
EntranceThemeTransitionEntranceThemeTransition 컨트롤이 처음으로 나타날 때 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for when controls first appear.
PaneThemeTransitionPaneThemeTransition 패널 (large edge UI) UI 전환에 대 한 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for a panel (large edge UI) UI transition.
PopupThemeTransitionPopupThemeTransition 표시 되는 컨트롤의 팝업 구성 요소 (예: 개체의 도구 설명 처럼 UI)에 적용 되는 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior that applies to pop-in components of controls (for example, tooltip-like UI on an object) as they appear.
ReorderThemeTransitionReorderThemeTransition 목록 뷰 컨트롤 항목이 순서를 변경 하는 경우에 대 한 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for when list-view controls items change order. 일반적으로이는 끌어서 놓기 작업의 결과로 발생 합니다.Typically this happens as a result of a drag-drop operation. 서로 다른 컨트롤과 테마는 애니메이션에 대 한 다양 한 특성을 가질 수 있습니다.Different controls and themes can have varying characteristics for the animations.
RepositionThemeTransitionRepositionThemeTransition 컨트롤의 위치가 변경 될 때 애니메이션 전환 동작을 제공 합니다.Provides the animated transition behavior for when controls change position.

 

테마 애니메이션 예제Theme animation examples

전환 애니메이션은 간단 하 게 적용할 수 있습니다.Transition animations are simple to apply. 하지만 애니메이션 효과의 타이밍과 순서를 좀 더 자세히 제어할 수 있습니다.But you may want to have a bit more control over the timing and order of your animation effects. 테마 애니메이션을 사용 하 여 애니메이션이 동작 하는 방식에 일관 된 테마를 계속 사용 하면서 더 많은 제어를 사용할 수 있습니다.You can use theme animations to enable more control while still using a consistent theme for how your animation behaves. 또한 테마 애니메이션에는 사용자 지정 애니메이션 보다 더 작은 태그만 필요 합니다.Theme animations also require less markup than custom animations. 여기서는 FadeOutThemeAnimation 를 사용 하 여 사각형을 뷰에서 페이드 아웃 합니다.Here, we use the FadeOutThemeAnimation to make a rectangle fade out of view.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}
' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub
//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

전환 애니메이션과 달리 테마 애니메이션은 자동으로 실행 되는 기본 제공 트리거 (전환)를 포함 하지 않습니다.Unlike transition animations, a theme animation doesn't have a built-in trigger (the transition) that runs it automatically. XAML에서 정의 하는 경우 테마 애니메이션을 포함 하려면 Storyboard 를 사용 해야 합니다.You must use a Storyboard to contain a theme animation when you define it in XAML. 애니메이션의 기본 동작을 변경할 수도 있습니다.You can also change the default behavior of the animation. 예를 들어 FadeOutThemeAnimation에서 Duration 시간 값을 늘려 페이드 아웃의 속도를 늦출 수 있습니다.For example, you can slow down the fade-out by increasing the Duration time value on the FadeOutThemeAnimation.

참고    기본 애니메이션 기술을 보여 주기 위해 응용 프로그램 코드를 사용 하 여 Storyboard의 메서드를 호출 하 여 애니메이션을 시작 합니다.Note  For purposes of showing basic animation techniques, we're using app code to start the animation by calling methods of Storyboard. 시작, 중지, 일시 중지다시 시작 storyboard 메서드를 사용 하 여 스토리 보드 애니메이션을 실행 하는 방법을 제어할 수 있습니다.You can control how the Storyboard animations run using the Begin, Stop, Pause, and Resume Storyboard methods. 그러나 일반적으로 앱에 라이브러리 애니메이션을 포함 하는 방법은 아닙니다.However, that's not typically how you include library animations in apps. 대신 일반적으로 라이브러리 애니메이션을 컨트롤 또는 요소에 적용 되는 XAML 스타일 및 템플릿에 통합 합니다.Rather, you usually integrate the library animations into the XAML styles and templates applied to controls or elements. 템플릿과 시각적 상태를 이해 하는 것은 약간 더 복잡 합니다.Learning about templates and visual states is a little more involved. 그러나 시각적 상태에 대 한 Storyboarded 애니메이션 항목의 일부로 시각적 상태에서 라이브러리 애니메이션을 사용 하는 방법에 대해서도 설명 합니다.But we do cover how you'd use library animations in visual states as part of the Storyboarded animations for visual states topic.

 

UI 요소에 다른 여러 테마 애니메이션을 적용 하 여 애니메이션 효과를 만들 수 있습니다.You can apply several other theme animations to your UI elements to create animation effects. 이러한 API의 이름에는 모두 "ThemeAnimation"가 포함 됩니다.The names of these API all contain "ThemeAnimation":

APIAPI 설명Description
DragItemThemeAnimationDragItemThemeAnimation 끌고 있는 항목 요소에 적용 되는 미리 구성 된 애니메이션을 나타냅니다.Represents the preconfigured animation that applies to item elements being dragged.
DragOverThemeAnimationDragOverThemeAnimation 끌고 있는 요소 아래에 있는 요소에 적용 되는 미리 구성 된 애니메이션을 나타냅니다.Represents the preconfigured animation that applies to the elements underneath an element being dragged.
DropTargetItemThemeAnimationDropTargetItemThemeAnimation 잠재적 놓기 대상 요소에 적용 되는 미리 구성 된 애니메이션입니다.The preconfigured animation that applies to potential drop target elements.
FadeInThemeAnimationFadeInThemeAnimation 컨트롤을 처음 표시할 때 컨트롤에 적용 되는 미리 구성 된 불투명 애니메이션입니다.The preconfigured opacity animation that applies to controls when they first appear.
FadeOutThemeAnimationFadeOutThemeAnimation UI에서 제거 되거나 숨겨진 경우 컨트롤에 적용 되는 미리 구성 된 불투명 애니메이션입니다.The preconfigured opacity animation that applies to controls when they are removed from UI or hidden.
PointerDownThemeAnimationPointerDownThemeAnimation 항목 또는 요소를 탭 하거나 클릭 하는 사용자 작업에 대 한 미리 구성 된 애니메이션입니다.The preconfigured animation for user action that taps or clicks an item or element.
PointerUpThemeAnimationPointerUpThemeAnimation 사용자가 항목 또는 요소를 탭 하 고 작업을 해제 한 후 실행 되는 사용자 동작에 대 한 미리 구성 된 애니메이션입니다.The preconfigured animation for user action that runs after a user taps down on an item or element and the action is released.
PopInThemeAnimationPopInThemeAnimation 표시 되는 컨트롤의 pop 구성 요소에 적용 되는 미리 구성 된 애니메이션입니다.The preconfigured animation that applies to pop-in components of controls as they appear. 이 애니메이션은 불투명도와 변환을 결합 합니다.This animation combines opacity and translation.
PopOutThemeAnimationPopOutThemeAnimation 컨트롤이 닫히거나 제거 될 때 컨트롤의 pop 구성 요소에 적용 되는 미리 구성 된 애니메이션입니다.The preconfigured animation that applies to pop-in components of controls as they are closed or removed. 이 애니메이션은 불투명도와 변환을 결합 합니다.This animation combines opacity and translation.
RepositionThemeAnimationRepositionThemeAnimation 위치가 변경 될 때 개체에 대 한 미리 구성 된 애니메이션입니다.The preconfigured animation for an object as it is repositioned.
SplitCloseThemeAnimationSplitCloseThemeAnimation 콤보 상자 를 열고 닫는 스타일의 애니메이션을 사용 하 여 대상 UI를 구성 하는 미리 구성 된 애니메이션입니다.The preconfigured animation that conceals a target UI using an animation in the style of a ComboBox opening and closing.
SplitOpenThemeAnimationSplitOpenThemeAnimation 콤보 상자 를 열고 닫는 스타일에서 애니메이션을 사용 하 여 대상 UI를 표시 하는 미리 구성 된 애니메이션입니다.The preconfigured animation that reveals a target UI using an animation in the style of a ComboBox opening and closing.
DrillInThemeAnimationDrillInThemeAnimation 마스터 페이지에서 세부 정보 페이지로 이동 하는 것과 같이 사용자가 논리적 계층 구조에서 이동할 때 실행 되는 미리 구성 된 애니메이션을 나타냅니다.Represents a preconfigured animation that runs when a user navigates forward in a logical hierarchy, like from a master page to a detail page.
DrillOutThemeAnimationDrillOutThemeAnimation 사용자가 세부 페이지에서 마스터 페이지로 이동 하는 것과 같은 논리 계층 구조에서 뒤로 이동할 때 실행 되는 미리 구성 된 애니메이션을 나타냅니다.Represents a preconfigured animation that runs when a user navigates backward in a logical hierarchy, like from a detail page to a master page.

 

직접 애니메이션 만들기Create your own animations

테마 애니메이션이 사용자 요구에 충분 하지 않은 경우 고유한 애니메이션을 만들 수 있습니다.When theme animations are not enough for your needs, you can create your own animations. 하나 이상의 속성 값에 애니메이션을 적용 하 여 개체에 애니메이션 효과를 적용 합니다.You animate objects by animating one or more of their property values. 예를 들어 사각형의 너비, system.windows.media.rotatetransform.angle의 각도 또는 단추의 색 값에 애니메이션 효과를 적용할 수 있습니다.For example, you can animate the width of a rectangle, the angle of a RotateTransform, or the color value of a button. 이 유형의 사용자 지정 애니메이션은 Windows 런타임 이미 미리 구성 된 애니메이션 형식으로 제공 되는 라이브러리 애니메이션과 구별 하기 위해 storyboarded 애니메이션입니다.We term this type of custom animation a storyboarded animation, to distinguish it from the library animations that the Windows Runtime already provides as a preconfigured animation type. Storyboarded 애니메이션의 경우 특정 형식의 값을 변경할 수 있는 애니메이션 (예: Double에 애니메이션 효과를 주는 system.windows.media.animation.doubleanimation.to )을 사용 하 고 해당 애니메이션을 스토리 보드 내에 배치 하 여 제어 합니다.For storyboarded animations, you use an animation that can change values of a particular type (for example DoubleAnimation to animate a Double) and put that animation within a Storyboard to control it.

애니메이션을 적용 하려면 애니메이션 속성은 종속성 속성이어야 합니다.In order to be animated, the property you are animating must be a dependency property. 종속성 속성에 대 한 자세한 내용은 종속성 속성 개요를 참조 하세요.For more info about dependency properties, see Dependency properties overview. 대상 지정 및 제어 하는 방법을 비롯 하 여 사용자 지정 storyboarded 애니메이션을 만드는 방법에 대 한 자세한 내용은 storyboarded 애니메이션을 참조 하세요.For more info on creating custom storyboarded animations, including how to target and control them, see Storyboarded animations.

Xaml에서 사용자 지정 storyboarded 애니메이션을 정의할 수 있는 가장 큰 영역은 xaml에서 컨트롤의 시각적 상태를 정의 하는 경우입니다.The biggest area of app UI definition in XAML where you'll define custom storyboarded animations is if you are defining visual states for controls in XAML. 새 컨트롤 클래스를 만들거나 컨트롤 템플릿에서 시각적 상태가 있는 기존 컨트롤의 템플릿을 다시 작성 하기 때문에이 작업을 수행할 수 있습니다.You'll be doing this either because you are creating a new control class, or because you are re-templating an existing control that has visual states in its control template. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.For more info, see Storyboarded animations for visual states.