Refine milky Dock and refract symbols beneath the moving lens
This commit is contained in:
david1465833828
@@ -1,3 +1,3 @@
|
||||
const appVersion = '0.7.8';
|
||||
const appBuildNumber = 33;
|
||||
const appBuildNumber = 34;
|
||||
const appFilingNumber = '蜀ICP备2025169276号-5A';
|
||||
|
||||
+164
-147
@@ -24,6 +24,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
double _width = 264;
|
||||
double get _travel => (_width - _inset * 2) / 3;
|
||||
static const _blue = Color(0xFF007AFF);
|
||||
static const _inactive = Color(0xFF7C8593);
|
||||
late final AnimationController _motion = AnimationController.unbounded(
|
||||
vsync: this,
|
||||
value: widget.selectedIndex.toDouble(),
|
||||
@@ -288,9 +289,9 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
)!,
|
||||
]
|
||||
: [
|
||||
Colors.white.withValues(alpha: 0.29),
|
||||
const Color(0xFFFDFEFF).withValues(alpha: 0.17),
|
||||
Colors.white.withValues(alpha: 0.23),
|
||||
Colors.white.withValues(alpha: 0.41),
|
||||
const Color(0xFFFDFEFF).withValues(alpha: 0.25),
|
||||
Colors.white.withValues(alpha: 0.34),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -300,8 +301,8 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(40),
|
||||
child: GlassRefraction(
|
||||
strength: lens ? 0.78 + pressure * 0.70 : 0.98,
|
||||
blurSigma: lens ? 1.6 - pressure * 0.6 : 1.5,
|
||||
strength: lens ? 1.0 + pressure * 0.78 : 1.18,
|
||||
blurSigma: lens ? 1.6 - pressure * 0.6 : 1.7,
|
||||
child: content,
|
||||
),
|
||||
);
|
||||
@@ -369,6 +370,14 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
final bodyHeight = _height + press * 5 + pulse * 3 - sway.abs() * 0.8;
|
||||
final dockShift = sway * 8;
|
||||
final leadingPull = sway * 6;
|
||||
final lensLeft =
|
||||
(_inset + _position * _travel - (lensWidth - _travel) / 2).clamp(
|
||||
-edgeAllowance - dockShift,
|
||||
_width + edgeAllowance - dockShift - lensWidth,
|
||||
);
|
||||
final symbolRefraction = _reduceMotion
|
||||
? 0.0
|
||||
: math.max(press.clamp(0.0, 1.0), _tapBloom);
|
||||
return SizedBox(
|
||||
width: _width,
|
||||
height: _height,
|
||||
@@ -403,17 +412,7 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
child: _glass(child: const SizedBox.expand()),
|
||||
),
|
||||
Positioned(
|
||||
left:
|
||||
(_inset +
|
||||
_position * _travel -
|
||||
(lensWidth - _travel) / 2)
|
||||
.clamp(
|
||||
-edgeAllowance - dockShift,
|
||||
_width +
|
||||
edgeAllowance -
|
||||
dockShift -
|
||||
lensWidth,
|
||||
),
|
||||
left: lensLeft,
|
||||
top: (_height - lensHeight) / 2,
|
||||
width: lensWidth,
|
||||
height: lensHeight,
|
||||
@@ -442,6 +441,27 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
],
|
||||
),
|
||||
),
|
||||
if (symbolRefraction > 0.005)
|
||||
Positioned(
|
||||
key: const ValueKey('dock-symbol-refraction'),
|
||||
left: lensLeft,
|
||||
top: (_height - lensHeight) / 2,
|
||||
width: lensWidth,
|
||||
height: lensHeight,
|
||||
// This optical pass samples the already-painted
|
||||
// symbols too. It fades out with pressure; the
|
||||
// stationary symbols remain sharp and tappable.
|
||||
child: IgnorePointer(
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(40),
|
||||
child: GlassRefraction(
|
||||
strength: symbolRefraction * 0.52,
|
||||
blurSigma: 0,
|
||||
child: const SizedBox.expand(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -453,144 +473,141 @@ class _GlassDockState extends State<GlassDock> with TickerProviderStateMixin {
|
||||
);
|
||||
},
|
||||
);
|
||||
Widget _item(int index, IconData icon, String label, {String? caption}) =>
|
||||
Expanded(
|
||||
child: Semantics(
|
||||
label: label,
|
||||
button: true,
|
||||
selected: index == widget.selectedIndex,
|
||||
excludeSemantics: true,
|
||||
onTap: () => _select(index),
|
||||
child: GestureDetector(
|
||||
// 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)
|
||||
: null,
|
||||
onTapCancel: () {
|
||||
if (_drag == null) _pressTo(0);
|
||||
},
|
||||
onTap: () => _select(index),
|
||||
onHorizontalDragStart: index == widget.selectedIndex
|
||||
? (_) {
|
||||
final start = _position.clamp(0.0, 2.0);
|
||||
_dragFollow.value = start;
|
||||
_dragTarget = start;
|
||||
_dragVelocity = _motion.velocity;
|
||||
_motion.stop();
|
||||
_wakeRipple();
|
||||
_pressTo(_reduceMotion ? 0 : 1);
|
||||
setState(() {
|
||||
_drag = start;
|
||||
_dragSpeed = 0;
|
||||
});
|
||||
}
|
||||
: null,
|
||||
onHorizontalDragUpdate: index == widget.selectedIndex
|
||||
? (details) => setState(() {
|
||||
_dragSpeed = details.delta.dx / _travel * 60;
|
||||
_wakeRipple();
|
||||
_swayTo((_dragSpeed / 8).clamp(-1.0, 1.0));
|
||||
_drag = (_drag! + details.delta.dx / _travel).clamp(
|
||||
0.0,
|
||||
2.0,
|
||||
);
|
||||
_followDragTo(_drag!);
|
||||
})
|
||||
: null,
|
||||
onHorizontalDragEnd: index == widget.selectedIndex
|
||||
? (details) => _select(
|
||||
(_drag ?? _position).round().clamp(0, 2),
|
||||
elastic: true,
|
||||
velocity: _dragVelocity,
|
||||
)
|
||||
: null,
|
||||
onHorizontalDragCancel: index == widget.selectedIndex
|
||||
? () {
|
||||
if (!mounted) return;
|
||||
final position = _position;
|
||||
setState(() => _drag = null);
|
||||
_motion.value = position;
|
||||
_moveTo(widget.selectedIndex, velocity: _dragVelocity);
|
||||
_pressTo(0);
|
||||
_swayTo(0);
|
||||
}
|
||||
: null,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AnimatedScale(
|
||||
scale: index == _position.round().clamp(0, 2)
|
||||
? 1 + _pressure * 0.08
|
||||
: 1,
|
||||
duration: const Duration(milliseconds: 130),
|
||||
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,
|
||||
),
|
||||
Shadow(
|
||||
color: Colors.white.withValues(
|
||||
alpha: index == _position.round().clamp(0, 2)
|
||||
? 0.95
|
||||
: 0.85,
|
||||
),
|
||||
blurRadius: 2.8,
|
||||
),
|
||||
Shadow(
|
||||
color: Colors.white.withValues(
|
||||
alpha: index == _position.round().clamp(0, 2)
|
||||
? 0.34
|
||||
: 0.22,
|
||||
),
|
||||
blurRadius: 1.4,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Flexible(
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Text(
|
||||
caption ?? label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
height: 1.1,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: index == _position.round().clamp(0, 2)
|
||||
? _blue
|
||||
: _blue.withValues(alpha: 0.62),
|
||||
Widget _item(
|
||||
int index,
|
||||
IconData icon,
|
||||
String label, {
|
||||
String? caption,
|
||||
}) => Expanded(
|
||||
child: Semantics(
|
||||
label: label,
|
||||
button: true,
|
||||
selected: index == widget.selectedIndex,
|
||||
excludeSemantics: true,
|
||||
onTap: () => _select(index),
|
||||
child: GestureDetector(
|
||||
// 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)
|
||||
: null,
|
||||
onTapCancel: () {
|
||||
if (_drag == null) _pressTo(0);
|
||||
},
|
||||
onTap: () => _select(index),
|
||||
onHorizontalDragStart: index == widget.selectedIndex
|
||||
? (_) {
|
||||
final start = _position.clamp(0.0, 2.0);
|
||||
_dragFollow.value = start;
|
||||
_dragTarget = start;
|
||||
_dragVelocity = _motion.velocity;
|
||||
_motion.stop();
|
||||
_wakeRipple();
|
||||
_pressTo(_reduceMotion ? 0 : 1);
|
||||
setState(() {
|
||||
_drag = start;
|
||||
_dragSpeed = 0;
|
||||
});
|
||||
}
|
||||
: null,
|
||||
onHorizontalDragUpdate: index == widget.selectedIndex
|
||||
? (details) => setState(() {
|
||||
_dragSpeed = details.delta.dx / _travel * 60;
|
||||
_wakeRipple();
|
||||
_swayTo((_dragSpeed / 8).clamp(-1.0, 1.0));
|
||||
_drag = (_drag! + details.delta.dx / _travel).clamp(0.0, 2.0);
|
||||
_followDragTo(_drag!);
|
||||
})
|
||||
: null,
|
||||
onHorizontalDragEnd: index == widget.selectedIndex
|
||||
? (details) => _select(
|
||||
(_drag ?? _position).round().clamp(0, 2),
|
||||
elastic: true,
|
||||
velocity: _dragVelocity,
|
||||
)
|
||||
: null,
|
||||
onHorizontalDragCancel: index == widget.selectedIndex
|
||||
? () {
|
||||
if (!mounted) return;
|
||||
final position = _position;
|
||||
setState(() => _drag = null);
|
||||
_motion.value = position;
|
||||
_moveTo(widget.selectedIndex, velocity: _dragVelocity);
|
||||
_pressTo(0);
|
||||
_swayTo(0);
|
||||
}
|
||||
: null,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AnimatedScale(
|
||||
scale: index == _position.round().clamp(0, 2)
|
||||
? 1 + _pressure * 0.08
|
||||
: 1,
|
||||
duration: const Duration(milliseconds: 130),
|
||||
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 == widget.selectedIndex ? _blue : _inactive,
|
||||
shadows: [
|
||||
Shadow(
|
||||
color: Colors.white.withValues(
|
||||
alpha: index == _position.round().clamp(0, 2)
|
||||
? 0.60
|
||||
: 0.38,
|
||||
),
|
||||
blurRadius: 8,
|
||||
),
|
||||
Shadow(
|
||||
color: Colors.white.withValues(
|
||||
alpha: index == _position.round().clamp(0, 2)
|
||||
? 0.95
|
||||
: 0.85,
|
||||
),
|
||||
blurRadius: 2.8,
|
||||
),
|
||||
Shadow(
|
||||
color: Colors.white.withValues(
|
||||
alpha: index == _position.round().clamp(0, 2)
|
||||
? 0.34
|
||||
: 0.22,
|
||||
),
|
||||
blurRadius: 1.4,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Flexible(
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Text(
|
||||
caption ?? label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
height: 1.1,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: index == widget.selectedIndex ? _blue : _inactive,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Plays once on entry. Remaining over a symbol does not restart its animation.
|
||||
|
||||
Reference in New Issue
Block a user