如何在启动画面中应用 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

所以你可以简化代码隐藏，PushAsyncreturns一个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 不提供视图大小，使用 FillAndExpand 尝试匹配包含查看。

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

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

How to apply Lottie animation in splash screen?

c#

animation

splash-screen

xamarin

lottie