Skip to content

隐藏动画

动画作用于本包保持的原生启动内容,而不是操作系统最早显示的 Launch Screen。

动画类型

动画效果适合场景
none立即移除最快交接、Android system 模式
fade透明度淡出大多数静态启动画面
scaleFade放大并淡出Logo 向外扩散的效果
slideUpFade上移并淡出内容从下方接管的页面
zoomOutFade缩小并淡出让首屏视觉向前进入

基本用法

ts
SplashScreen.hide({ animation: 'fade' });

SplashScreen.hide({
  animation: 'slideUpFade',
  duration: 250,
  easing: 'easeInOut',
});

SplashScreen.hide({
  animation: 'zoomOutFade',
  duration: 250,
  scale: 0.92,
  easing: 'easeOut',
});

参数默认值

参数默认值限制
duration动画为 250 ms;none0负数会规范化为 0
scalescaleFade1.08限制在 1.01.3
scalezoomOutFade0.92限制在 0.71.0
easingeaseOutlineareaseIneaseOuteaseInOut

平台差异

  • Android dialog:动画作用于透明 Dialog window 上的启动内容 View。
  • Android system:直接退出系统启动屏,不执行本包的自定义动画。
  • iOS:动画作用于由 Launch Screen storyboard 创建的原生覆盖层。

设计建议

  • 保持在 180 到 320 ms,避免启动完成后仍长时间遮挡内容。
  • 启动图片和首屏共享背景色,能显著降低交接时的闪烁感。
  • 不要用固定延时等待动画;在首屏准备完成时直接调用 hide()
  • 用户关闭系统动画或开启 Reduce Motion 时,双端都会跳过动画。

Released under the MIT License.