Capacitor Splash Screen

Cap-go/capgo-skills/plugins/capacitor-features/skills/capacitor-splash-screen

作者 Cap-go2cfb277a148832bdb1a835b01e4de323687b498b无许可证72 个星标收录于 2026年10月9日更新于 2026年10月9日仓库今天更新

Guide to configuring splash screens in Capacitor apps including asset generation, animation, and programmatic control. Use this skill when users need to customize their app launch experience.

仅含说明Software Development
AI 生成的概览

指导配置 Capacitor 启动画面，涵盖资源、动画与编程控制。

功能
该技能提供在 Capacitor 应用中为 iOS 和 Android 配置与自定义启动画面的说明。内容涵盖插件安装、配置项、编程式显示与隐藏调用、使用 Capacitor Assets 生成资源、各平台尺寸、iOS storyboard 与 Android XML 设置、深色模式支持以及动画启动画面。还列出了最佳实践与故障排查建议。
适用场景
当用户想要自定义应用启动画面、需要启动画面资源、想要动画启动画面，或在 Capacitor 项目中排查启动画面问题时使用。
运行要求
Capacitor 应用项目；用于安装 @capacitor/splash-screen 及可选 @capacitor/assets 的 Node.js 与 npm；npx cap sync；网页动画启动画面可选 lottie-web。仅为说明文档，不含脚本。

Splash Screen in Capacitor

Configure and customize splash screens for iOS and Android.

When to Use This Skill

  • User wants to customize splash screen
  • User needs splash screen assets
  • User wants animated splash
  • User has splash screen issues

Quick Start

Install Plugin

bash
npm install @capacitor/splash-screennpx cap sync

Basic Configuration

typescript
// capacitor.config.tsimport type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {  plugins: {    SplashScreen: {      launchShowDuration: 2000,      launchAutoHide: true,      backgroundColor: '#ffffff',      androidSplashResourceName: 'splash',      androidScaleType: 'CENTER_CROP',      showSpinner: false,      splashFullScreen: true,      splashImmersive: true,    },  },};

Programmatic Control

typescript
import { SplashScreen } from '@capacitor/splash-screen';
// Hide after app is readyasync function initApp() {  // Initialize your app  await loadUserData();  await setupServices();
  // Hide splash screen  await SplashScreen.hide();}
// Show splash (useful for app refresh)await SplashScreen.show({  autoHide: false,});
// Hide with animationawait SplashScreen.hide({  fadeOutDuration: 500,});

Generate Assets

Using Capacitor Assets

bash
npm install -D @capacitor/assets
# Place source images in resources/# resources/splash.png (2732x2732 recommended)# resources/splash-dark.png (optional)
npx capacitor-assets generate

iOS Sizes

SizeUsage
2732x2732iPad Pro 12.9"
2048x2732iPad Pro portrait
2732x2048iPad Pro landscape
1668x2388iPad Pro 11"
1536x2048iPad
1242x2688iPhone XS Max
828x1792iPhone XR
1125x2436iPhone X/XS
1242x2208iPhone Plus
750x1334iPhone 8
640x1136iPhone SE

Android Sizes

DensitySize
mdpi320x480
hdpi480x800
xhdpi720x1280
xxhdpi960x1600
xxxhdpi1280x1920

iOS Storyboard

xml
<!-- ios/App/App/Base.lproj/LaunchScreen.storyboard --><?xml version="1.0" encoding="UTF-8"?><document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0">    <scenes>        <scene sceneID="1">            <objects>                <viewController id="2" sceneMemberID="viewController">                    <view key="view" contentMode="scaleToFill" id="3">                        <rect key="frame" x="0" y="0" width="414" height="896"/>                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>                        <subviews>                            <imageView                                contentMode="scaleAspectFit"                                image="splash"                                translatesAutoresizingMaskIntoConstraints="NO"                                id="4">                            </imageView>                        </subviews>                        <constraints>                            <constraint firstItem="4" firstAttribute="centerX" secondItem="3" secondAttribute="centerX" id="5"/>                            <constraint firstItem="4" firstAttribute="centerY" secondItem="3" secondAttribute="centerY" id="6"/>                        </constraints>                    </view>                </viewController>            </objects>        </scene>    </scenes></document>

Android Configuration

XML Splash Screen (Android 11+)

xml
<!-- android/app/src/main/res/values/styles.xml --><resources>    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">        <item name="windowSplashScreenBackground">@color/splash_background</item>        <item name="windowSplashScreenAnimatedIcon">@drawable/splash</item>        <item name="windowSplashScreenAnimationDuration">1000</item>        <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>    </style></resources>

Colors

xml
<!-- android/app/src/main/res/values/colors.xml --><resources>    <color name="splash_background">#FFFFFF</color></resources>
<!-- android/app/src/main/res/values-night/colors.xml --><resources>    <color name="splash_background">#121212</color></resources>

Dark Mode Support

typescript
// capacitor.config.tsplugins: {  SplashScreen: {    launchAutoHide: false, // Control manually    backgroundColor: '#ffffff',    // iOS will use LaunchScreen.storyboard variations    // Android uses values-night/colors.xml  },},
typescript
// Detect dark mode and configureimport { SplashScreen } from '@capacitor/splash-screen';
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Show appropriate themed contentawait SplashScreen.hide({  fadeOutDuration: 300,});

Animated Splash

Lottie Animation

typescript
import { SplashScreen } from '@capacitor/splash-screen';
async function showAnimatedSplash() {  // Keep native splash while loading  await SplashScreen.show({ autoHide: false });
  // Load Lottie animation in web  const lottie = await import('lottie-web');
  // Show web-based animated splash  document.getElementById('splash-animation').style.display = 'block';
  const animation = lottie.loadAnimation({    container: document.getElementById('splash-animation'),    path: '/animations/splash.json',    loop: false,  });
  animation.addEventListener('complete', async () => {    // Hide native splash    await SplashScreen.hide({ fadeOutDuration: 0 });    // Hide web splash    document.getElementById('splash-animation').style.display = 'none';  });}

Best Practices

  1. Keep it fast - Under 2 seconds total
  2. Match branding - Use consistent colors/logo
  3. Support dark mode - Provide dark variants
  4. Don't block - Load essentials only
  5. Progressive reveal - Fade out smoothly

Troubleshooting

IssueSolution
White flashMatch splash background to app
StretchingUse correct asset sizes
Not hidingCall hide() manually
Dark mode wrongAdd values-night resources

Resources

来源与署名

来源：Cap-go/capgo-skills位于plugins/capacitor-features/skills/capacitor-splash-screen提交2cfb277

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 Cap-go/capgo-skills 的技能

Capgo Release Workflows

Cap-go

为 Capacitor 应用统筹 Capgo 实时更新、原生构建与应用商店发布的发布流程。

DevOps & Cloud72今天更新

Capgo Release Management

Cap-go

指导 Capgo OTA 发布流程：bundle 上传、兼容性检查、channel、清理与加密密钥。

DevOps & Cloud72今天更新

Capgo Cloud

Cap-go

为跨原生构建、OTA 发布、商店发布和组织管理的多步骤 Capgo 云端工作提供路由。

DevOps & Cloud72今天更新

Capacitor Mcp

Cap-go

指导为 Ionic 与 Capacitor 移动开发配置和使用 awesome-ionic-mcp 模型上下文协议服务器。

AI & Agents72今天更新

Capgo Organization Management

Cap-go

指导通过 Capgo CLI 进行 Capgo 账户查询和组织管理，包括成员与安全设置。

DevOps & Cloud72今天更新

Capgo Cli Usage

Cap-go

将通用的 Capgo CLI 请求路由到合适的 Capgo 子技能，并说明 CLI 命令与 MCP 配置。

DevOps & Cloud72今天更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新