Flutter实现底部扩散模糊动画：页面跳转中的视觉魔法

在移动应用开发中，页面跳转的动画效果直接影响用户体验。Flutter凭借其强大的渲染引擎，允许开发者通过自定义绘制实现高度流畅的过渡动画。本文将深入探讨如何利用Flutter实现底部扩散模糊动画，并应用于页面跳转场景，为应用增添视觉吸引力。

一、动画原理剖析

底部扩散模糊动画的核心在于从底部中心点向外扩散的模糊效果。这种效果模拟了现实世界中液体扩散或光晕扩散的物理过程，通过动态调整模糊半径和扩散范围，实现视觉上的平滑过渡。在Flutter中，实现这一效果需要结合CustomPaint（自定义绘制）和ShaderMask（着色器遮罩）技术。

1.1 CustomPaint的作用

CustomPaint是Flutter提供的自定义绘制组件，允许开发者通过CustomPainter类直接操作画布（Canvas），实现复杂的图形绘制。在底部扩散模糊动画中，CustomPaint负责绘制扩散的圆形区域，并通过动画控制器动态调整其半径。

1.2 ShaderMask的应用

ShaderMask通过着色器（Shader）对子组件进行遮罩处理，实现局部模糊或颜色变换效果。结合BackdropFilter和ImageFilter.blur()，可以创建出真实的模糊效果。在动画过程中，ShaderMask的模糊半径和扩散范围会随时间变化，形成动态的视觉效果。

二、实现步骤详解

2.1 创建动画控制器

首先，需要创建一个AnimationController来控制动画的播放。动画控制器负责管理动画的持续时间、循环次数以及当前进度。

final AnimationController _controller = AnimationController(
  duration: const Duration(milliseconds: 800),
  vsync: this,
)..repeat(reverse: true); // 可选：循环播放

2.2 定义扩散半径动画

使用Tween类定义扩散半径的动画范围，并通过Animation对象获取当前半径值。

final Animation<double> _radiusAnimation = Tween<double>(
  begin: 0.0,
  end: MediaQuery.of(context).size.height,
).animate(_controller);

2.3 实现CustomPainter

创建自定义的CustomPainter类，负责绘制扩散的圆形区域。在paint方法中，根据动画进度计算当前半径，并绘制圆形。

class DiffusionPainter extends CustomPainter {
  final double radius;
  DiffusionPainter(this.radius);
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue.withOpacity(0.3) // 可根据需要调整颜色和透明度
      ..style = PaintingStyle.fill;
    final Offset center = Offset(size.width / 2, size.height);
    canvas.drawCircle(center, radius, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

2.4 组合CustomPaint与ShaderMask

在Widget树中，将CustomPaint与ShaderMask组合使用。CustomPaint负责绘制扩散区域，ShaderMask则对下方内容进行模糊处理。

ShaderMask(
  shaderCallback: (Rect bounds) {
    return ImageFilter.blur(
      sigmaX: _radiusAnimation.value / 100, // 模糊半径与扩散半径关联
      sigmaY: _radiusAnimation.value / 100,
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcOver,
  child: Stack(
    children: [
      // 目标页面内容
      PageWidget(),
      CustomPaint(
        painter: DiffusionPainter(_radiusAnimation.value),
        size: Size.infinite,
      ),
    ],
  ),
)

2.5 触发页面跳转

在需要触发页面跳转的地方，启动动画控制器，并在动画完成后执行实际的页面跳转逻辑。

_controller.forward().whenComplete(() {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => TargetPage()),
  );
});

三、性能优化策略

3.1 减少重绘

通过shouldRepaint方法控制CustomPainter的重绘时机，避免不必要的绘制操作。

3.2 使用RepaintBoundary

在ShaderMask外层包裹RepaintBoundary，限制重绘范围，提升动画性能。

RepaintBoundary(
  child: ShaderMask(...),
)

3.3 动画复用

对于频繁触发的动画（如列表项点击），考虑复用动画控制器，避免频繁创建和销毁。

四、实际应用场景

底部扩散模糊动画适用于多种场景，如：

• 应用启动页：从底部扩散的模糊效果引导用户进入主界面。
• 页面跳转：在两个页面之间创建平滑的过渡效果。
• 弹窗展示：通过扩散动画突出显示重要信息。

五、总结与展望

本文详细阐述了Flutter中实现底部扩散模糊动画的原理与步骤，通过CustomPaint与ShaderMask的组合，实现了高度流畅的视觉效果。在实际开发中，开发者可根据需求调整动画参数（如持续时间、模糊半径等），以适配不同的设计风格。未来，随着Flutter渲染引擎的不断优化，类似的高级动画效果将更加易于实现，为移动应用带来更加丰富的视觉体验。