Подключенная анимация для приложений Windows

Подключенные анимации позволяют сделать навигацию динамичной и наглядной, анимируя переход элемента от одного представления к другому. Это помогает пользователю поддерживать контекст и обеспечивать непрерывность между представлениями.

В подключенной анимации элемент отображается как "продолжить" между двумя представлениями во время изменения содержимого пользовательского интерфейса, перемещающийся по экрану с его расположения в исходном представлении до его назначения в новом представлении. Это подчеркивает общее содержимое между представлениями и создает красивый и динамический эффект в рамках перехода.

Важные API: класс ConnectedAnimation, класс ConnectedAnimationService

Примеры

Коллекция WinUI 2
	Если у вас установлено приложение коллекции WinUI 2, щелкните здесь, чтобы открыть приложение и просмотреть подключенную анимацию в действии. Получить приложение из коллекции WinUI 2 в Microsoft Store Получить исходный код (GitHub)

В этом коротком видео приложение использует подключенную анимацию для анимации изображения элемента, так как оно "продолжает" стать частью заголовка следующей страницы. Эффект помогает поддерживать контекст пользователя во время перехода.

Подключенная анимация и система Fluent Design

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Подключенная анимация — это компонент система Fluent Design, который добавляет движение в приложение. См. сведения о системе проектирования Fluent Design.

Почему подключенная анимация?

При переходе между страницами важно понимать, какое новое содержимое отображается после навигации и как оно связано с намерением при переходе. Подключенные анимации обеспечивают мощную визуальную метафору, которая подчеркивает связь между двумя представлениями, нарисовав фокус пользователя на содержимое, совместно используемое между ними. Кроме того, подключенные анимации добавляют визуальный интерес и полируются на навигацию по страницам, которые помогают различать дизайн движения приложения.

Использование подключенной анимации

Подключенные анимации обычно используются при изменении страниц, хотя они могут применяться к любому интерфейсу, в котором вы изменяете содержимое в пользовательском интерфейсе и хотите, чтобы пользователь поддерживал контекст. Следует использовать подключенную анимацию вместо детализации перехода навигации при наличии изображения или другого пользовательского интерфейса, доступного между исходным и целевым представлениями.

Настройка подключенной анимации

Начиная с Windows 10 версии 1809, подключенные анимации еще больше воплощают дизайн Fluent, предоставляя конфигурации анимации, адаптированные специально для навигации по страницам вперед и назад.

Укажите конфигурацию анимации, задав свойство Configuration в ConnectedAnimation. (Мы рассмотрим примеры этого в следующем разделе.)

В этой таблице описываются доступные конфигурации. Дополнительные сведения о принципах движения, применяемых в этих анимациях, см. в разделе "Направление" и "гравитация".

Конфигурация ConnectedAnimationService

Класс ConnectedAnimationService имеет два свойства, которые применяются к отдельным анимациям, а не к общей службе.

• DefaultDuration
• DefaultEasingFunction

Чтобы добиться различных эффектов, некоторые конфигурации игнорируют эти свойства в ConnectedAnimationService и используют собственные значения, как описано в этой таблице.

Реализация подключенной анимации

Настройка подключенной анимации включает два шага.

1. Подготовьте объект анимации на исходной странице, который указывает системе, что исходный элемент будет участвовать в подключенной анимации.
2. Запустите анимацию на целевой странице, передав ссылку на целевой элемент.

При переходе на исходную страницу вызовите ConnectedAnimationService.GetForCurrentView , чтобы получить экземпляр ConnectedAnimationService. Чтобы подготовить анимацию, вызовите PrepareToAnimate в этом экземпляре и передайте уникальный ключ и элемент пользовательского интерфейса, который вы хотите использовать в переходе. Уникальный ключ позволяет получить анимацию позже на целевой странице.

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

При возникновении навигации запустите анимацию на целевой странице. Чтобы запустить анимацию, вызовите ConnectedAnimation.TryStart. Вы можете получить правильный экземпляр анимации, вызвав ConnectedAnimationService.GetAnimation с уникальным ключом, предоставленным при создании анимации.

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

Переадресация навигации

В этом примере показано, как использовать ConnectedAnimationService для создания перехода для переадресации между двумя страницами (Page_A на Page_B).

Рекомендуемая конфигурация анимации для переадресации — GravityConnectedAnimationConfiguration. Это значение по умолчанию, поэтому не нужно задавать свойство Configuration, если вы не хотите указать другую конфигурацию.

Настройте анимацию на исходной странице.

<!-- 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();
}

Запустите анимацию на целевой странице.

<!-- 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);
    }
}

Обратная навигация

Для обратной навигации (Page_B до Page_A) выполните те же действия, но исходные и целевые страницы будут отменены.

Когда пользователь переходит обратно, он ожидает, что приложение будет возвращено в предыдущее состояние как можно скорее. Поэтому рекомендуемая конфигурация — DirectConnectedAnimationConfiguration. Эта анимация быстрее, более прямая и использует замедление.

Настройте анимацию на исходной странице.

// 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();
    }
}

Запустите анимацию на целевой странице.

// 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);
    }
}

Между тем, когда анимация настроена и когда она запущена, исходный элемент отображается заморожен над другим пользовательским интерфейсом в приложении. Это позволяет одновременно выполнять любые другие анимации перехода. По этой причине не следует ждать более 250 миллисекунда между двумя шагами, так как присутствие исходного элемента может стать отвлекающим. Если вы подготавливаете анимацию и не запускаете ее в течение трех секунд, система удаляет анимацию и все последующие вызовы TryStart завершаются ошибкой.

Подключенная анимация в интерфейсах списка и сетки

Часто требуется создать подключенную анимацию из списка или элемента управления сеткой. Для упрощения этого процесса можно использовать два метода в ListView и GridView, PrepareConnectedAnimation и TryStartConnectedAnimationAsync.

Например, предположим, что у вас есть listView , содержащий элемент с именем "PortraitEllipse" в шаблоне данных.

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

Чтобы подготовить подключенную анимацию с многоточием, соответствующим заданному элементу списка, вызовите метод PrepareConnectedAnimation с уникальным ключом, элементом и именем "PortraitEllipse".

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

Чтобы запустить анимацию с этим элементом в качестве назначения, например при переходе обратно из представления сведений, используйте TryStartConnectedAnimationAsync. Если вы только что загрузили источник данных для ListView, TryStartConnectedAnimationAsync будет ожидать запуска анимации до создания соответствующего контейнера элементов.

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");
        }
    }
}

Координируемая анимация

Координируемая анимация — это особый тип анимации входа, где элемент отображается вместе с целевым объектом подключенной анимации, анимируя в тандеме с подключенным элементом анимации при перемещении по экрану. Координированные анимации могут добавить больше визуального интереса к переходу и дополнительно привлечь внимание пользователя к контексту, совместно используемому между исходными и целевыми представлениями. В этих изображениях пользовательский интерфейс заголовка для элемента анимирует с помощью скоординированной анимации.

Если координируемая анимация использует конфигурацию гравитации, гравитация применяется как к подключенному элементу анимации, так и к согласованным элементам. Согласованные элементы будут "swoop" вместе с подключенным элементом, чтобы элементы оставались действительно согласованными.

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

Делать и не делать

• Используйте подключенную анимацию в переходах страниц, где элемент совместно используется между исходными и целевыми страницами.
• Используйте GravityConnectedAnimationConfiguration для навигации вперед.
• Используйте DirectConnectedAnimationConfiguration для обратной навигации.
• Не подождите по сетевым запросам или другим длительным асинхронным операциям между подготовкой и запуском подключенной анимации. Возможно, потребуется предварительно загрузить необходимые сведения для выполнения перехода заранее или использовать образ заполнителя с низким разрешением во время загрузки изображения с высоким разрешением в целевом представлении.
• Используйте SuppressNavigationTransitionInfo , чтобы предотвратить анимацию перехода в кадре , если используется ConnectedAnimationService, так как подключенные анимации не предназначены для одновременного использования с переходами навигации по умолчанию. Дополнительные сведения об использовании переходов навигации см. в разделе NavigationThemeTransition .

Связанные статьи

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition