Подключенная анимация для приложений Windows
Подключенные анимации позволяют сделать навигацию динамичной и наглядной, анимируя переход элемента от одного представления к другому. Это помогает пользователю сохранять контекст и обеспечивает преемственность представлений.
В подключенной анимации элемент отображается для "продолжения" между двумя представлениями во время изменения содержимого пользовательского интерфейса, пролетая по экрану от его расположения в исходном представлении до места назначения в новом представлении. Это подчеркивает общее содержимое между представлениями и создает красивый и динамический эффект в рамках перехода.
Важные API: класс ConnectedAnimation, класс ConnectedAnimationService
Примеры
| Коллекция WinUI 2 | |
|---|---|
 |
Если у вас установлено приложение коллекции WinUI 2 , щелкните здесь, чтобы открыть приложение и увидеть подключенную анимацию в действии. |
В этом коротком видео приложение использует подключенную анимацию для анимации изображения элемента, так как оно "продолжается", чтобы стать частью заголовка следующей страницы. Этот эффект помогает сохранить контекст пользователя во время перехода.
Подключенная анимация и система проектирования Fluent Design
Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Подключенная анимация — это компонент системы проектирования Fluent Design, добавляющий движение в ваше приложение. См. сведения о системе проектирования Fluent Design.
Преимущества подключенной анимации
При переходе с одной страницы на другую пользователю важно понимать, какое новое содержимое представлено после перехода и как оно соотносится с целью перехода. Подключенная анимация — это яркая визуальная аналогия, которая подчеркивает связь между двумя представлениями, привлекая внимание пользователя к их общему содержимому. Кроме того, благодаря подключенной анимации навигация страницы выглядит интереснее и профессиональнее, выделяя ваше приложение благодаря проработке движения.
Сценарии использования подключенной анимации
Подключенные анимации обычно используются при переходе на другую страницу, хотя их можно применять при любой смене контента в пользовательском интерфейсе, если нужно сохранить контекст пользователя. Рекомендуем использовать подключенную анимацию вместо эффекта винта в переходах навигации, если исходное и целевое представления содержат общее изображение или другой элемент пользовательского интерфейса.
Настройка подключенной анимации
Важно!
Для этой функции требуется, чтобы целевая версия приложения была Windows 10, версия 1809 (ПАКЕТ SDK 17763) или более поздней версии. Свойство Configuration недоступно в более ранних пакетах SDK. Вы можете выбрать минимальную версию ниже пакета SDK 17763 с помощью адаптивного кода или условного XAML. Дополнительные сведения см. в разделе Приложения с адаптивной версией.
Начиная с Windows 10, версия 1809, подключенные анимации дополнительно воплощают дизайн Fluent, предоставляя конфигурации анимации, специально предназначенные для навигации вперед и назад по страницам.
Вы можете указать конфигурацию анимации, задав свойство Configuration в ConnectedAnimation. (Примеры этого мы покажем в следующем разделе.)
В этой таблице описаны доступные конфигурации. Дополнительные сведения о принципах движения, применяемых в этих анимациях, см. в разделе Направленность и гравитация.
| GravityConnectedAnimationConfiguration |
|---|
| Эта конфигурация используется по умолчанию и рекомендуется для прямого перехода. |
| При переходе пользователя вперед в приложении (от A до B) подключенный элемент физически "извлекает страницу". При этом элемент, как представляется, движется вперед в z-пространстве и падает немного, как эффект гравитации захвата. Чтобы преодолеть влияние гравитации, элемент набирает скорость и ускоряется в свою конечную позицию. Результатом является анимация масштабирования и падения. |
| DirectConnectedAnimationConfiguration |
|---|
| По мере того как пользователь перемещается назад в приложении (от B до A), анимация становится более прямой. Подключенный элемент линейно преобразуется из B в A с помощью функции замедления кубического безье. Возможности обратного визуального элемента возвращают пользователя в предыдущее состояние как можно быстрее, сохраняя при этом контекст потока навигации. |
| BasicConnectedAnimationConfiguration |
|---|
| Это анимация по умолчанию (и только она используется в версиях до Windows 10, версия 1809 (ПАКЕТ SDK 17763). |
Конфигурация ConnectedAnimationService
Класс ConnectedAnimationService имеет два свойства, которые применяются к отдельным анимациям, а не к общей службе.
Для достижения различных эффектов некоторые конфигурации игнорируют эти свойства в ConnectedAnimationService и используют собственные значения, как описано в этой таблице.
| Конфигурация | Учитывает значение DefaultDuration? | Уважает DefaultEasingFunction? |
|---|---|---|
| Сила тяготения | Да | Да* *В базовом переводе из A в B используется эта функция реалистичной анимации, но "гравитационное погружение" имеет собственную функцию реалистичной анимации. |
| Прямой доступ | Нет Анимирует более 150 мс. |
Нет Использует функцию замедления. |
| Basic | Да | Да |
Реализация подключенной анимации
Настройка подключенной анимации включает два этапа:
- Подготовьте объект анимации на исходной странице, который указывает системе, что исходный элемент будет участвовать в подключенной анимации.
- Запустите анимацию на конечной странице, передав ссылку на элемент назначения.
При переходе с исходной страницы вызовите 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");
}
}
}
Согласованная анимация
Координируемая анимация — это особый тип анимации входа, в которой элемент отображается вместе с подключенным целевым объектом анимации, анимируется в тандеме с подключенным элементом анимации при перемещении по экрану. Согласованная анимация может сделать переход визуально интереснее и привлечь внимание пользователя к контексту, общему для исходного и целевого представлений. На этих изображениях интерфейс подписи элемента анимирует использование согласованной анимации.
Если скоординированная анимация использует конфигурацию гравитации, гравитация применяется как к подключенному элементу анимации, так и к координированным элементам. Скоординированные элементы будут "надвигаться" рядом с соединенным элементом, чтобы элементы оставались по-настоящему скоординированными.
Используйте перегрузку двух параметров 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 , чтобы предотвратить анимацию перехода в Frame , если вы используете ConnectedAnimationService, так как подключенные анимации не предназначены для одновременного использования с переходами навигации по умолчанию. Дополнительную информацию об использовании переходов навигации см. NavigationThemeTransition.
Похожие статьи
Windows developer
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по