david1465833828/TPSchedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: strengthen dock spring motion, directional follow and milky glass

Browse Source
This commit is contained in:
david1465833828
2026-10-28 11:28:51 +08:00
parent 9da5864d29
commit 6604f31d98
9 changed files with 321 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/lib/widgets/glass_dock.dart
+173 -91
View File
@@ -33,7 +33,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
);
late final AnimationController _tap = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 460),
duration: const Duration(milliseconds: 560),
);
late final AnimationController _sway = AnimationController.unbounded(
vsync: this,
@@ -92,7 +92,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
double? _drag;
double _dragSpeed = 0;
double get _position => _drag ?? _motion.value.clamp(-0.12, 2.12);
void _moveTo(int index, {double velocity = 0}) {
void _moveTo(int index, {double velocity = 0, bool springyTap = false}) {
_targetIndex = index;
if (_reduceMotion) {
_motion.value = index.toDouble();
@@ -100,7 +100,9 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
}
_motion.animateWith(
SpringSimulation(
const SpringDescription(mass: 1, stiffness: 360, damping: 26),
springyTap
? const SpringDescription(mass: 1, stiffness: 350, damping: 22)
: const SpringDescription(mass: 1, stiffness: 360, damping: 26),
_position,
index.toDouble(),
velocity,
@@ -115,7 +117,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
: _motion.velocity;
setState(() => _drag = null);
_motion.value = position;
_moveTo(index, velocity: releaseVelocity);
_moveTo(index, velocity: releaseVelocity, springyTap: !elastic);
// Retarget the position spring without resetting an in-flight size pulse.
// Restarting that pulse at its peak made the glass edges jump on quick taps.
if (!elastic && !_reduceMotion && !_tap.isAnimating) {
@@ -173,9 +175,9 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
)!,
]
: [
Colors.white.withValues(alpha: 0.24),
const Color(0xFFF9FBFF).withValues(alpha: 0.12),
Colors.white.withValues(alpha: 0.18),
Colors.white.withValues(alpha: 0.38),
const Color(0xFFFDFEFF).withValues(alpha: 0.24),
Colors.white.withValues(alpha: 0.30),
],
),
),
@@ -185,7 +187,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
return ClipRRect(
borderRadius: BorderRadius.circular(40),
child: GlassRefraction(
strength: lens ? 0.78 + pressure * 0.70 : 1.05,
strength: lens ? 0.78 + pressure * 0.70 : 1.14,
blurSigma: lens ? 1.6 - pressure * 0.6 : 1.5,
child: content,
),
@@ -204,77 +206,100 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
builder: (context, _) {
final press = _pressure;
final pulse = _reduceMotion ? 0.0 : math.sin(math.pi * _tap.value);
// Travel stretches horizontally; landing squeezes then rebounds
// vertically. Endpoints are zero so quick retargets remain continuous.
final tapWave = _reduceMotion
? 0.0
: math.sin(2 * math.pi * _tap.value);
final tapStretch = tapWave >= 0 ? tapWave * 0.24 : tapWave * 0.065;
final tapRise = tapWave >= 0 ? -tapWave * 0.045 : -tapWave * 0.15;
final speed = _reduceMotion
? 0.0
: (_drag != null ? _dragSpeed : _motion.velocity).abs();
final stretch =
(speed / 80).clamp(0.0, 0.08) + pulse * 0.10 + press * 0.30;
(speed / 80).clamp(0.0, 0.08) + tapStretch + press * 0.30;
final lensWidth = _travel * (1 + stretch);
final lensHeight =
(_height - _inset * 2) *
(1 +
press * 0.31 +
pulse * 0.08 -
(speed / 180).clamp(0.0, 0.035));
(1 + press * 0.31 + tapRise - (speed / 180).clamp(0.0, 0.035));
// Resize real glass bounds: sampling stays aligned without scaling text.
final sway = _reduceMotion ? 0.0 : _sway.value.clamp(-1.2, 1.2);
final bodyGrowth = press * 12 + pulse * 3 + sway.abs() * 4;
final bodyHeight =
_height + press * 5 + pulse * 1.5 - sway.abs() * 0.8;
final bodyShift =
(_position - 1).clamp(-1.0, 1.0) * press * 2 + sway * 2.5;
final dockShift = sway * 8;
return SizedBox(
width: _width,
height: _height,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: const Color(0xFF4C6078).withValues(alpha: 0.075),
blurRadius: 18,
offset: const Offset(0, 6),
),
],
),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: -bodyGrowth / 2 + bodyShift,
top: (_height - bodyHeight) / 2,
width: _width + bodyGrowth,
height: bodyHeight,
child: _glass(child: const SizedBox.expand()),
),
Positioned(
left:
(_inset +
_position * _travel -
(lensWidth - _travel) / 2)
.clamp(1.0, _width - lensWidth - 1),
top: (_height - lensHeight) / 2,
width: lensWidth,
height: lensHeight,
child: IgnorePointer(
child: _glass(lens: true, child: const SizedBox.expand()),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: dockShift,
top: 0,
width: _width,
height: _height,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: const Color(0xFF4C6078)
.withValues(alpha: 0.075),
blurRadius: 18,
offset: const Offset(0, 6),
),
],
),
),
Positioned(
left: _inset,
right: _inset,
top: _inset,
bottom: _inset,
child: Row(
child: Stack(
clipBehavior: Clip.none,
children: [
_item(0, Icons.calendar_month_rounded, '课表'),
_item(1, Icons.assignment_rounded, '考试'),
_item(2, Icons.person_rounded, '个人设置', caption: '我的'),
Positioned(
left: -bodyGrowth / 2,
top: (_height - bodyHeight) / 2,
width: _width + bodyGrowth,
height: bodyHeight,
child: _glass(child: const SizedBox.expand()),
),
Positioned(
left:
(_inset +
_position * _travel -
(lensWidth - _travel) / 2)
.clamp(1.0, _width - lensWidth - 1),
top: (_height - lensHeight) / 2,
width: lensWidth,
height: lensHeight,
child: IgnorePointer(
child: _glass(
lens: true,
child: const SizedBox.expand(),
),
),
),
Positioned(
left: _inset,
right: _inset,
top: _inset,
bottom: _inset,
child: Row(
children: [
_item(0, Icons.calendar_month_rounded, '课表'),
_item(1, Icons.assignment_rounded, '考试'),
_item(
2,
Icons.person_rounded,
'个人设置',
caption: '我的',
),
],
),
),
],
),
),
],
),
),
],
),
);
},
@@ -290,9 +315,8 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
excludeSemantics: true,
onTap: () => _select(index),
child: GestureDetector(
key: index == widget.selectedIndex
? const Key('dock-cursor')
: null,
// Selection must not replace the symbol's active animation state.
key: ValueKey('dock-item-$index'),
behavior: HitTestBehavior.opaque,
onTapDown: index == widget.selectedIndex
? (_) => _pressTo(_reduceMotion ? 0 : 1)
@@ -349,38 +373,45 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
? 1 + _pressure * 0.08
: 1,
duration: const Duration(milliseconds: 130),
child: Icon(
icon,
size: 25,
color: index == _position.round().clamp(0, 2)
? _blue
: _blue.withValues(alpha: 0.72),
shadows: [
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.60
: 0.38,
child: _DockSymbol(
active: (_position - index).abs() < 0.28,
reduceMotion: _reduceMotion,
child: Icon(
icon,
key: index == widget.selectedIndex
? const Key('dock-cursor')
: null,
size: 25,
color: index == _position.round().clamp(0, 2)
? _blue
: _blue.withValues(alpha: 0.72),
shadows: [
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.60
: 0.38,
),
blurRadius: 8,
),
blurRadius: 8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.95
: 0.85,
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.95
: 0.85,
),
blurRadius: 2.8,
),
blurRadius: 2.8,
),
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.34
: 0.22,
Shadow(
color: Colors.white.withValues(
alpha: index == _position.round().clamp(0, 2)
? 0.34
: 0.22,
),
blurRadius: 1.4,
),
blurRadius: 1.4,
),
],
],
),
),
),
const SizedBox(height: 2),
@@ -409,6 +440,57 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
);
}
/// Plays once on entry. Remaining over a symbol does not restart its animation.
class _DockSymbol extends StatefulWidget {
const _DockSymbol({
required this.active,
required this.reduceMotion,
required this.child,
});
final bool active, reduceMotion;
final Widget child;
@override
State<_DockSymbol> createState() => _DockSymbolState();
}
class _DockSymbolState extends State<_DockSymbol>
with SingleTickerProviderStateMixin {
late final AnimationController _bounce = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 440),
);
@override
void didUpdateWidget(_DockSymbol oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.reduceMotion || !widget.active) {
_bounce.value = 0;
} else if (!oldWidget.active) {
_bounce.forward(from: 0);
}
}
@override
void dispose() {
_bounce.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => AnimatedBuilder(
animation: _bounce,
child: widget.child,
builder: (context, child) {
final lift = widget.reduceMotion
? 0.0
: math.sin(math.pi * _bounce.value);
return Transform.translate(
offset: Offset(0, -3.5 * lift),
child: Transform.scale(scale: 1 + lift * 0.16, child: child),
);
},
);
}
/// A white, rounded bevel catches light around a translucent milky body.
/// Highlights stay at the edge; the backdrop remains visible beneath the glass.
class _GlassRimPainter extends CustomPainter {