From 6604f31d98ae2fe35d8a7eb6e4ddb3111277000f Mon Sep 17 00:00:00 2001 From: david1465833828 Date: Wed, 28 Oct 2026 11:28:51 +0800 Subject: [PATCH] feat: strengthen dock spring motion, directional follow and milky glass --- README.md | 4 +- docs/android-mvp-validation.md | 2 +- docs/tpschedule-0.7.8-dock-spring.md | 24 ++ mobile/lib/app/app_version.dart | 2 +- mobile/lib/widgets/glass_dock.dart | 264 ++++++++++++------- mobile/pubspec.yaml | 2 +- mobile/shaders/liquid_glass.frag | 4 +- mobile/test/widgets/dock_motion_test.dart | 111 +++++++- mobile/test/widgets/glass_material_test.dart | 17 +- 9 files changed, 321 insertions(+), 109 deletions(-) create mode 100644 docs/tpschedule-0.7.8-dock-spring.md diff --git a/README.md b/README.md index b566755..2e63343 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # TPSchedule -当前Android版本0.7.8+29：Dock点按/拖动弹性与Android平板横竖屏、分屏适配，见[本次验证记录](docs/tpschedule-0.7.8-dock-tablet.md)。构建28已提前建立通知类别、区分通知总开关和类别状态，见[通知排查记录](docs/tpschedule-0.7.8-notification-permissions.md)。用户手机已通过开启通知权限并重测确认恢复后台通知。Dock乳白透光层和边缘折射继续保留，见[材质优化记录](docs/tpschedule-0.7.8-dock-refinement.md)。本科/研究生HTML反馈见[0.7.8功能记录](docs/tpschedule-0.7.8-validation.md)及[反馈服务说明](server/feedback/html-diagnostic-update.md)，更新管理后台见[部署说明](server/updates/README.md)。 +当前Android版本0.7.8+30：增强点按挤压回弹、整条Dock随拖动方向弹动、图标到位动画及乳白折射光泽，见[本次记录](docs/tpschedule-0.7.8-dock-spring.md)。构建29提供Dock点按/拖动弹性与Android平板横竖屏、分屏适配，见[本次验证记录](docs/tpschedule-0.7.8-dock-tablet.md)。构建28已提前建立通知类别、区分通知总开关和类别状态，见[通知排查记录](docs/tpschedule-0.7.8-notification-permissions.md)。用户手机已通过开启通知权限并重测确认恢复后台通知。Dock乳白透光层和边缘折射继续保留，见[材质优化记录](docs/tpschedule-0.7.8-dock-refinement.md)。本科/研究生HTML反馈见[0.7.8功能记录](docs/tpschedule-0.7.8-validation.md)及[反馈服务说明](server/feedback/html-diagnostic-update.md)，更新管理后台见[部署说明](server/updates/README.md)。 0.7.0补充：考试页查询类型与卡片保持16像素间距；反馈问题和建议可自选附带最近10分钟的登录/读取/提醒诊断日志。默认不发送，不含密码、Cookie或课表内容，单独作为邮件文本附件。服务端需按[日志附件更新说明](server/feedback/diagnostic-log-update.md)手动更新；真实学校登录及SMTP未由本次离线测试代替验证。玻璃取样偏移仍在调查，未纳入本次修复结论。 -学生课表 APP，Flutter 实现，支持电子科技大学研究生和本科生系统。Android 0.7.8+29，Android 7.0 及以上。 +学生课表 APP，Flutter 实现，支持电子科技大学研究生和本科生系统。Android 0.7.8+30，Android 7.0 及以上。 使用用户提供的原始 SVG 图标，蓝色渐变、黄色日历框及白色笔画保持一致；启动画面使用相同配色。0.5.1修复重复启动页闪烁：初始化期间保留原生启动屏，数据就绪后直接显示课表首帧，不再叠加Flutter品牌页或淡出动画。Android12+ 原生启动屏使用同色纯蓝背景及图标，旧版采用蓝色渐变。 diff --git a/docs/android-mvp-validation.md b/docs/android-mvp-validation.md index ed1b459..e8460d2 100644 --- a/docs/android-mvp-validation.md +++ b/docs/android-mvp-validation.md @@ -1,6 +1,6 @@ # Android 首版验证记录 -当前版本为0.7.8+29，Dock弹性与Android平板验证见[本次记录](tpschedule-0.7.8-dock-tablet.md)。构建28的通知权限恢复、通道初始化及真实后台触发见[通知记录](tpschedule-0.7.8-notification-permissions.md)。Dock乳白透光材质见[优化记录](tpschedule-0.7.8-dock-refinement.md)。本科/研究生HTML反馈及签名、备案信息见[0.7.8功能记录](tpschedule-0.7.8-validation.md)。应用更新检查与后台说明见[0.7.6记录](tpschedule-0.7.6-updates.md)。本科考试兼容的验证见[0.7.5记录](tpschedule-0.7.5-validation.md)。两例真实课表缺失字段问题待新页面定位。本科接入记录见[0.7.0记录](tpschedule-0.7.0-validation.md)。下文为首版历史记录。 +当前版本为0.7.8+30，点按/方向弹动及乳白材质见[本次记录](tpschedule-0.7.8-dock-spring.md)。构建29的Dock弹性与Android平板验证见[本次记录](tpschedule-0.7.8-dock-tablet.md)。构建28的通知权限恢复、通道初始化及真实后台触发见[通知记录](tpschedule-0.7.8-notification-permissions.md)。Dock乳白透光材质见[优化记录](tpschedule-0.7.8-dock-refinement.md)。本科/研究生HTML反馈及签名、备案信息见[0.7.8功能记录](tpschedule-0.7.8-validation.md)。应用更新检查与后台说明见[0.7.6记录](tpschedule-0.7.6-updates.md)。本科考试兼容的验证见[0.7.5记录](tpschedule-0.7.5-validation.md)。两例真实课表缺失字段问题待新页面定位。本科接入记录见[0.7.0记录](tpschedule-0.7.0-validation.md)。下文为首版历史记录。 日期：2026-10-13。测试环境：Flutter 3.47.7 / Dart 3.13.5 / JDK 17；Android 16 API 36，Pixel 7 模拟器，1080×2400。首版版本 0.1.0+1，包 ID com.example.hepan_everyday，最低 Android 7.0（API 24）。 diff --git a/docs/tpschedule-0.7.8-dock-spring.md b/docs/tpschedule-0.7.8-dock-spring.md new file mode 100644 index 0000000..3844952 --- /dev/null +++ b/docs/tpschedule-0.7.8-dock-spring.md @@ -0,0 +1,24 @@ +# 0.7.8+30 点按Q弹、方向弹动和乳白玻璃 + +根据构建29后的反馈继续调整，仍沿用Flutter和原签名，版本0.7.8、构建号30。用户授权直接执行；同一轮追加的方向跟随、图标动画和乳白折射参考图一并纳入。 + +## 行为与材质 + +- 点按560ms形变：前半段横向拉伸、轻微纵向挤压，后半段横向收窄并纵向回弹。独立点按位置弹簧350/22，拖动释放仍用原360/26。连续点击继承位置、速度和未结束的形变，避免尺寸重置跳动。 +- 拖动时整个Dock（底座、滑块、图标、文字）随方向弹动，使用实际布局位置而非非等比缩放，幅度约8逻辑像素，松手/取消后弹簧回中。方向由拖动速度决定，与当前标签在左还是右无关。 +- 玻璃接近图标中心时触发一次440ms图标弹起与缩放；点按和拖动悬停均生效，停留不重复播放，首次启动静止。文字保持稳定。减少动画时关闭这些效果。 +- 对照用户提供的20261028-111754.jpg，乳白透光层从24%/12%/18%增加至38%/24%/30%，增强弧面边缘折射高光，基础折射强度1.14。保留原轻模糊半径，灰色静止滑块、蓝色实心图标和白光继续保留。 + +## 验证记录 + +先强化点按测试，确认旧实现达不到更明显的横向伸展、落位横向收窄和纵向回弹；修改后通过。新方向跟随和图标动画测试均先在旧实现失败再通过。 + +318项Flutter测试通过，静态分析无问题，正式APK构建成功。动画测试覆盖快速反向点击的位置/尺寸连续、右拖/左拖整条响应、取消/松手回中、图标触发后归位、拖动悬停触发、减少动画及途中开关、平板/分屏回归。材质测试覆盖更明显的乳白透光层、背景色彩保留、细节柔化、大轮廓可辨和移动时折射坐标对齐。 + +独立审查发现拖动悬停时松手切换选中项会因可变key重建图标动画。先新增同帧释放前后位置/尺寸连续性测试并确认失败，再让各标签的手势及动画子树使用稳定身份，将光标定位key移至不持有动画状态的图标节点；回归通过且无命中测试警告。 + +更厚的乳白层必然降低背景对比，材质断言改为保留至少40%的大轮廓对比；不是不透明白色填充。图标和文字单独位于玻璃上方，不参与背景折射或模糊。 + +已用Flutter测试渲染器生成并逐帧检查彩色背景上的动画预览；预览为渲染示意，不是实体手机录屏。本轮未在实体平板上检查性能，原平板布局保持。无服务器功能或数据格式变更。 + +原APK、源代码压缩包、18项0.5.4登记冻结文件和私钥保持原样。新APK证书与29逐字节一致；仍可覆盖安装。后台发布填写版本0.7.8、构建号30及新APK对应的HTTPS下载链接。 diff --git a/mobile/lib/app/app_version.dart b/mobile/lib/app/app_version.dart index 52af5be..8be7823 100644 --- a/mobile/lib/app/app_version.dart +++ b/mobile/lib/app/app_version.dart @@ -1,3 +1,3 @@ const appVersion = '0.7.8'; -const appBuildNumber = 29; +const appBuildNumber = 30; const appFilingNumber = '蜀ICP备2025169276号-5A'; diff --git a/mobile/lib/widgets/glass_dock.dart b/mobile/lib/widgets/glass_dock.dart index 493a87d..fdaf19e 100644 --- a/mobile/lib/widgets/glass_dock.dart +++ b/mobile/lib/widgets/glass_dock.dart @@ -33,7 +33,7 @@ class _GlassDockState extends State 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 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 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 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 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 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 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 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 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 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 { diff --git a/mobile/pubspec.yaml b/mobile/pubspec.yaml index d627b00..1f04bc7 100644 --- a/mobile/pubspec.yaml +++ b/mobile/pubspec.yaml @@ -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: diff --git a/mobile/shaders/liquid_glass.frag b/mobile/shaders/liquid_glass.frag index b3609c6..1bb4a7e 100644 --- a/mobile/shaders/liquid_glass.frag +++ b/mobile/shaders/liquid_glass.frag @@ -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; } diff --git a/mobile/test/widgets/dock_motion_test.dart b/mobile/test/widgets/dock_motion_test.dart index 9b3f98d..7b94941 100644 --- a/mobile/test/widgets/dock_motion_test.dart +++ b/mobile/test/widgets/dock_motion_test.dart @@ -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', diff --git a/mobile/test/widgets/glass_material_test.dart b/mobile/test/widgets/glass_material_test.dart index 3697dbc..fd111a6 100644 --- a/mobile/test/widgets/glass_material_test.dart +++ b/mobile/test/widgets/glass_material_test.dart @@ -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'); } }, );