Подключенная анимация для приложений WindowsConnected 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.

В подключенной анимации элемент отображается как «продолжить» между двумя представлениями во время изменения содержимого пользовательского интерфейса, перелетая экран из его расположения в представлении исходного кода в его место назначения в новом представлении.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: класс коннектеданиматион, класс коннектеданиматионсервице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

Подключенная анимация и система проектирования Fluent DesignConnected animation and the Fluent Design System

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Подключенная анимация — это компонент системы проектирования Fluent Design, добавляющий движение в ваше приложение.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

Подключенные анимации обычно используются при переходе на другую страницу, хотя их можно применять при любой смене контента в пользовательском интерфейсе, если нужно сохранить контекст пользователя.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. Рекомендуем использовать подключенную анимацию вместо эффекта винта в переходах навигации, если исходное и целевое представления содержат общее изображение или другой элемент пользовательского интерфейса.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. Вы можете ориентироваться на минимальную версию, меньшую, чем SDK 17763, используя адаптивный код или условный XAML.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, подключенная анимация Дополнительно реализуют Fluent, предоставляя конфигурации анимации, специально предназначенные для перемещения вперед и обратной навигации по страницам.Starting in Windows 10, version 1809, connected animations further embody Fluent design by providing animation configurations tailored specifically for forward and backwards page navigation.

Вы указываете конфигурацию анимации, задав свойство Configuration для Коннектеданиматион.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 к), анимация является более прямой.As the user navigates backwards in the app (B to A), the animation is more direct. Подключенный элемент линейно преобразует из B в объект с использованием функции плавности Безье третьего порядка.The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. Обратная визуализация в обратном направлении возвращает пользователя к предыдущему состоянию как можно быстрее, при этом сохраняя контекст потока навигации.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 configuration

Класс коннектеданиматионсервице имеет два свойства, которые применяются к отдельным анимациям, а не к общей службе.The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

Для достижения различных эффектов некоторые конфигурации игнорируют эти свойства в Коннектеданиматионсервице и вместо этого используют собственные значения, как описано в этой таблице.To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

Параметр ConfigurationConfiguration Учитывает Дефаултдуратион?Respects DefaultDuration? Учитывает Дефаултеасингфунктион?Respects DefaultEasingFunction?
Сила тяготенияGravity ДаYes Да*Yes*
*Базовый перевод с A на B использует эту функцию плавности, но "сила притяжения" имеет собственную функцию плавности.*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.

При переходе с исходной страницы вызовите метод коннектеданиматионсервице. жетфоркуррентвиев , чтобы получить экземпляр коннектеданиматионсервице.When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of ConnectedAnimationService. Чтобы подготовить анимацию, вызовите препаретоанимате в этом экземпляре и передайте уникальный ключ и элемент пользовательского интерфейса, который требуется использовать при переходе.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.TryStart.To start the animation, call ConnectedAnimation.TryStart. Правильный экземпляр анимации можно извлечь, вызвав ConnectedAnimationService.GetAnimation с помощью уникального ключа, который вы предоставили при создании анимации.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

В этом примере показано, как использовать Коннектеданиматионсервице для создания перехода для прямой навигации между двумя страницами (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).

Рекомендуемая конфигурация анимации для прямой навигации — гравитиконнектеданиматионконфигуратион.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. Поэтому рекомендуемая конфигурация — директконнектеданиматионконфигуратион.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);
    }
}

Между моментом настройки анимации и ее запуском исходный элемент зафиксирован над другим пользовательским интерфейсом в приложении.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. Если анимация подготовлена, но не запущена в течение трех секунд, она удаляется из системы и любые последующие вызовы TryStart будут отклонены.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. Для упрощения этого процесса можно использовать два метода в ListView и GridView, препареконнектеданиматион и тристартконнектеданиматионасинк.You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

Предположим, ListView содержит элемент с именем PortraitEllipse в шаблоне данных.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>

Чтобы подготовить подключенную анимацию с эллипсом, соответствующим заданному элементу списка, вызовите метод препареконнектеданиматион с уникальным ключом, элементом и именем "портраителлипсе".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");
}

Чтобы запустить анимацию с этим элементом в качестве назначения, например при переходе назад из подробного представления, используйте тристартконнектеданиматионасинк.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

Согласованная анимация

Координированная анимация — это особый тип анимации входа, в которой элемент отображается вместе с целевым объектом «подключенная анимация», в сочетании с анимированным элементом «Connected 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. На этих изображениях интерфейс подписи элемента анимирует использование согласованной анимации.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. Координированные элементы будут "одновременно" рядом с подключенным элементом, чтобы элементы оставались полностью скоординированными.The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

Используйте перегрузку двух параметров TryStart, чтобы добавить согласованные элементы в подключенную анимацию.Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. В этом примере показана скоординированная анимация макета сетки с именем "Дескриптионрут", которая входит в совместное использование с подключенным элементом анимации с именем "Коверимаже".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’s and don’ts

  • Используйте подключенную анимацию для переходов между страницами, когда исходная и целевая страница содержат общий элемент.Use a connected animation in page transitions where an element is shared between the source and destination pages.
  • Используйте гравитиконнектеданиматионконфигуратион для прямой навигации.Use GravityConnectedAnimationConfiguration for forward navigation.
  • Используйте директконнектеданиматионконфигуратион для обратной навигации.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.
  • Используйте суппресснавигатионтранситионинфо , чтобы предотвратить анимацию перехода в кадре , если используется коннектеданиматионсервице, так как подключенная анимация не предназначена для одновременного использования с переходами по умолчанию.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