Capacitor Splash Screen

cap-go/capgo-skills/skills/capacitor-splash-screen

作者 cap-go2cfb277a1488無授權條款72 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

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

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,    },  },};

// 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,});

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

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

Size	Usage
2732x2732	iPad Pro 12.9"
2048x2732	iPad Pro portrait
2732x2048	iPad Pro landscape
1668x2388	iPad Pro 11"
1536x2048	iPad
1242x2688	iPhone XS Max
828x1792	iPhone XR
1125x2436	iPhone X/XS
1242x2208	iPhone Plus
750x1334	iPhone 8
640x1136	iPhone SE

Android Sizes

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>

<!-- 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>

<!-- 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>

<!-- 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  },},

// 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,});

// 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';  });}

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

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

Troubleshooting

Resources

Capacitor Splash Screen: https://capacitorjs.com/docs/apis/splash-screen
Capacitor Assets: https://github.com/ionic-team/capacitor-assets
Android Splash Screens: https://developer.android.com/develop/ui/views/launch/splash-screen

來源與署名

來源：cap-go/capgo-skills位於skills/capacitor-splash-screen提交2cfb277

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Density	Size
mdpi	320x480
hdpi	480x800
xhdpi	720x1280
xxhdpi	960x1600
xxxhdpi	1280x1920

Issue	Solution
White flash	Match splash background to app
Stretching	Use correct asset sizes
Not hiding	Call `hide()` manually
Dark mode wrong	Add values-night resources

Capacitor Splash Screen

Splash Screen in Capacitor

When to Use This Skill

Quick Start

Install Plugin

Basic Configuration

Programmatic Control

Generate Assets

Using Capacitor Assets

iOS Sizes

Android Sizes

iOS Storyboard

Android Configuration

XML Splash Screen (Android 11+)

Colors

Dark Mode Support

Animated Splash

Lottie Animation

Best Practices

Troubleshooting

Resources

來源與署名

更多來自 cap-go/capgo-skills 的技能

Webapp To Capacitor

Tailwind Capacitor

Safe Area Handling

Konsta Ui

Ios Android Logs

Ionic Design

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices