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

Refine milky Dock and refract symbols beneath the moving lens

Browse Source
This commit is contained in:
david1465833828
2026-10-28 17:56:40 +08:00
parent dc71e411e9
commit 23c1a58ca3
10 changed files with 351 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/lib/app/app_version.dart
+1 -1
View File
@@ -1,3 +1,3 @@
const appVersion = '0.7.8';
const appBuildNumber = 33;
const appBuildNumber = 34;
const appFilingNumber = '蜀ICP备2025169276号-5A';
mobile/lib/widgets/glass_dock.dart
+164 -147
View File
@@ -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.
mobile/pubspec.yaml
+1 -1
View File
@@ -1,7 +1,7 @@
name: hepan_everyday
description: TPSchedule 学生课表
publish_to: none
version: 0.7.8+33
version: 0.7.8+34
environment:
sdk: ^3.13.5
dependencies:
mobile/shaders/liquid_glass.frag
+5 -5
View File
@@ -26,12 +26,12 @@ void main() {
float distance = length(outward);
vec2 normal = outward / max(distance, 0.001);
float depth = radius - distance;
float rim = 1.0 - smoothstep(0.0, radius * 0.46, depth);
float rim = 1.0 - smoothstep(0.0, radius * 0.52, depth);
// Curved glass bends rays most at its edge, with subtle centre magnification.
vec2 ray = centre + local / (1.0 + u_strength * 0.075)
- normal * rim * rim * radius * u_strength * 0.23;
vec4 colour = texture(u_background, sampleUV(ray));
float dispersion = u_strength * rim * 0.65;
float dispersion = u_strength * rim * 0.80;
colour.r = texture(u_background, sampleUV(ray + normal * dispersion)).r;
colour.b = texture(u_background, sampleUV(ray - normal * dispersion)).b;
// The curved rim catches nearby background light as well as transmitting it.
@@ -40,11 +40,11 @@ void main() {
float edge_light = pow(rim, 4.0) * u_strength * facing;
vec4 reflected = texture(u_background,
sampleUV(point + normal * radius * 0.40));
colour = mix(colour, reflected, min(edge_light * 0.18, 0.22));
colour = mix(colour, reflected, min(edge_light * 0.22, 0.26));
// A grazing-angle white reflection gives the curved rim visible thickness;
// the broad centre continues to transmit the live, lightly softened scene.
colour.rgb = mix(colour.rgb, vec3(colour.a), min(edge_light * 0.15, 0.18));
float reflection = edge_light * 0.075;
colour.rgb = mix(colour.rgb, vec3(colour.a), min(edge_light * 0.19, 0.22));
float reflection = edge_light * 0.10;
colour.rgb = min(colour.rgb + reflection * colour.a, vec3(colour.a));
frag_color = colour;
}
mobile/test/widgets/dock_motion_test.dart
+30
View File
@@ -11,6 +11,36 @@ import 'navigation_test.dart' show uiController;
void main() {
setUpAll(tzdata.initializeTimeZones);
testWidgets(
'moving lens refracts symbols above the icon row and releases cleanly',
(tester) async {
await tester.pumpWidget(_dock());
await tester.pumpAndSettle();
final optical = find.byKey(const ValueKey('dock-symbol-refraction'));
expect(optical, findsNothing);
final gesture = await tester.startGesture(
tester.getCenter(find.byKey(const Key('dock-cursor'))),
);
await gesture.moveBy(const Offset(24, 0));
await tester.pump();
await gesture.moveBy(const Offset(54, 0));
await tester.pump(const Duration(milliseconds: 120));
expect(optical, findsOneWidget);
final filter = tester.widget<GlassRefraction>(
find.descendant(of: optical, matching: find.byType(GlassRefraction)),
);
expect(filter.strength, greaterThan(0.35));
expect(filter.blurSigma, 0); // Keep the transmitted symbols legible.
final stack = tester.widget<Stack>(
find.ancestor(of: optical, matching: find.byType(Stack)).first,
);
expect(stack.children.last.key, const ValueKey('dock-symbol-refraction'));
await gesture.up();
await tester.pumpAndSettle();
expect(optical, findsNothing);
expect(tester.takeException(), isNull);
},
);
testWidgets('edge overflow respects the actual dock parent and safe insets', (
tester,
) async {
mobile/test/widgets/glass_dock_test.dart
+52
View File
@@ -9,6 +9,58 @@ import 'navigation_test.dart' show uiController;
void main() {
setUpAll(tzdata.initializeTimeZones);
testWidgets('only the selected tab is blue, including during glass travel', (
tester,
) async {
var selected = 0;
await tester.pumpWidget(
MaterialApp(
home: StatefulBuilder(
builder: (context, setState) => Scaffold(
body: Center(
child: GlassDock(
selectedIndex: selected,
onSelected: (index) => setState(() => selected = index),
),
),
),
),
),
);
Color colour(IconData icon) =>
tester.widget<Icon>(find.byIcon(icon)).color!;
void expectGrey(IconData icon) {
final value = colour(icon);
expect((value.r - value.b).abs(), lessThan(0.12));
expect(value.a, 1);
}
expect(colour(Icons.calendar_month_rounded), const Color(0xFF007AFF));
expectGrey(Icons.assignment_rounded);
expectGrey(Icons.person_rounded);
await tester.tap(find.byIcon(Icons.person_rounded));
await tester.pump();
// Colour follows the selected page, not whichever icon the lens crosses.
expect(colour(Icons.person_rounded), const Color(0xFF007AFF));
expectGrey(Icons.calendar_month_rounded);
await tester.pump(const Duration(milliseconds: 100));
expectGrey(Icons.assignment_rounded);
await tester.pumpAndSettle();
final gesture = await tester.startGesture(
tester.getCenter(find.byKey(const Key('dock-cursor'))),
);
await gesture.moveBy(const Offset(-20, 0));
await tester.pump();
await gesture.moveBy(const Offset(-90, 0));
await tester.pump(const Duration(milliseconds: 150));
expect(colour(Icons.person_rounded), const Color(0xFF007AFF));
expectGrey(Icons.assignment_rounded);
await gesture.up();
await tester.pumpAndSettle();
expect(selected, 1);
expect(colour(Icons.assignment_rounded), const Color(0xFF007AFF));
expectGrey(Icons.person_rounded);
});
testWidgets('dock drags switch tabs while body swipes only change week', (
tester,
) async {
mobile/test/widgets/glass_material_test.dart
+67 -3
View File
@@ -9,6 +9,42 @@ import 'package:hepan_everyday/widgets/glass_dock.dart';
import 'package:hepan_everyday/widgets/glass_refraction.dart';
void main() {
testWidgets(
'zero-blur glass bends an already-painted symbol without erasing it',
(tester) async {
final plain = await _render(
tester,
const GlassRefraction(
strength: 0,
blurSigma: 0,
child: SizedBox.expand(),
),
opticalSymbol: true,
);
final bent = await _render(
tester,
const GlassRefraction(
strength: 0.52,
blurSigma: 0,
child: SizedBox.expand(),
),
opticalSymbol: true,
);
var changed = 0, plainBlue = 0, bentBlue = 0;
for (var y = 16; y < 50; y++) {
for (var x = 5; x < 52; x++) {
final before = _channel(plain, x, y, 0);
final after = _channel(bent, x, y, 0);
if ((before - after).abs() > 20) changed++;
if (_channel(plain, x, y, 2) - before > 100) plainBlue++;
if (_channel(bent, x, y, 2) - after > 100) bentBlue++;
}
}
expect(changed, greaterThan(20));
expect(bentBlue, greaterThan(plainBlue * 0.7));
},
skip: !ui.ImageFilter.isShaderFilterSupported,
);
testWidgets(
'Dock has a milky white body while transmitting a dark backdrop',
(tester) async {
@@ -23,8 +59,8 @@ void main() {
// while its original cool colour remains visible through the material.
final red = _channel(pixels, 160, 43, 0);
final green = _channel(pixels, 160, 43, 1);
expect(red, greaterThan(50));
expect(red, lessThan(80));
expect(red, greaterThan(75));
expect(red, lessThan(112));
expect(green - red, closeTo(13, 6));
},
);
@@ -190,6 +226,7 @@ Future<ByteData> _render(
Offset offset = Offset.zero,
Color backdropColor = const Color(0xFF14B4E6),
bool held = false,
bool opticalSymbol = false,
}) async {
tester.view.physicalSize = const Size(800, 600);
tester.view.devicePixelRatio = 1;
@@ -217,6 +254,7 @@ Future<ByteData> _render(
gradient,
stripeWidth,
backdropColor,
opticalSymbol,
),
),
),
@@ -303,14 +341,40 @@ Future<ByteData> _render(
}
class _Backdrop extends CustomPainter {
const _Backdrop(this.stripes, this.gradient, this.stripeWidth, this.colour);
const _Backdrop(
this.stripes,
this.gradient,
this.stripeWidth,
this.colour,
this.opticalSymbol,
);
final bool stripes;
final bool gradient;
final double stripeWidth;
final Color colour;
final bool opticalSymbol;
@override
void paint(Canvas canvas, Size size) {
if (opticalSymbol) {
canvas.drawRect(Offset.zero & size, Paint()..color = Colors.white);
canvas.drawRRect(
RRect.fromRectAndRadius(
const Rect.fromLTWH(10, 20, 28, 25),
const Radius.circular(3),
),
Paint()..color = const Color(0xFF007AFF),
);
for (var row = 0; row < 2; row++) {
for (var col = 0; col < 3; col++) {
canvas.drawRect(
Rect.fromLTWH(15 + col * 7, 26 + row * 8, 4, 4),
Paint()..color = Colors.white,
);
}
}
return;
}
if (gradient) {
for (var x = 0; x < size.width; x++) {
canvas.drawRect(