Windows 앱에 대 한 연결 된 애니메이션Connected animation for Windows apps

연결된 애니메이션을 사용하면 두 가지 보기 간에 전환되는 동작에 애니메이션 효과를 적용하여 역동적이고 매력적인 탐색 환경을 만들 수 있습니다.Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views. 이를 통해 사용자는 컨텍스트를 유지 하 고 뷰 간에 연속성을 제공할 수 있습니다.This helps the user maintain their context and provides continuity between the views.

연결 된 애니메이션에서 요소는 UI 내용이 변경 되는 동안 두 보기 사이에 "continue"가 표시 되 고, 화면에서 소스 뷰의 위치부터 새 뷰의 대상까지 이동 합니다.In a connected animation, an element appears to "continue" between two views during a change in UI content, flying across the screen from its location in the source view to its destination in the new view. 이렇게 하면 보기 간의 공통 콘텐츠를 강조 하 고 전환의 일부로 멋진 및 동적 효과를 만듭니다.This emphasizes the common content between the views and creates a beautiful and dynamic effect as part of a transition.

중요 한 api: ConnectedAnimation 클래스, ConnectedAnimationService 클래스Important APIs: ConnectedAnimation class, ConnectedAnimationService class

Examples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치 되어 있는 경우 여기를 클릭 하 여 앱을 열고 동작의 연결 된 애니메이션을 확인하세요.If you have the XAML Controls Gallery app installed, click here to open the app and see Connected Animation in action.

이 짧은 비디오에서 앱은 연결 된 애니메이션을 사용 하 여 항목 이미지에 애니메이션 효과를 주기 때문에 다음 페이지의 헤더에 포함 될 수 있습니다.In this short video, an app uses a connected animation to animate an item image as it "continues" to become part of the header of the next page. 이 효과는 전환 전체에서 사용자 컨텍스트를 유지 하는 데 도움이 됩니다.The effect helps maintain user context across the transition.

연결 된 애니메이션

동영상 요약Video summary

연결 된 애니메이션 및 흐름 디자인 시스템Connected animation and the Fluent Design System

Fluent 디자인 시스템을 사용하면 조명, 깊이, 움직임, 재질 및 배율이 통합된 선명한 현대식 UI를 만들 수 있습니다.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. 연결 된 애니메이션은 응용 프로그램에 동작을 추가 하는 흐름 디자인 시스템 구성 요소입니다.Connected animation is a Fluent Design System component that adds motion to your app. 자세한 내용은 Fluent Design 개요를 참조하세요.To learn more, see the Fluent Design overview.

애니메이션을 연결 하는 이유Why connected animation?

페이지 간을 탐색할 때 사용자가 탐색 후에 표시 되는 새 콘텐츠와 탐색 시의 용도에 대 한 정보를 이해 하는 것이 중요 합니다.When navigating between pages, it’s important for the user to understand what new content is being presented after the navigation and how it relates to their intent when navigating. 연결 된 애니메이션은 사용자의 포커스를 두 뷰 간에 공유 되는 내용에 그려 두 뷰 간의 관계를 강조 하는 강력한 시각적 비유를 제공 합니다.Connected animations provide a powerful visual metaphor that emphasizes the relationship between two views by drawing the user’s focus to the content shared between them. 또한 연결 된 애니메이션은 앱의 동작 디자인을 구분 하는 데 도움이 되는 시각적 관심사와 폴란드어를 페이지 탐색에 추가 합니다.Additionally, connected animations add visual interest and polish to page navigation that can help differentiate the motion design of your app.

연결 된 애니메이션을 사용 하는 경우When to use connected animation

연결 된 애니메이션은 일반적으로 페이지를 변경할 때 사용 되지만, UI에서 콘텐츠를 변경 하 고 사용자가 컨텍스트를 유지 관리 하려는 환경에도 적용 될 수 있습니다.Connected animations are generally used when changing pages, though they can be applied to any experience where you are changing content in a UI and want the user to maintain context. 원본 뷰와 대상 뷰 간에 이미지 또는 다른 UI가 공유 될 때마다 탐색에서 드릴 하는 대신 연결 된 애니메이션을 사용 하는 것이 좋습니다.You should consider using a connected animation instead of a drill in navigation transition whenever there is an image or other piece of UI shared between the source and destination views.

연결 된 애니메이션 구성Configure connected animation

중요

이 기능을 사용 하려면 앱의 대상 버전이 Windows 10, 버전 1809 (SDK 17763) 이상 이어야 합니다.This feature requires that your app's Target version be Windows 10, version 1809 (SDK 17763) or later. 이전 Sdk에서는 구성 속성을 사용할 수 없습니다.The Configuration property is not available in earlier SDKs. 적응 코드 또는 조건부 XAML을 사용 하 여 SDK 17763 보다 낮은 최소 버전을 대상으로 지정할 수 있습니다.You can target a Minimum version lower than SDK 17763 using adaptive code or conditional XAML. 자세한 내용은 버전 적응 앱을 참조 하세요.For more info, see Version adaptive apps.

Windows 10, 버전 1809부터, 연결 된 애니메이션은 앞으로 및 뒤로 페이지 탐색을 위해 특별히 조정 된 애니메이션 구성을 제공 하 여 흐름 디자인을 추가로 구체화 합니다.Starting in Windows 10, version 1809, connected animations further embody Fluent design by providing animation configurations tailored specifically for forward and backwards page navigation.

ConnectedAnimation에서 구성 속성을 설정 하 여 애니메이션 구성을 지정 합니다.You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. 다음 섹션에서이에 대 한 예를 살펴보겠습니다.(We’ll show examples of this in the next section.)

다음 표에서는 사용 가능한 구성을 설명 합니다.This table describes the available configurations. 이러한 애니메이션에 적용 되는 동작 원칙에 대 한 자세한 내용은 방향성 및 중력을 참조 하세요.For more information about the motion principles applied in these animations, see Directionality and gravity.

GravityConnectedAnimationConfigurationGravityConnectedAnimationConfiguration
이는 기본 구성 이며 전방 탐색에 권장 됩니다.This is the default configuration, and is recommended for forward navigation.
사용자가 앱에서 앞으로 탐색 하는 경우 (A에서 B로) 연결 된 요소는 실제로 "페이지를 끌어올 수 있습니다." 라고 표시 됩니다.As the user navigates forward in the app (A to B), the connected element appears to physically “pull off the page”. 이렇게 하면 요소가 z 공간에서 앞으로 이동 하는 것 처럼 표시 되 고 무게를 길게 유지 하는 효과로 비트를 삭제 합니다.In doing so, the element appears to move forward in z-space and drops a bit as an effect of gravity taking hold. 무게의 효과를 극복 하기 위해 요소는 속도를 향상 하 고 최종 위치로 가속화 합니다.To overcome the effects of gravity, the element gains velocity and accelerates into its final position. 결과는 "scale and dip" 애니메이션입니다.The result is a “scale and dip” animation.
DirectConnectedAnimationConfigurationDirectConnectedAnimationConfiguration
사용자가 앱에서 뒤로 이동 하면 (B에서 A로) 애니메이션이 더 직접적입니다.As the user navigates backwards in the app (B to A), the animation is more direct. 연결 된 요소는 감속 3 차원 감속/가속 함수를 사용 하 여 B에서로 변환 됩니다.The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. 이전 visual affordance는 계속 해 서 탐색 흐름의 컨텍스트를 유지 하면서 최대한 빠르게 사용자를 이전 상태로 되돌립니다.The backwards visual affordance returns the user to their previous state as fast as possible while still maintaining the context of the navigation flow.
BasicConnectedAnimationConfigurationBasicConnectedAnimationConfiguration
이는 Windows 10 버전 1809 (SDK 17763) 이전 버전에서 사용 되는 기본 (및에만 해당) 애니메이션입니다.This is the default (and only) animation used in versions prior to Windows 10, version 1809 (SDK 17763).

ConnectedAnimationService 구성ConnectedAnimationService configuration

ConnectedAnimationService 클래스에는 전체 서비스가 아닌 개별 애니메이션에 적용 되는 두 개의 속성이 있습니다.The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

다양 한 효과를 얻기 위해이 표에 설명 된 대로 일부 구성은 ConnectedAnimationService에서 이러한 속성을 무시 하 고 대신 고유한 값을 사용 합니다.To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

구성Configuration DefaultDuration을 고려 하나요?Respects DefaultDuration? DefaultEasingFunction?Respects DefaultEasingFunction?
중력Gravity Yes 예*Yes*
*A에서 B로의 기본 변환은이 감속/가속 함수를 사용 하지만 "중력 dip"에는 자체 감속/가속 함수가 있습니다.*The basic translation from A to B uses this easing function, but the "gravity dip" has its own easing function.
직접Direct 아니요No
150ms에 대 한 애니메이션을 적용 합니다.Animates over 150ms.
아니요No
감속 감속/가속 함수를 사용 합니다.Uses the Decelerate easing function.
BasicBasic Yes Yes

연결 된 애니메이션을 구현 하는 방법How to implement connected animation

연결 된 애니메이션을 설정 하는 과정은 다음 두 단계로 구성 됩니다.Setting up a connected animation involves two steps:

  1. 소스 요소가 연결 된 애니메이션에 참여할 시스템을 나타내는 소스 페이지에서 애니메이션 개체를 준비 합니다.Prepare an animation object on the source page, which indicates to the system that the source element will participate in the connected animation.
  2. 대상 페이지에서 애니메이션을 시작 하 고 대상 요소에 대 한 참조를 전달 합니다.Start the animation on the destination page, passing a reference to the destination element.

원본 페이지에서 탐색할 때 ConnectedAnimationService 를 호출 하 여 ConnectedAnimationService의 인스턴스를 가져옵니다.When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of ConnectedAnimationService. 애니메이션을 준비 하려면이 인스턴스에서 PrepareToAnimate 를 호출 하 고, 전환에 사용할 UI 요소 및 고유 키를 전달 합니다.To prepare an animation, call PrepareToAnimate on this instance, and pass in a unique key and the UI element you want to use in the transition. 고유 키를 사용 하 여 나중에 대상 페이지에서 애니메이션을 검색할 수 있습니다.The unique key lets you retrieve the animation later on the destination page.

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

탐색이 발생 하면 대상 페이지에서 애니메이션을 시작 합니다.When the navigation occurs, start the animation in the destination page. 애니메이션을 시작 하려면 ConnectedAnimation를 호출 합니다.To start the animation, call ConnectedAnimation.TryStart. 애니메이션을 만들 때 제공 된 고유 키를 사용 하 여 ConnectedAnimationService 를 호출 하 여 올바른 애니메이션 인스턴스를 검색할 수 있습니다.You can retrieve the right animation instance by calling ConnectedAnimationService.GetAnimation with the unique key you provided when creating the animation.

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

전방 탐색Forward navigation

이 예제에서는 ConnectedAnimationService를 사용 하 여 두 페이지 간에 전방 탐색을 위한 전환을 만드는 방법을 보여 줍니다 (Page_A Page_B).This example shows how to use ConnectedAnimationService to create a transition for forward navigation between two pages (Page_A to Page_B).

전방 탐색에 권장 되는 애니메이션 구성은 GravityConnectedAnimationConfiguration입니다.The recommended animation configuration for forward navigation is GravityConnectedAnimationConfiguration. 이것은 기본값 이므로 다른 구성을 지정 하려는 경우가 아니면 구성 속성을 설정할 필요가 없습니다.This is the default, so you don't need to set the Configuration property unless you want to specify a different configuration.

원본 페이지에서 애니메이션을 설정 합니다.Set up the animation in the source page.

<!-- Page_A.xaml -->

<Image x:Name="SourceImage"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       Width="200" Height="200"
       Stretch="Fill"
       Source="Assets/StoreLogo.png"
       PointerPressed="SourceImage_PointerPressed"/>
// Page_A.xaml.cs

private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Navigate to detail page.
    // Suppress the default animation to avoid conflict with the connected animation.
    Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("forwardAnimation", SourceImage);
    // You don't need to explicitly set the Configuration property because
    // the recommended Gravity configuration is default.
    // For custom animation, use:
    // animation.Configuration = new BasicConnectedAnimationConfiguration();
}

대상 페이지에서 애니메이션을 시작 합니다.Start the animation in the destination page.

<!-- Page_B.xaml -->

<Image x:Name="DestinationImage"
       Width="400" Height="400"
       Stretch="Fill"
       Source="Assets/StoreLogo.png" />
// Page_B.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
    if (animation != null)
    {
        animation.TryStart(DestinationImage);
    }
}

뒤로 탐색Back navigation

뒤로 탐색 (Page_B Page_A)의 경우 동일한 단계를 수행 하지만 원본 및 대상 페이지가 반대로 바뀝니다.For back navigation (Page_B to Page_A), you follow the same steps, but the source and destination pages are reversed.

사용자가 다시 탐색할 때 앱이 최대한 빨리 이전 상태로 반환 될 것으로 예상 합니다.When the user navigates back, they expect the app to be returned to the previous state as soon as possible. 따라서 권장 구성은 DirectConnectedAnimationConfiguration입니다.Therefore, the recommended configuration is DirectConnectedAnimationConfiguration. 이 애니메이션은 더 빠르고 직접적 이며 감속 감속/가속을 사용 합니다.This animation is quicker, more direct, and uses the decelerate easing.

원본 페이지에서 애니메이션을 설정 합니다.Set up the animation in the source page.

// Page_B.xaml.cs

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {
        ConnectedAnimation animation = 
            ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);

        // Use the recommended configuration for back animation.
        animation.Configuration = new DirectConnectedAnimationConfiguration();
    }
}

대상 페이지에서 애니메이션을 시작 합니다.Start the animation in the destination page.

// Page_A.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
    if (animation != null)
    {
        animation.TryStart(SourceImage);
    }
}

애니메이션이 설정 된 시간과 시작 될 때 사이에 소스 요소가 앱에서 다른 UI 위에 고정 된 상태로 표시 됩니다.Between the time that the animation is set up and when it's started, the source element appears frozen above other UI in the app. 이렇게 하면 다른 모든 전환 애니메이션을 동시에 수행할 수 있습니다.This lets you perform any other transition animations simultaneously. 이러한 이유로 인해 소스 요소가 존재 하지 않을 수 있으므로이 두 단계 사이에서 250 밀리초를 초과 하 여 대기 하면 안 됩니다.For this reason, you shouldn't wait more than ~250 milliseconds in between the two steps because the presence of the source element may become distracting. 애니메이션을 준비 하 고 3 초 이내에 시작 하지 않는 경우 시스템에서 애니메이션을 삭제 하 고 모든 후속 호출이 실패 합니다.If you prepare an animation and do not start it within three seconds, the system will dispose of the animation and any subsequent calls to TryStart will fail.

목록 및 그리드 환경에서 연결 된 애니메이션Connected animation in list and grid experiences

또는 목록 또는 그리드 컨트롤에서 연결 된 애니메이션을 만들려고 하는 경우가 많습니다.Often, you will want to create a connected animation from or to a list or grid control. ListViewGridView( PrepareConnectedAnimationTryStartConnectedAnimationAsync)의 두 가지 메서드를 사용 하 여이 프로세스를 간소화할 수 있습니다.You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

예를 들어 데이터 템플릿에 이름이 "PortraitEllipse" 인 요소가 포함 된 ListView 가 있다고 가정해 보겠습니다.For example, say you have a ListView that contains an element with the name "PortraitEllipse" in its data template.

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

지정 된 목록 항목에 해당 하는 타원을 사용 하 여 연결 된 애니메이션을 준비 하려면 고유 키, 항목 및 이름 "PortraitEllipse"를 사용 하 여 PrepareConnectedAnimation 메서드를 호출 합니다.To prepare a connected animation with the ellipse corresponding to a given list item, call the PrepareConnectedAnimation method with a unique key, the item, and the name "PortraitEllipse".

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

자세히 보기에서 뒤로 탐색 하는 경우와 같이이 요소를 대상으로 사용 하 여 애니메이션을 시작 하려면 TryStartConnectedAnimationAsync를 사용 합니다.To start an animation with this element as the destination, such as when navigating back from a detail view, use TryStartConnectedAnimationAsync. 방금 ListView에 대 한 데이터 소스를 로드 한 경우 TryStartConnectedAnimationAsync는 해당 항목 컨테이너가 생성 될 때까지 애니메이션을 시작할 때까지 기다립니다.If you have just loaded the data source for the ListView, TryStartConnectedAnimationAsync will wait to start the animation until the corresponding item container has been created.

private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
    ContactsItem item = GetPersistedItem(); // Get persisted item
    if (item != null)
    {
        ContactsListView.ScrollIntoView(item);
        ConnectedAnimation animation =
            ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
        if (animation != null)
        {
            await ContactsListView.TryStartConnectedAnimationAsync(
                animation, item, "PortraitEllipse");
        }
    }
}

통합 애니메이션Coordinated animation

통합 애니메이션

조정 된 애니메이션 은 연결 된 애니메이션 대상과 함께 요소가 표시 되는 특수 한 형식의 나타내기 애니메이션으로, 화면에서 이동할 때 연결 된 애니메이션 요소와 함께 적용 됩니다.A coordinated animation is a special type of entrance animation where an element appears along with the connected animation target, animating in tandem with the connected animation element as it moves across the screen. 조정 된 애니메이션은 전환에 시각적 효과를 추가 하 고 원본 및 대상 뷰 간에 공유 되는 컨텍스트에 사용자의 주의를 기울일 수 있습니다.Coordinated animations can add more visual interest to a transition and further draw the user’s attention to the context that is shared between the source and destination views. 이러한 이미지에서 항목에 대 한 캡션 UI는 조정 된 애니메이션을 사용 하 여 애니메이션을 적용 합니다.In these images, the caption UI for the item is animating using a coordinated animation.

조정 된 애니메이션이 중력 구성을 사용 하는 경우 연결 된 애니메이션 요소와 조정 된 요소 모두에 중력이 적용 됩니다.When a coordinated animation uses the gravity configuration, gravity is applied to both the connected animation element and the coordinated elements. 요소가 실제로 조정 되도록 조정 된 요소는 연결 된 요소와 함께 "swoop" 됩니다.The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

Trstart 의 두 매개 변수 오버 로드를 사용 하 여 연결 된 애니메이션에 조정 된 요소를 추가 합니다.Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. 이 예제에서는 "CoverImage" 라는 연결 된 애니메이션 요소와 함께 입력 되는 "설명 루트" 라는 그리드 레이아웃의 통합 된 애니메이션을 보여 줍니다.This example demonstrates a coordinated animation of a Grid layout named "DescriptionRoot" that enters in tandem with a connected animation element named "CoverImage".

<!-- DestinationPage.xaml -->
<Grid>
    <Image x:Name="CoverImage" />
    <Grid x:Name="DescriptionRoot" />
</Grid>
// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
    var animationService = ConnectedAnimationService.GetForCurrentView();
    var animation = animationService.GetAnimation("coverImage");

    if (animation != null)
    {
        // Don’t need to capture the return value as we are not scheduling any subsequent
        // animations
        animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
     }
}

Do 및 일과Do’s and don’ts

  • 소스 및 대상 페이지 간에 요소를 공유 하는 페이지 전환에서 연결 된 애니메이션을 사용 합니다.Use a connected animation in page transitions where an element is shared between the source and destination pages.
  • 전방 탐색에 GravityConnectedAnimationConfiguration 를 사용 합니다.Use GravityConnectedAnimationConfiguration for forward navigation.
  • 뒤로 탐색에 DirectConnectedAnimationConfiguration 를 사용 합니다.Use DirectConnectedAnimationConfiguration for back navigation.
  • 연결 된 애니메이션 준비 및 시작 사이에서 네트워크 요청 또는 다른 장기 실행 비동기 작업을 기다리지 마세요.Don't wait on network requests or other long-running asynchronous operations in between preparing and starting a connected animation. 미리 전환을 실행 하는 데 필요한 정보를 미리 로드 하거나, 고해상도 이미지가 대상 보기에서 로드 되는 동안 저해상도 자리 표시자 이미지를 사용 해야 할 수도 있습니다.You may need to pre-load the necessary information to run the transition ahead of time, or use a low-resolution placeholder image while a high-resolution image loads in the destination view.
  • SuppressNavigationTransitionInfo 를 사용 하 여 ConnectedAnimationService를 사용 하는 경우 프레임 의 전환 애니메이션을 방지 합니다. 연결 된 애니메이션은 기본 탐색 전환과 함께 동시에 사용 되지 않기 때문입니다.Use SuppressNavigationTransitionInfo to prevent a transition animation in a Frame if you are using ConnectedAnimationService, since connected animations aren't meant to be used simultaneously with the default navigation transitions. 탐색 전환을 사용 하는 방법에 대 한 자세한 내용은 NavigationThemeTransition 를 참조 하세요.See NavigationThemeTransition for more info on how to use navigation transitions.

ConnectedAnimationConnectedAnimation

ConnectedAnimationServiceConnectedAnimationService

NavigationThemeTransitionNavigationThemeTransition