一、动画效果分析与设计目标

在移动端应用中，底部扩散模糊动画常用于页面跳转时的视觉过渡，其核心特征是通过从点击位置向四周扩散的模糊效果，实现平滑的页面切换。这种动画能够增强用户操作的视觉反馈，提升应用的整体质感。

设计该动画时需明确三个关键目标：1）模糊效果需从触发点向四周均匀扩散；2）动画过程需保持流畅，避免卡顿；3）需与页面跳转逻辑无缝衔接。在Flutter中实现该效果，主要涉及CustomPaint绘制、BackdropFilter模糊处理和AnimationController动画控制三大技术点。

二、核心组件与实现原理

1. 模糊效果实现基础

Flutter中实现模糊效果的核心组件是BackdropFilter，其通过ImageFilter.blur()创建模糊滤镜。基本用法如下：

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Container(color: Colors.transparent),
)

其中sigmaX和sigmaY控制模糊程度，值越大模糊效果越明显。但单独使用BackdropFilter无法实现动态扩散效果，需结合CustomPaint绘制动态遮罩。

2. 动态遮罩绘制原理

CustomPaint组件允许通过自定义CustomPainter实现任意形状的绘制。要实现从中心点向外扩散的圆形遮罩，需在paint方法中动态计算圆形半径：

class MaskPainter extends CustomPainter {
  final double radius;
  final Offset center;
  MaskPainter({required this.radius, required this.center});
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, radius, paint);
  }
  @override
  bool shouldRepaint(covariant MaskPainter oldDelegate) {
    return oldDelegate.radius != radius;
  }
}

通过动态更新radius值，可实现圆形遮罩的动态扩张效果。

三、完整动画实现方案

1. 动画控制器配置

使用AnimationController控制动画进度，设置动画时长为500毫秒：

late AnimationController _controller;
late Animation<double> _radiusAnimation;
@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  )..addListener(() {
      setState(() {});
    });
  _radiusAnimation = Tween<double>(begin: 0, end: 200).animate(_controller);
}

2. 叠加层组合实现

将CustomPaint遮罩层与BackdropFilter模糊层叠加，实现动态模糊效果：

Stack(
  children: [
    // 目标页面内容
    PageB(),
    // 模糊遮罩层
    Positioned.fill(
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return ClipPath(
            clipper: CircleClipper(
              radius: _radiusAnimation.value,
              center: _tapPosition,
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: _radiusAnimation.value / 20,
                sigmaY: _radiusAnimation.value / 20,
              ),
              child: Container(color: Colors.transparent),
            ),
          );
        },
      ),
    ),
  ],
)

其中CircleClipper是自定义的CustomClipper，用于根据动画进度裁剪出圆形区域。

3. 页面跳转逻辑整合

将动画启动与页面跳转逻辑结合，实现无缝过渡：

void _handleTap(BuildContext context, Offset tapPosition) {
  // 记录点击位置
  _tapPosition = tapPosition;
  // 启动动画
  _controller.forward();
  // 动画结束后执行跳转
  _controller.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      Navigator.push(
        context,
        PageRouteBuilder(
          pageBuilder: (_, __, ___) => PageB(),
          transitionsBuilder: (_, animation, __, child) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
        ),
      );
      _controller.reset();
    }
  });
}

四、性能优化技巧

1. 离屏渲染优化：将BackdropFilter放在单独的Overlay层中，避免影响主界面渲染性能
2. 动画精度控制：使用vsync: this防止动画在后台时继续消耗资源
3. 重建范围限制：通过shouldRepaint方法精确控制CustomPainter的重绘范围
4. 模糊半径计算：动态调整sigmaX/Y值，避免固定高模糊值导致的性能开销

五、扩展应用场景

该技术方案可扩展应用于多种场景：

1. 按钮点击反馈：为重要操作按钮添加扩散模糊效果
2. 全局过渡动画：作为应用内所有页面跳转的标准过渡效果
3. 手势交互增强：结合手势识别实现更复杂的交互效果
4. AR效果预览：在AR应用中作为物体选中状态的视觉提示

六、常见问题解决方案

1. 动画卡顿：检查是否在build方法中创建了新的AnimationController实例
2. 模糊效果异常：确保BackdropFilter的child是透明容器
3. 点击位置偏移：使用GestureDetector的onTapDown而非onTap获取精确点击坐标
4. 内存泄漏：在dispose方法中及时释放AnimationController

通过上述技术方案，开发者可以在Flutter应用中实现流畅的底部扩散模糊动画效果，显著提升页面跳转的视觉体验。实际开发中可根据具体需求调整动画时长、模糊程度和扩散形状等参数，创造出符合产品特色的过渡效果。