c# - 如何在启动画面中应用 Lottie 动画？

Question

我正在尝试在启动画面中使用 Lottie 动画。

我创建了一个包含我的 AnimationView 的新 xaml 页面:

<StackLayout>
    <forms:AnimationView 
        x:Name="SplashView" 
        Animation="hello.json"
        Loop="true"
        AutoPlay="true"
        IsEnabled="True"
        IsPlaying="True"
        IsVisible="True"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
</StackLayout>

当应用程序启动时，MainPage 应该是包含 AnimationView 的页面。我添加了一个事件“SplashView.OnFinish”，因此当动画完成时，使用 NavigationPage.PushAsync 将页面更改为我的主页。

下面是代码

public SplashScreen ()
{
    InitializeComponent ();
    NavigationPage.SetHasNavigationBar(this, false);

    SplashView.Play();
    SplashView.OnFinish += SplashView_OnFinish;
}

protected override void OnAppearing()
{
    base.OnAppearing();
    SplashView.Play();
}

private void SplashView_OnFinish(object sender, EventArgs e)
{
    Navigation.PushAsync(new MainPage());
}

一切正常，但我看不到动画，只有一个白页。

Navigation.PushAsync 有效，但动画不显示。

我尝试了 OnAppearing 方法来触发我的动画开始，但仍然不起作用。

Answer 1

所以你可以简化代码隐藏，PushAsync返回一个Task，所以你需要await它。

public partial class SplashPage : ContentPage
{
    public SplashPage()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
    }

    async void SplashView_OnFinish(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new MainPage());
    }
}

对于 XAML，您不希望启用循环，因为永远不会调用 OnFinish 处理程序。您可以提供 OnFinish 处理程序等...最大的问题是仅对 vert/horz 选项使用 Center 不会为 View 提供大小，请使用 FillAndExpand 尝试匹配包含的 View 。

<forms:AnimationView
    x:Name="SplashView"
    Animation="hello.json"
    Loop="false" 
    AutoPlay="true"
    OnFinish="SplashView_OnFinish"
    VerticalOptions="FillAndExpand" 
    HorizontalOptions="FillAndExpand" />