.NET MAUI导航动画

Question

.NET MAUI导航动画

6

如果我想在 MAUI 中将页面从一个过渡到另一个并实现动画效果，我需要通过 true 值来激活它。

await Shell.Current.GoToAsync($"//{nameof(DashboardPage)}", true);

这将使页面从右到左进行过渡动画。有没有办法反转过渡 => 从左到右？有什么建议吗？我在 MAUI 文档中没有看到这个选项。有什么诀窍吗？

- user117911

我不认为 MAUI 原生支持那个功能。也许你可以通过使用映射器来针对每个平台解决这个问题: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-7.0 - Julian

你如何添加页面过渡动画？是否有任何教程可用？它是否也适用于Windows？ - 10101

对于 Xamarin.Forms，MAUI 的前身，目前很少有示例和库可用。至于 MAUI，我认为目前还没有任何教程，至少我没有找到。由于在 Xamarin.Forms 中需要使用自定义渲染器，因此我预计在 MAUI 中您也需要做类似的事情，只不过您将使用映射器。不过这只是一种假设。 - Julian

要切换到另一页，只需在GoAsync或PopAsync函数调用中添加true或false（用于动画效果），例如Shell.Current.PopAsync(true); - user117911

@user117911 这是你需要的吗？在删除页面时添加动画效果？你的问题很容易被误解。我的理解是你想要动画从左到右播放。但你没有明确说明这是用于消失的页面（即使用页面动画的默认行为）。 - Julian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Poulpynator · Accepted Answer

遇到相同的问题，最终我创建了一个自定义的ContentPage，其中包含自定义的导航方法：

<ContentPage
Opacity="0"
x:Class="MauiTest.AnimatedPage"
x:Name="AnimatedContainer"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" />

代码后台：

public partial class AnimatedPage : ContentPage
{
    public AnimatedPage()
    {
        InitializeComponent();

        AnimatedContainer.FadeTo(1, 100);
        AnimatedContainer.Content = Content;
    }

    public async Task AnimatedGoTo(string pUrl)
    {
        await AnimatedContainer.FadeTo(0, 100);
        await Shell.Current.GoToAsync(pUrl, true);
    }
}

然后在每个需要动画效果的页面上：

<local:AnimatedPage
    Title="NewPage1"
    x:Class="MauiTest.NewPage1"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:local="clr-namespace:MauiTest"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout>
        <Label
            HorizontalOptions="Center"
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" />
        <Button
            Clicked="Button_Clicked"
            Text="Go back" />
    </VerticalStackLayout>
</local:AnimatedPage>

代码背后：

public partial class NewPage1 : AnimatedPage
{
    public NewPage1()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        base.AnimatedGoTo("//main");
    }
}

有了这个基础，您可以在过渡中使用任何基本动画。