feat(flutter): 重做品牌开屏动画

lib/pages/splash/splash_page.dart

@@ -1,52 +1,210 @@
 // Author: fruit.com.cn
 
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import '../../core/theme/app_colors.dart';
 
-const double _markSize = 84;
+const Color _splashBackground = Color(0xFF100C0A);
-const double _markRadius = 18;
+const Color _markGlow = Color(0x33FF7A1A);
+const double _markSize = 96;
+const double _markRadius = 24;
+const double _logoGlowSize = 144;
+const double _logoGlowBlur = 40;
 const double _loaderSize = 22;
-const double _loaderStroke = 2.5;
+const double _loaderStroke = 2;
 const String _markAsset = 'assets/icon/splash_mark.png';
+const Duration _introDuration = Duration(milliseconds: 1200);
 
-/// 系统开屏已经放好同一块底和图标。这一页接上加载，直到首页数据回来。
+/// 品牌开屏：深暖底上依次呈现水果标记、FruitShorts 与中文标语。
-class SplashPage extends StatelessWidget {
+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 ColoredBox(
+    return AnnotatedRegion<SystemUiOverlayStyle>(
-      key: Key('splash-screen'),
+      value: SystemUiOverlayStyle.light,
-      color: AppColors.ink,
+      child: ColoredBox(
-      child: Stack(
+        key: const Key('splash-screen'),
-        fit: StackFit.expand,
+        color: _splashBackground,
-        children: [
+        child: Stack(
-          Center(
+          fit: StackFit.expand,
-            child: ClipRRect(
+          children: [
-              borderRadius: BorderRadius.circular(_markRadius),
+            Center(
-              child: const Image(
+              child: Column(
-                image: AssetImage(_markAsset),
+                mainAxisSize: MainAxisSize.min,
-                width: _markSize,
+                children: [
-                height: _markSize,
+                  _logo(),
-                filterQuality: FilterQuality.medium,
+                  const SizedBox(height: 24),
-                gaplessPlayback: true,
+                  _brand(),
+                  const SizedBox(height: 6),
+                  _tagline(),
+                ],
               ),
             ),
-          ),
+            Align(
-          Align(
+              alignment: Alignment.bottomCenter,
-            alignment: Alignment(0, 0.24),
+              child: Padding(
-            child: SizedBox(
+                padding: const EdgeInsets.only(bottom: 48),
-              width: _loaderSize,
+                child: FadeTransition(
-              height: _loaderSize,
+                  key: const Key('splash-loading-fade'),
-              child: CircularProgressIndicator(
+                  opacity: _loadingReveal,
-                key: Key('splash-loading'),
+                  child: const SizedBox.square(
-                strokeWidth: _loaderStroke,
+                    dimension: _loaderSize,
-                color: AppColors.gold,
+                    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(
+                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,
+                  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: Colors.white,
+            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: Colors.white70,
+            fontSize: 13,
+            letterSpacing: 4,
+          ),
+        ),
       ),
     );
   }

test/splash/splash_gate_test.dart

@@ -3,6 +3,7 @@
 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';
@@ -10,38 +11,66 @@ import 'package:fruitshorts/core/data/repositories/catalog_repository.dart';
 import 'package:fruitshorts/core/data/services/catalog_controller.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(
+  testWidgets('should_keep_splash_with_loading_until_home_feed_settles', (
-    'should_keep_splash_with_loading_until_home_feed_settles',
+    tester,
-    (tester) async {
+  ) async {
-      final repository = _PendingCatalog();
+    final repository = _PendingCatalog();
-      await tester.pumpWidget(
+    await tester.pumpWidget(
-        MaterialApp(
+      MaterialApp(
-          localizationsDelegates: AppLocalizations.localizationsDelegates,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
-          supportedLocales: AppLocalizations.supportedLocales,
+        supportedLocales: AppLocalizations.supportedLocales,
-          home: ChangeNotifierProvider(
+        home: ChangeNotifierProvider(
-            create: (_) => CatalogController(repository)..load(),
+          create: (_) => CatalogController(repository)..load(),
-            child: const HomePage(),
+          child: const HomePage(),
-          ),
         ),
-      );
+      ),
+    );
 
-      expect(find.byKey(const Key('splash-screen')), findsOneWidget);
+    expect(find.byKey(const Key('splash-screen')), findsOneWidget);
-      expect(find.byKey(const Key('splash-loading')), findsOneWidget);
+    expect(find.byKey(const Key('splash-loading')), findsOneWidget);
-      expect(find.byKey(const Key('home-empty')), findsNothing);
+    expect(find.byKey(const Key('home-empty')), findsNothing);
-      final clip = tester.widget<ClipRRect>(find.byType(ClipRRect));
+    final clip = tester.widget<ClipRRect>(find.byType(ClipRRect));
-      expect(clip.borderRadius, BorderRadius.circular(18));
+    expect(clip.borderRadius, BorderRadius.circular(24));
 
-      repository.pending.complete(const HomeFeed());
+    repository.pending.complete(const HomeFeed());
-      await tester.pump();
+    await tester.pump();
-      await tester.pump();
+    await tester.pump();
 
-      expect(find.byKey(const Key('splash-screen')), findsNothing);
+    expect(find.byKey(const Key('splash-screen')), findsNothing);
-      expect(find.byKey(const Key('home-empty')), findsOneWidget);
+    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);
+    expect(
+      tester.widget<ColoredBox>(find.byKey(const Key('splash-screen'))).color,
+      const Color(0xFF100C0A),
+    );
+    final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
+      find.byType(AnnotatedRegion<SystemUiOverlayStyle>).first,
+    );
+    expect(overlay.value.statusBarIconBrightness, Brightness.light);
+
+    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 {