录制按钮增加动画

lib/features/recording/pages/page_record.dart

@@ -275,25 +275,23 @@ class _RecordingPageState extends ConsumerState<RecordingPage> {
                   if (!state.isPreviewReady && state.errorMessage == null)
                     const RecordingLoadingOverlayWidget(message: '正在启动相机…'),
                   const RecordTimerWidget(),
-                  RepaintBoundary(
+                  RecordingHudWidget(
-                    child: RecordingHudWidget(
+                    state: state,
-                      state: state,
+                    showClipboardHint: showClipboardInfo,
-                      showClipboardHint: showClipboardInfo,
+                    clipboardAddress: clipboard.address.trim(),
-                      clipboardAddress: clipboard.address.trim(),
+                    onStart: _onStartRecording,
-                      onStart: _onStartRecording,
+                    onStop: _stopRecordingAndShowResult,
-                      onStop: _stopRecordingAndShowResult,
+                    onOpenDnd: () async {
-                      onOpenDnd: () async {
+                      await viewModel.openDndSettings();
-                        await viewModel.openDndSettings();
+                      await viewModel.refreshDndAccess();
-                        await viewModel.refreshDndAccess();
+                    },
-                      },
+                    onOpenBattery: () async {
-                      onOpenBattery: () async {
+                      await viewModel.openBatterySettings();
-                        await viewModel.openBatterySettings();
+                      await viewModel.refreshBatteryOptimization();
-                        await viewModel.refreshBatteryOptimization();
+                    },
-                      },
+                    onToggleTouchLock: () {
-                      onToggleTouchLock: () {
+                      viewModel.setTouchLocked(!state.isTouchLocked);
-                        viewModel.setTouchLocked(!state.isTouchLocked);
+                    },
-                      },
-                    ),
                   ),
                   if (state.isTouchLocked && state.isRecording)
                     RecordingTouchLockOverlayWidget(

lib/features/recording/widgets/widget_record_timer.dart

@@ -24,7 +24,9 @@ class _RecordTimerWidgetState extends ConsumerState<RecordTimerWidget> {
       left: 0,
       right: 0,
       child: Center(
-        child: Container(
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 380),
+          curve: Curves.easeOutCubic,
           padding: EdgeInsets.symmetric(horizontal: 5.r, vertical: 0.r),
           decoration: BoxDecoration(
             color: isRecording ? Colors.red : Colors.transparent,

lib/features/recording/widgets/widget_recording_button.dart

@@ -1,62 +1,164 @@
+import 'dart:ui' show lerpDouble;
+
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 /// 录制控制按钮：白圈 + 红色内芯，录制中为圆角矩形。
-class RecordingControlButton extends StatelessWidget {
+class RecordingControlButton extends StatefulWidget {
   const RecordingControlButton({
     super.key,
     required this.isRecording,
     required this.onTap,
+    this.isStartingRecording = false,
     this.enabled = true,
     this.size,
   });
 
   final bool isRecording;
+  final bool isStartingRecording;
   final VoidCallback? onTap;
   final bool enabled;
   final double? size;
 
+  @override
+  State<RecordingControlButton> createState() => _RecordingControlButtonState();
+}
+
+class _RecordingControlButtonState extends State<RecordingControlButton>
+    with TickerProviderStateMixin {
+  static const _morphDuration = Duration(milliseconds: 380);
+  static const _pressDownDuration = Duration(milliseconds: 120);
+  static const _pressUpDuration = Duration(milliseconds: 180);
+
+  late final AnimationController _morphController;
+  late final AnimationController _pressController;
+  late final CurvedAnimation _morphAnimation;
+  late final Animation<double> _pressScale;
+
+  bool get _targetIsRecording =>
+      widget.isRecording || widget.isStartingRecording;
+
+  @override
+  void initState() {
+    super.initState();
+    _morphController = AnimationController(
+      vsync: this,
+      duration: _morphDuration,
+      value: _targetIsRecording ? 1 : 0,
+    );
+    _morphAnimation = CurvedAnimation(
+      parent: _morphController,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeInCubic,
+    );
+    _pressController = AnimationController(
+      vsync: this,
+      duration: _pressDownDuration,
+    );
+    _pressScale = Tween<double>(begin: 1, end: 0.94).animate(
+      CurvedAnimation(
+        parent: _pressController,
+        curve: Curves.easeOut,
+        reverseCurve: Curves.easeOutBack,
+      ),
+    );
+  }
+
+  @override
+  void didUpdateWidget(covariant RecordingControlButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    final oldTarget =
+        oldWidget.isRecording || oldWidget.isStartingRecording;
+    final newTarget = _targetIsRecording;
+    if (oldTarget != newTarget) {
+      if (newTarget) {
+        _morphController.forward();
+      } else {
+        _morphController.reverse();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _morphAnimation.dispose();
+    _morphController.dispose();
+    _pressController.dispose();
+    super.dispose();
+  }
+
+  void _handlePressDown() {
+    if (!widget.enabled) return;
+    _pressController.duration = _pressDownDuration;
+    _pressController.forward();
+  }
+
+  void _handlePressUp() {
+    if (!widget.enabled) return;
+    _pressController.duration = _pressUpDuration;
+    _pressController.reverse();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final buttonSize = size ?? 70.r;
+    final buttonSize = widget.size ?? 70.r;
     final borderWidth = 4.r;
     final idleInnerSize = 62.r;
     final recordingInnerSize = 22.r;
+    final idleCornerRadius = idleInnerSize / 2;
     final recordingCornerRadius = 6.r;
 
-    final innerSize = isRecording ? recordingInnerSize : idleInnerSize;
-    final borderRadius = isRecording
-        ? recordingCornerRadius
-        : idleInnerSize / 2;
-
     return GestureDetector(
-      onTap: enabled ? onTap : null,
+      behavior: HitTestBehavior.opaque,
-      child: SizedBox(
+      onTapDown: (_) => _handlePressDown(),
-        width: buttonSize,
+      onTapUp: (_) => _handlePressUp(),
-        height: buttonSize,
+      onTapCancel: _handlePressUp,
-        child: Stack(
+      onTap: widget.enabled ? widget.onTap : null,
-          alignment: Alignment.center,
+      child: AnimatedBuilder(
-          children: [
+        animation: Listenable.merge([_morphController, _pressController]),
-            Container(
+        builder: (context, child) {
+          final morph = _morphAnimation.value;
+
+          final innerSize = lerpDouble(
+            idleInnerSize,
+            recordingInnerSize,
+            morph,
+          )!;
+          final cornerRadius = lerpDouble(
+            idleCornerRadius,
+            recordingCornerRadius,
+            morph,
+          )!;
+
+          return Transform.scale(
+            scale: _pressScale.value,
+            child: SizedBox(
               width: buttonSize,
               height: buttonSize,
-              decoration: BoxDecoration(
+              child: Stack(
-                shape: BoxShape.circle,
+                alignment: Alignment.center,
-                border: Border.all(color: Colors.white, width: borderWidth),
+                children: [
+                  Container(
+                    width: buttonSize,
+                    height: buttonSize,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      border: Border.all(color: Colors.white, width: borderWidth),
+                    ),
+                  ),
+                  Container(
+                    width: innerSize,
+                    height: innerSize,
+                    decoration: BoxDecoration(
+                      color: Colors.red,
+                      borderRadius: BorderRadius.circular(cornerRadius),
+                    ),
+                  ),
+                ],
               ),
             ),
-            AnimatedContainer(
+          );
-              duration: const Duration(milliseconds: 500),
+        },
-              curve: Curves.ease,
-              width: innerSize,
-              height: innerSize,
-              decoration: BoxDecoration(
-                color: Colors.red,
-                borderRadius: BorderRadius.circular(borderRadius),
-              ),
-            ),
-          ],
-        ),
       ),
     );
   }

lib/features/recording/widgets/widget_recording_hud.dart

@@ -127,6 +127,7 @@ class RecordingHudWidget extends StatelessWidget {
           child: Center(
             child: RecordingControlButton(
               isRecording: state.isRecording,
+              isStartingRecording: state.isStartingRecording,
               enabled: !state.isStartingRecording,
               size: _recordButtonSize,
               onTap: () {

test/features/recording/widget_recording_button_test.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:recording_tool/features/recording/widgets/widget_recording_button.dart';
+
+void main() {
+  const designSize = Size(375, 812);
+  const morphDuration = Duration(milliseconds: 380);
+
+  Future<void> pumpButton(
+    WidgetTester tester, {
+    required bool isRecording,
+    bool isStartingRecording = false,
+  }) async {
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: isRecording,
+                  isStartingRecording: isStartingRecording,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump();
+  }
+
+  Size innerCoreSize(WidgetTester tester) {
+    final finder = find.byWidgetPredicate(
+      (widget) =>
+          widget is Container &&
+          widget.decoration is BoxDecoration &&
+          (widget.decoration! as BoxDecoration).color == Colors.red,
+    );
+    return tester.getSize(finder);
+  }
+
+  testWidgets('idle state uses large circular inner core', (tester) async {
+    await pumpButton(tester, isRecording: false);
+
+    final size = innerCoreSize(tester);
+    expect(size.width, closeTo(62.r, 0.5));
+    expect(size.height, closeTo(62.r, 0.5));
+  });
+
+  testWidgets('isStartingRecording morphs to stop square before isRecording', (
+    tester,
+  ) async {
+    await pumpButton(
+      tester,
+      isRecording: false,
+      isStartingRecording: true,
+    );
+
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    final size = innerCoreSize(tester);
+    expect(size.width, closeTo(22.r, 0.5));
+    expect(size.height, closeTo(22.r, 0.5));
+  });
+
+  testWidgets('isRecording forward and reverse morph without errors', (
+    tester,
+  ) async {
+    await pumpButton(tester, isRecording: false);
+
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: true,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(22.r, 0.5));
+
+    await tester.pumpWidget(
+      ScreenUtilInit(
+        designSize: designSize,
+        builder: (context, _) {
+          return MaterialApp(
+            home: Scaffold(
+              body: Center(
+                child: RecordingControlButton(
+                  isRecording: false,
+                  onTap: () {},
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(62.r, 0.5));
+  });
+
+  testWidgets('failed start rolls morph back to idle circle', (tester) async {
+    await pumpButton(
+      tester,
+      isRecording: false,
+      isStartingRecording: true,
+    );
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(22.r, 0.5));
+
+    await pumpButton(tester, isRecording: false, isStartingRecording: false);
+    await tester.pump(morphDuration);
+    await tester.pump();
+
+    expect(innerCoreSize(tester).width, closeTo(62.r, 0.5));
+  });
+}