feat(splash): 原生开屏改为品牌启动图
This commit is contained in:
Zhou Weidong committed
1 parent
210ccc97cb
commit
8f60046ec3
37 files changed
+104
-344
No files matched your search
@@ -36,6 +36,9 @@ abstract final class AppColors {
|
||||
/// 页面背景。
|
||||
static const ink = Color(0xFFFFF8F0);
|
||||
|
||||
/// 原生开屏与冷启动过渡底色。
|
||||
static const splashInk = Color(0xFF1F1B16);
|
||||
|
||||
/// 页面顶部暖色渐变起点。
|
||||
static const surfaceTop = Color(0xFFFFE9D6);
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user