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

2026-10-28 11:28:51 +08:00
parent 9da5864d29
commit 6604f31d98
9 changed files with 321 additions and 109 deletions
@@ -1,3 +1,3 @@
 const appVersion = '0.7.8';
-const appBuildNumber = 29;
+const appBuildNumber = 30;
 const appFilingNumber = '蜀ICP备2025169276号-5A';
@@ -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 {
@@ -1,7 +1,7 @@
 name: hepan_everyday
 description: TPSchedule 学生课表
 publish_to: none
-version: 0.7.8+29
+version: 0.7.8+30
 environment:
  sdk: ^3.13.5
 dependencies:
@@ -43,8 +43,8 @@ void main() {
  colour = mix(colour, reflected, min(edge_light * 0.18, 0.22));
  // 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.12, 0.16));
-  float reflection = edge_light * 0.07;
+  colour.rgb = mix(colour.rgb, vec3(colour.a), min(edge_light * 0.20, 0.22));
+  float reflection = edge_light * 0.10;
  colour.rgb = min(colour.rgb + reflection * colour.a, vec3(colour.a));
  frag_color = colour;
 }
@@ -1,3 +1,5 @@
+import 'dart:math' as math;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:timezone/data/latest.dart' as tzdata;
@@ -36,16 +38,22 @@ void main() {
    await tester.tap(find.byIcon(Icons.assignment_rounded));
    await tester.pump();
    var widest = resting.width;
+    var narrowest = resting.width;
+    var tallest = resting.height;
    var furthest = resting.center.dx;
    for (var frame = 0; frame < 70; frame++) {
      await tester.pump(const Duration(milliseconds: 16));
      final rect = tester.getRect(lens);
      widest = widest > rect.width ? widest : rect.width;
+      narrowest = narrowest < rect.width ? narrowest : rect.width;
+      tallest = tallest > rect.height ? tallest : rect.height;
      furthest = furthest > rect.center.dx ? furthest : rect.center.dx;
      expect(rect.width, lessThan(resting.width * 1.4));
-      expect(rect.center.dx, lessThan(target + 8));
+      expect(rect.center.dx, lessThan(target + 14));
    }
-    expect(widest, greaterThan(resting.width * 1.06));
+    expect(widest, greaterThan(resting.width * 1.20));
+    expect(narrowest, lessThan(resting.width * 0.97));
+    expect(tallest, greaterThan(resting.height * 1.10));
    expect(furthest, greaterThan(target + 0.1));
    expect(tester.getCenter(lens).dx, closeTo(target, 0.1));
    expect(tester.getSize(lens).width, closeTo(resting.width, 0.1));
@@ -166,6 +174,59 @@ void main() {
      greaterThan(0),
    );
  });
+  testWidgets(
+    'drag moves the whole dock in its direction and returns on release',
+    (tester) async {
+      await tester.pumpWidget(_dock());
+      await tester.pumpAndSettle();
+      await tester.tap(find.byIcon(Icons.assignment_rounded));
+      await tester.pumpAndSettle();
+      final icon = find.byIcon(Icons.calendar_month_rounded);
+      final glass = find.byType(GlassRefraction).first;
+      final x = tester.getCenter(icon).dx;
+      final glassX = tester.getCenter(glass).dx;
+      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(45, 0));
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 140));
+      expect(tester.getCenter(icon).dx, greaterThan(x + 4));
+      expect(tester.getCenter(glass).dx, greaterThan(glassX + 4));
+      await gesture.moveBy(const Offset(-70, 0));
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 220));
+      expect(tester.getCenter(icon).dx, lessThan(x - 4));
+      await gesture.up();
+      await tester.pumpAndSettle();
+      expect(tester.getCenter(icon).dx, closeTo(x, 0.05));
+    },
+  );
+  testWidgets('icon bounces once when the glass arrives and then rests', (
+    tester,
+  ) async {
+    await tester.pumpWidget(_dock());
+    await tester.pumpAndSettle();
+    final icon = find.byIcon(Icons.assignment_rounded);
+    final rest = tester.getRect(icon);
+    await tester.tap(icon);
+    await tester.pump();
+    var highest = rest.top;
+    var widest = rest.width;
+    for (var i = 0; i < 65; i++) {
+      await tester.pump(const Duration(milliseconds: 16));
+      final r = tester.getRect(icon);
+      highest = math.min(highest, r.top);
+      widest = math.max(widest, r.width);
+    }
+    expect(highest, lessThan(rest.top - 1));
+    expect(widest, greaterThan(rest.width * 1.1));
+    await tester.pumpAndSettle();
+    expect(tester.getRect(icon).top, closeTo(rest.top, 0.05));
+    expect(tester.getSize(icon).width, closeTo(rest.width, 0.05));
+  });
  testWidgets('reduced motion snaps the cursor without oscillation', (
    tester,
  ) async {
@@ -173,6 +234,7 @@ void main() {
    await tester.pumpAndSettle();
    final lens = find.byType(GlassRefraction).last;
    final resting = tester.getSize(lens);
+    final iconBefore = tester.getRect(find.byIcon(Icons.person_rounded));
    await tester.tap(find.byIcon(Icons.person_rounded));
    await tester.pump();
    final target = tester.getCenter(find.byIcon(Icons.person_rounded)).dx;
@@ -180,6 +242,51 @@ void main() {
    await tester.pump(const Duration(milliseconds: 200));
    expect(tester.getCenter(lens).dx, closeTo(target, 0.05));
    expect(tester.getSize(lens), resting);
+    expect(tester.getRect(find.byIcon(Icons.person_rounded)), iconBefore);
+  });
+  testWidgets('hovering a dragged lens animates its icon before releasing', (
+    tester,
+  ) async {
+    await tester.pumpWidget(_dock());
+    await tester.pumpAndSettle();
+    final icon = find.byIcon(Icons.assignment_rounded);
+    final y = tester.getCenter(icon).dy;
+    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(86, 0));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 180));
+    expect(tester.getCenter(icon).dy, lessThan(y - 1));
+    await tester.pump(const Duration(milliseconds: 600));
+    expect(tester.getCenter(icon).dy, closeTo(y, 0.1));
+    await gesture.cancel();
+    await tester.pumpAndSettle();
+  });
+  testWidgets('releasing over an animating icon preserves its bounce', (
+    tester,
+  ) async {
+    await tester.pumpWidget(_dock());
+    await tester.pumpAndSettle();
+    final icon = find.byIcon(Icons.assignment_rounded);
+    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(86, 0));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 180));
+    final before = tester.getRect(icon);
+    await gesture.up();
+    await tester.pump();
+    final after = tester.getRect(icon);
+    expect(after.top, closeTo(before.top, 0.1));
+    expect(after.width, closeTo(before.width, 0.1));
+    await tester.pumpAndSettle();
+    expect(tester.takeException(), isNull);
  });
  testWidgets(
    'changing reduced motion during a tap does not leave frozen deformation',
@@ -23,8 +23,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(45));
-      expect(red, lessThan(90));
+      expect(red, greaterThan(75));
+      expect(red, lessThan(115));
      expect(green - red, closeTo(13, 6));
    },
  );
@@ -85,11 +85,10 @@ void main() {
      final red = _channel(pixels, 16, 40, 0);
      final green = _channel(pixels, 16, 40, 1);
      final blue = _channel(pixels, 16, 40, 2);
-      expect(red, lessThan(115));
-      expect(green - red, greaterThanOrEqualTo(80));
-      // The milky base and resting grey lens still transmit over half of the
-      // cyan source's 210-level blue/red contrast rather than becoming opaque.
-      expect(blue - red, greaterThan(105));
+      expect(red, lessThan(125));
+      expect(green - red, greaterThanOrEqualTo(65));
+      // The thicker milky base still transmits a clear cyan colour difference.
+      expect(blue - red, greaterThan(90));
    },
  );

@@ -133,8 +132,8 @@ void main() {
            reds.reduce((a, b) => a > b ? a : b) -
            reds.reduce((a, b) => a < b ? a : b);
        // The original stripes have 180 levels of contrast. Both the base and
-        // selected lens retain over half, keeping these larger shapes readable.
-        expect(contrast, greaterThan(90), reason: 'background at x=$start');
+        // selected lens retain at least 40%, keeping larger shapes readable.
+        expect(contrast, greaterThan(72), reason: 'background at x=$start');
      }
    },
  );