Question

我非常喜欢iOS上的父/子页面与UI导航控制器及其子视图控制器的组合之间页面转换的外观。当子页面从右侧缓慢滑入时，我喜欢父页面向左滑动的动画。这用于许多iOS应用程序和iOS设置页面。我想在XAML中为UWP页面框架实现这种类型的导航动画有没有人知道如何创建这些类型的页面过渡，然后允许它是可逆的，这样如果你导航到一个页面，然后使用Frame.GoBack（）返回，动画可以来回切换这些页面？

非常感谢，瑞克

Answer 1

您需要以这种方式在导航目标网页中添加几行代码：

<Page
x:Class="UwpTransition.Pages.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UwpTransition.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<!--Adding Animation-->
<Page.Transitions>
    <TransitionCollection>
        <EdgeUIThemeTransition Edge="Left"
                               x:Name="EntranceAnimation" />
    </TransitionCollection>
</Page.Transitions>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</Grid>
</Page>

在后面的代码中使用此代码使转换从右而不是左进入：

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if(e.NavigationMode == NavigationMode.Back)
        EntranceAnimation.Edge = EdgeTransitionLocation.Right;

    base.OnNavigatedTo(e);
}

Answer 2

查看已连接的动画：https://docs.microsoft.com/en-us/windows/uwp/design/motion/connected-animation

虽然不完全符合您的要求，但Connected Animations可用于构建符合Fluent Design的沉浸式体验。您希望过渡对Windows用户来说是原生的，而不是复制iOS体验。

Answer 3

这种水平滑动方式比上述所有方式都更好，更平滑：

Task<GraphServiceClient>

请检查horizontal-slide, ms docs

如何在iOS等UWP应用中在XAML中实现自定义动画页面转换？

3 个答案: