MAUI怎么实现启动页动画 MAUI SplashScreen教程

来源:这里教程网 时间:2026-02-21 17:36:14 作者:

MAUI 本身不支持传统意义上的“启动页动画”(比如动态 SVG、Lottie 或自定义动画),它的 SplashScreen 是静态的,由平台原生机制控制:Android 用

launch_screen.xml
,iOS 用
LaunchScreen.storyboard
,Windows 用
SplashScreen.png
。真正的“动画效果”只能在应用启动后、首屏显示前,用 MAUI 页面模拟实现——也就是常说的「伪启动页」或「过渡页」。

为什么 MAUI 的 SplashScreen 是静态的

MAUI 的

SplashScreen
实际上只是把各平台原生启动图配置封装了一层。它在 .NET 运行时加载完成前就已显示,此时 C# 代码尚未执行,无法触发动画。所以你看到的“启动画面”本质是操作系统绘制的一张图,不能动、不能交互、不能编程控制。

用 MAUI 页面模拟带动画的启动页(推荐做法)

核心思路:让 App 启动后立刻跳转到一个全屏的

SplashPage.xaml
,在里面用
Animation
VisualStateManager
或第三方库(如
Microsoft.Maui.Controls.Shapes
+
RotateAnimation
)做动画,完成后自动导航到主页面。

新建一个
SplashPage.xaml
,设置
Background="Black"
或匹配品牌色
放一个
Image
Label
显示 Logo,加
Opacity="0"
初始隐藏
OnAppearing()
中用
this.FadeTo(1, 300)
淡入,再用
ScaleTo(1.2, 200).ScaleTo(1, 150)
做弹性缩放
动画结束后调用
Shell.Current.GoToAsync("//MainPage")
跳转
App.xaml.cs
OnStart()
里确保首次启动走这个流程,避免重复显示

平台级优化建议(提升真实感)

虽然不能动画,但可以尽量让原生 SplashScreen 和你的 MAUI 模拟页无缝衔接:

Android:把
Resources/drawable/launch_screen.xml
的背景色、Logo 大小/位置,和
SplashPage.xaml
完全一致
iOS:在
Resources/Assets.xcassets/LaunchScreen.imageset/
放和 MAUI 页面同尺寸、同透明度的 PNG
Windows:
Platforms/Windows/App.xaml
中确认
SplashScreenImage
路径正确,图片分辨率适配不同缩放比(100%, 125%, 150%)

进阶:用 Lottie 或 SkiaSharp 做更酷的启动动画

如果需要复杂动画(比如加载进度、路径动画),可引入:

Microsoft.Maui.Controls.Compatibility
+
Lottie
(需配合
CommunityToolkit.Maui.Views.LottieView
SkiaSharp.Views.Maui
自绘动画(适合高级定制,但开发成本高)
注意:Lottie 文件要放在
Resources/Raw
(Android)或
Resources
(iOS/macOS),并确保构建操作设为
MauiAsset

基本上就这些。MAUI 启动页动画不是“打开开关就能动”,而是靠原生静态图 + MAUI 页面动画组合实现。关键在视觉连贯性和时机控制——让系统图闪一下就立刻接上你的动画页,用户根本察觉不到断层。

相关推荐

热文推荐