feat(splash): 原生开屏改为品牌启动图

android/app/src/main/res/drawable-v21/launch_background.xml

@@ -1,4 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@color/splash_background" />
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/drawable/launch_background.xml

@@ -1,4 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@color/splash_background" />
+    <item>
+        <bitmap android:gravity="fill" android:src="@drawable/background"/>
+    </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/values-night-v31/styles.xml

@@ -5,6 +5,9 @@
     <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
         <item name="android:windowBackground">@drawable/launch_background</item>
         <item name="android:windowSplashScreenBackground">@color/splash_background</item>
-        <item name="android:windowSplashScreenAnimatedIcon">@android:color/transparent</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+    </style>
+    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
+        <item name="android:windowBackground">@color/splash_background</item>
     </style>
 </resources>

android/app/src/main/res/values-v31/styles.xml

@@ -5,6 +5,9 @@
     <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">@drawable/launch_background</item>
         <item name="android:windowSplashScreenBackground">@color/splash_background</item>
-        <item name="android:windowSplashScreenAnimatedIcon">@android:color/transparent</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
+    </style>
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">@color/splash_background</item>
     </style>
 </resources>

android/app/src/main/res/values/colors.xml

@@ -2,6 +2,6 @@
 <!-- Author: fruit.com.cn -->
 
 <resources>
-    <color name="splash_background">#FFF8F0</color>
+    <color name="splash_background">#1F1B16</color>
     <color name="ic_launcher_background">#FFF1E5</color>
 </resources>

ios/Runner/Assets.xcassets/LaunchBackground.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "background.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "LaunchImage.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "LaunchImage@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "LaunchImage@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios/Runner/Base.lproj/LaunchScreen.storyboard

@@ -9,9 +9,27 @@
         <scene sceneID="EHf-IW-A2E">
             <objects>
                 <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Ydg-fD-yQy"/>
+                        <viewControllerLayoutGuide type="bottom" id="xbc-2k-c8Z"/>
+                    </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                        <color key="backgroundColor" red="1" green="0.9725490196078431" blue="0.9411764705882353" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
+                            <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
+                            <constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
+                            <constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
+                            <constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
+                            <constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
+                        </constraints>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
@@ -19,4 +37,8 @@
             <point key="canvasLocation" x="53" y="375"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="LaunchImage" width="1152" height="1152"/>
+        <image name="LaunchBackground" width="1" height="1"/>
+    </resources>
 </document>

lib/core/theme/app_colors.dart

@@ -36,6 +36,9 @@ abstract final class AppColors {
   /// 页面背景。
   static const ink = Color(0xFFFFF8F0);
 
+  /// 原生开屏与冷启动过渡底色。
+  static const splashInk = Color(0xFF1F1B16);
+
   /// 页面顶部暖色渐变起点。
   static const surfaceTop = Color(0xFFFFE9D6);
 

lib/pages/home/home_view.dart

@@ -13,6 +13,7 @@ import '../../core/data/services/catalog_controller.dart';
 import '../../core/data/services/catalog_retry.dart';
 import '../../core/data/services/category_controller.dart';
 import '../../core/platform/haptics.dart';
+import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_bottom_nav.dart';
 import '../../core/widgets/catalog_debug_info.dart';
@@ -24,7 +25,6 @@ import '../discover/discover_view.dart';
 import '../create/create_view.dart';
 import '../mine/mine_types.dart';
 import '../player/player_view.dart';
-import '../splash/splash_page.dart';
 import '../mine/mine_view.dart';
 import 'home_binding.dart';
 import 'home_logic.dart';
@@ -87,7 +87,6 @@ class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
   @override
   Widget build(BuildContext context) {
     final catalog = context.watch<CatalogController>();
-    if (!catalog.settled) return const SplashPage();
     final l10n = AppLocalizations.of(context)!;
     return Theme(
       data: AppTheme.light(),
@@ -101,9 +100,14 @@ class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
     AppLocalizations l10n,
   ) {
     if (catalog.loading) {
-      return const Scaffold(
-        backgroundColor: Colors.transparent,
-        body: Center(child: CircularProgressIndicator()),
+      return AnnotatedRegion<SystemUiOverlayStyle>(
+        value: SystemUiOverlayStyle.light,
+        child: const Scaffold(
+          backgroundColor: AppColors.splashInk,
+          body: Center(
+            child: CircularProgressIndicator(color: AppColors.blue),
+          ),
+        ),
       );
     }
     if (catalog.error != null) {

lib/pages/splash/splash_page.dart

@@ -1,212 +0,0 @@
-// Author: fruit.com.cn
-
-import 'dart:ui';
-
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
-import '../../core/theme/app_colors.dart';
-
-const Color _markGlow = Color(0x33FF7A1A);
-const double _markSize = 112;
-const double _markRadius = 24;
-const double _logoGlowSize = 144;
-const double _logoGlowBlur = 40;
-const double _loaderSize = 22;
-const double _loaderStroke = 2;
-const String _markAsset = 'assets/icon/splash_mark.png';
-const Duration _introDuration = Duration(milliseconds: 1200);
-
-/// 品牌开屏：浅暖底上依次呈现水果标记、FruitShorts 与中文标语。
-class SplashPage extends StatefulWidget {
-  const SplashPage({super.key});
-
-  @override
-  State<SplashPage> createState() => _SplashPageState();
-}
-
-class _SplashPageState extends State<SplashPage>
-    with SingleTickerProviderStateMixin {
-  late final AnimationController _controller;
-  late final Animation<double> _logoScale;
-  late final Animation<double> _logoOpacity;
-  late final Animation<double> _brandReveal;
-  late final Animation<double> _taglineReveal;
-  late final Animation<double> _loadingReveal;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = AnimationController(vsync: this, duration: _introDuration)
-      ..forward();
-    _logoScale = Tween<double>(begin: 0.86, end: 1).animate(
-      CurvedAnimation(
-        parent: _controller,
-        curve: const Interval(0, 0.42, curve: Curves.easeOutBack),
-      ),
-    );
-    _logoOpacity = Tween<double>(begin: 0, end: 1).animate(
-      CurvedAnimation(
-        parent: _controller,
-        curve: const Interval(0, 0.42, curve: Curves.easeOut),
-      ),
-    );
-    _brandReveal = _reveal(0.125, 0.542);
-    _taglineReveal = _reveal(0.25, 0.667);
-    _loadingReveal = _reveal(0.417, 0.833);
-  }
-
-  Animation<double> _reveal(double begin, double end) {
-    return Tween<double>(begin: 0, end: 1).animate(
-      CurvedAnimation(
-        parent: _controller,
-        curve: Interval(begin, end, curve: Curves.easeOutCubic),
-      ),
-    );
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: SystemUiOverlayStyle.dark,
-      child: ColoredBox(
-        key: const Key('splash-screen'),
-        color: AppColors.ink,
-        child: Stack(
-          fit: StackFit.expand,
-          children: [
-            Center(
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  _logo(),
-                  const SizedBox(height: 24),
-                  _brand(),
-                  const SizedBox(height: 6),
-                  _tagline(),
-                ],
-              ),
-            ),
-            Align(
-              alignment: Alignment.bottomCenter,
-              child: Padding(
-                padding: const EdgeInsets.only(bottom: 48),
-                child: FadeTransition(
-                  key: const Key('splash-loading-fade'),
-                  opacity: _loadingReveal,
-                  child: const SizedBox.square(
-                    dimension: _loaderSize,
-                    child: CircularProgressIndicator(
-                      key: Key('splash-loading'),
-                      strokeWidth: _loaderStroke,
-                      color: AppColors.blue,
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
-  Widget _logo() {
-    return FadeTransition(
-      key: const Key('splash-logo-fade'),
-      opacity: _logoOpacity,
-      child: ScaleTransition(
-        scale: _logoScale,
-        child: SizedBox.square(
-          dimension: _logoGlowSize,
-          child: Stack(
-            alignment: Alignment.center,
-            children: [
-              ImageFiltered(
-                key: const Key('splash-logo-glow'),
-                imageFilter: ImageFilter.blur(
-                  sigmaX: _logoGlowBlur,
-                  sigmaY: _logoGlowBlur,
-                ),
-                child: Container(
-                  width: _markSize,
-                  height: _markSize,
-                  decoration: const BoxDecoration(
-                    shape: BoxShape.circle,
-                    gradient: RadialGradient(
-                      colors: [_markGlow, Color(0x00FF7A1A)],
-                    ),
-                  ),
-                ),
-              ),
-              ClipRRect(
-                borderRadius: BorderRadius.circular(_markRadius),
-                child: Image.asset(
-                  _markAsset,
-                  key: const Key('splash-logo-mark'),
-                  width: _markSize,
-                  height: _markSize,
-                  filterQuality: FilterQuality.medium,
-                  gaplessPlayback: true,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _brand() {
-    return FadeTransition(
-      key: const Key('splash-brand-fade'),
-      opacity: _brandReveal,
-      child: AnimatedBuilder(
-        animation: _brandReveal,
-        builder: (context, child) => Transform.translate(
-          offset: Offset(0, 12 * (1 - _brandReveal.value)),
-          child: child,
-        ),
-        child: const Text(
-          'FruitShorts',
-          key: Key('splash-brand'),
-          style: TextStyle(
-            color: AppColors.onSurface,
-            fontSize: 28,
-            fontWeight: FontWeight.w900,
-            fontFamily: 'Outfit',
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _tagline() {
-    return FadeTransition(
-      key: const Key('splash-tagline-fade'),
-      opacity: _taglineReveal,
-      child: AnimatedBuilder(
-        animation: _taglineReveal,
-        builder: (context, child) => Transform.translate(
-          offset: Offset(0, 8 * (1 - _taglineReveal.value)),
-          child: child,
-        ),
-        child: const Text(
-          '水果短剧',
-          key: Key('splash-tagline'),
-          style: TextStyle(
-            color: AppColors.muted,
-            fontSize: 13,
-            letterSpacing: 4,
-          ),
-        ),
-      ),
-    );
-  }
-}

pubspec.yaml

@@ -80,8 +80,6 @@ flutter:
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true
-  assets:
-    - assets/icon/splash_mark.png
 
   # To add assets to your application, add an assets section, like this:
   # assets:
@@ -125,12 +123,11 @@ flutter_launcher_icons:
 # 修改以下开屏配置后，必须重新执行：
 # dart run flutter_native_splash:create
 flutter_native_splash:
-  color: "#FFF8F0"
-  color_dark: "#FFF8F0"
+  color: "#1F1B16"
+  image: assets/icon/splash_logo.png
   android: true
   ios: true
   web: false
   android_12:
-    color: "#FFF8F0"
-    color_dark: "#FFF8F0"
-    icon_background_color: "#FFF8F0"
+    color: "#1F1B16"
+    image: assets/icon/splash_logo_android12.png

test/splash/splash_gate_test.dart

@@ -1,114 +0,0 @@
-// Author: fruit.com.cn
-
-import 'dart:async';
-
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_test/flutter_test.dart';
-import 'package:fruitshorts/core/data/models/drama.dart';
-import 'package:fruitshorts/core/data/models/home_feed.dart';
-import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
-import 'package:fruitshorts/core/data/services/catalog_controller.dart';
-import 'package:fruitshorts/core/theme/app_colors.dart';
-import 'package:fruitshorts/l10n/app_localizations.dart';
-import 'package:fruitshorts/pages/home/home_view.dart';
-import 'package:fruitshorts/pages/splash/splash_page.dart';
-import 'package:provider/provider.dart';
-
-void main() {
-  testWidgets('should_keep_splash_with_loading_until_home_feed_settles', (
-    tester,
-  ) async {
-    final repository = _PendingCatalog();
-    await tester.pumpWidget(
-      MaterialApp(
-        localizationsDelegates: AppLocalizations.localizationsDelegates,
-        supportedLocales: AppLocalizations.supportedLocales,
-        home: ChangeNotifierProvider(
-          create: (_) => CatalogController(repository)..load(),
-          child: const HomePage(),
-        ),
-      ),
-    );
-
-    expect(find.byKey(const Key('splash-screen')), findsOneWidget);
-    expect(find.byKey(const Key('splash-loading')), findsOneWidget);
-    expect(find.byKey(const Key('home-empty')), findsNothing);
-    final clip = tester.widget<ClipRRect>(find.byType(ClipRRect));
-    expect(clip.borderRadius, BorderRadius.circular(24));
-
-    repository.pending.complete(const HomeFeed());
-    await tester.pump();
-    await tester.pump();
-
-    expect(find.byKey(const Key('splash-screen')), findsNothing);
-    expect(find.byKey(const Key('home-empty')), findsOneWidget);
-  });
-
-  testWidgets('should_animate_brand_copy_and_loading_to_full_opacity', (
-    tester,
-  ) async {
-    await tester.pumpWidget(const MaterialApp(home: SplashPage()));
-
-    expect(find.byKey(const Key('splash-screen')), findsOneWidget);
-    expect(find.byKey(const Key('splash-brand')), findsOneWidget);
-    expect(find.byKey(const Key('splash-tagline')), findsOneWidget);
-    expect(find.byKey(const Key('splash-loading')), findsOneWidget);
-    final mark = tester.widget<Image>(
-      find.byKey(const Key('splash-logo-mark')),
-    );
-    expect((mark.image as AssetImage).assetName, 'assets/icon/splash_mark.png');
-    expect(mark.width, 112);
-    expect(mark.height, 112);
-    final glow = tester.widget<Container>(
-      find.descendant(
-        of: find.byKey(const Key('splash-logo-glow')),
-        matching: find.byType(Container),
-      ),
-    );
-    final glowGradient = (glow.decoration as BoxDecoration).gradient;
-    expect(
-      (glowGradient as RadialGradient).colors.first,
-      const Color(0x33FF7A1A),
-    );
-    expect(
-      tester.widget<ColoredBox>(find.byKey(const Key('splash-screen'))).color,
-      AppColors.ink,
-    );
-    expect(
-      tester.widget<Text>(find.byKey(const Key('splash-brand'))).style?.color,
-      AppColors.onSurface,
-    );
-    expect(
-      tester.widget<Text>(find.byKey(const Key('splash-tagline'))).style?.color,
-      AppColors.muted,
-    );
-    final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
-      find.byType(AnnotatedRegion<SystemUiOverlayStyle>).first,
-    );
-    expect(overlay.value.statusBarIconBrightness, Brightness.dark);
-
-    await tester.pump(const Duration(milliseconds: 1200));
-
-    double opacity(String key) =>
-        tester.widget<FadeTransition>(find.byKey(Key(key))).opacity.value;
-    expect(opacity('splash-logo-fade'), 1);
-    expect(opacity('splash-brand-fade'), 1);
-    expect(opacity('splash-tagline-fade'), 1);
-    expect(opacity('splash-loading-fade'), 1);
-  });
-}
-
-class _PendingCatalog implements CatalogRepository {
-  final Completer<HomeFeed> pending = Completer<HomeFeed>();
-
-  @override
-  Future<HomeFeed> fetchHomeFeed() => pending.future;
-
-  @override
-  Future<HomeFeed> fetchDiscoverFeed() => pending.future;
-
-  @override
-  Future<Drama> fetchDrama(String dramaId) =>
-      Future<Drama>.error(StateError('unused'));
-}