HTML5转APP启动页动画常不生效，因打包工具默认仅支持静态启动图，Web层在splash期间被挂起，需通过原生插件（如cordova-plugin-splashscreen）手动控制显隐时机，uni-app等则只能模拟伪动画。
HTML5转APP时启动页动画为什么经常不生效
因为绝大多数 HTML5 打包工具（如 Cordova、Capacitor、uni-app、HBuilderX）默认只支持静态启动图（splash image），不自动执行 JavaScript 或渲染 DOM 动画。所谓“启动页动画”，实际是「原生层控制的过渡效果」，不是网页里用 CSS @keyframes 或 requestAnimationFrame 能直接驱动的。
常见错误现象包括：document.addEventListener('deviceready', ...) 触发太晚、splashscreen.hide() 调用后白屏闪动、动画在 iOS 上卡顿、Android 上黑屏跳转。
- 启动页生命周期由原生容器控制，Web 层在 splash 显示期间基本被挂起（尤其是 iOS）
- 必须通过平台特定 API 控制显示/隐藏时机，不能依赖
window.onload或DOMContentLoaded - uni-app 的
App.vue中onLaunch在 splash 隐藏后才触发，无法参与动画过程
Cordova/ Capacitor 中启用可动画的启动页
核心思路：用原生插件接管 splash，并在 Web 加载完成后，用 JS 触发一个可控的淡出或缩放过渡，再隐藏原生 splash。
以 Cordova 为例，需安装两个关键插件：
立即学习“前端免费学习笔记（深入）”；
-
cordova-plugin-splashscreen（控制显隐） -
cordova-plugin-ionic-webview（提升 WebView 渲染一致性，尤其对 CSS 动画）
配置 config.xml 关键项：
<pre class="brush:php;toolbar:false;"ference name="SplashScreen" value="screen" /> <pre class="brush:php;toolbar:false;"ference name="SplashScreenDelay" value="0" /> <pre class="brush:php;toolbar:false;"ference name="AutoHideSplashScreen" value="false" />
这样 Web 加载完成时不会自动隐藏 splash，你可以在 JS 中手动控制：
document.addEventListener('deviceready', () => {
// 确保页面 DOM 和样式已就绪
setTimeout(() => {
navigator.splashscreen.hide(); // 此时才真正关闭原生 splash
}, 300);
});
注意：SplashScreenDelay=0 并非禁用 splash，而是把控制权完全交还给 JS；延迟设太小（如 0ms）会导致部分 Android 设备未渲染完就隐藏，出现白屏。
uni-app/HBuilderX 中模拟启动动画的实操限制
uni-app 没有暴露原生 splash 控制权给 JS，其 splashscreen 是纯静态图（iOS 的 LaunchScreen.storyboard + Android 的 splash.xml）。所谓“动画”，只能是「伪动画」：在首屏 Vue 页面内用 view 叠加一层遮罩，用 animation 或 transition 做入场效果，再延时 uni.hideLoading() 或移除遮罩。
- 必须在
pages.json中关闭默认 loading："splash": { "autoclose": true, "delay": 0 } - 首屏
onLoad中启动遮罩动画，但要注意：uni.getSystemInfoSync().platform === 'ios'下动画帧率可能受限 - 不能依赖
setTimeout精确计时，建议用requestAnimationFrame驱动关键帧，或监听uni.onNetworkStatusChange等真实就绪信号
示例遮罩结构（避免白屏）：
<view class="splash-overlay" v-if="showSplash"> <image src="/static/splash-logo.png" class="logo"/> <view class="spinner"/> </view>
真正可靠的启动动画只存在于原生层
如果需要帧率稳定、与系统启动无缝衔接的动画（比如 logo 缩放+渐变进入主界面），必须放弃“HTML5 转 APP”路径，改用原生开发或 Flutter/React Native 这类能深度控制启动流程的框架。Cordova/uni-app 的 Web 容器本质是「加载完再显示」，中间没有可插入的渲染通道。
容易被忽略的一点：iOS App Store 审核明确要求启动页必须与 Info.plist 中声明的 UILaunchStoryboardName 一致，任何 JS 动态生成的启动画面都可能被拒；Android 虽宽松，但 OEM 定制系统（如华为 EMUI）会强制截取首帧作为后台卡片预览，动态内容大概率显示为黑块或空白。
