页面内容的动画变化

Question

我在页面上添加了简单的动画。一切都按预期进行。然而，我想添加一些额外的逻辑。当前动画只在启动应用程序时出现，否则不会触发OnAppearing。我有两个按钮在项目之间导航。每次点击这些按钮时如何执行动画?

目前我正在使用这个动画内容在HomePage.xaml.cs:

protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(500);
await this.TransitionIn();
}

按钮为ViewModel.cs中的ICommands

是否有一些方法重写像pagerrefresh或ContentRefresh或类似的东西?如果没有，是否有其他方法可以触发动画?

我在应用程序中使用MVVM模式。

Answer 1

有许多针对视觉元素的不同属性的动画类，在.NET MAUI中，典型的基本动画在一段时间内逐渐将属性从一个值更改为另一个值。

根据你的描述，你可以用一个自定义动画方法创建一个自定义ContentPage，它将在页面之间导航时被调用。

下面的代码示例供您参考:

1。使用自定义动画方法创建自定义ContentPage，如下所示:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp24.MyAnimatedPage"
x:Name="MyAnimatedpage"
Title="MyAnimatedPage">


</ContentPage>

public partial class MyAnimatedPage : ContentPage 
{
      public MyAnimatedPage()
      {
            InitializeComponent();
            MyAnimatedpage.RotateTo(360, 1000);
MyAnimatedpage.Content = Content;
      }
      public async Task AnimatedGoto(string url)
      {
await MyAnimatedpage.RotateXTo(360, 1000);
await Shell.Current.GoToAsync(url, true);
}
}

2. 在HomePage中使用它，我在Page1中使用它，如下所示:

<?xml version="1.0" encoding="utf-8" ?> 
<local:MyAnimatedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp24.Page1"
xmlns:local="clr-namespace:MauiApp24"
Title="Page1">
<VerticalStackLayout>
<Label 
Text="Welcome to Page 1!"
VerticalOptions="Center" 
HorizontalOptions="Center" />
<Button Clicked="Button_Clicked"></Button>
</VerticalStackLayout>
</local:MyAnimatedPage>

public partial class Page1 : MyAnimatedPage 
{
      public Page1()
      {
            InitializeComponent();
      }
async void Button_Clicked(object sender, EventArgs e)
{
            await base.AnimatedGoto("//MainPage");
}
}