Flutter中如何实现AE风格的高斯模糊效果？

背景 #

我用Flutter的BackdropFilter实现高斯模糊，但效果和AE里的完全不一样：

• 原图：
• Flutter实现效果：
• AE实现效果：

AE的效果是纯粹的整体模糊，而BackdropFilter做出来的像毛玻璃。我试过用BoxShadow，但只能添加周边阴影，没法让整体模糊；调整图片透明度和sigma值也没达到预期效果。

我的实现代码 #

模糊核心代码 #

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: sigma.value,
      sigmaY: sigma.value,
  ),
  child: child,
)

动画控制代码 #

final Animation<double> opacity = TweenSequence<double>(
  <TweenSequenceItem<double>>[
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.0),
      weight: 20,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.0,
        end: 0.2,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 36,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.2),
      weight: 4,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.2,
        end: 0.06,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 4,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.06),
      weight: 12,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.06,
        end: 0.12,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 24,
    ),
  ],
  ).animate(animationController);


final Animation<double> sigma = TweenSequence<double>(
<TweenSequenceItem<double>>[
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(80),
    weight: 20,
  ),
  TweenSequenceItem<double>(
    tween: Tween<double>(
      begin: 80,
      end: 50,
    ).chain(CurveTween(curve: Curves.linear)),
    weight: 36,
  ),
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(50),
    weight: 8,
  ),
  TweenSequenceItem<double>(
    tween: Tween<double>(
      begin: 50,
      end: 20,
    ).chain(CurveTween(curve: Curves.linear)),
    weight: 12,
  ),
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(20),
    weight: 24,
  ),
],
).animate(animationController);

解决方案 #

1. 替换BackdropFilter为ImageFiltered #

BackdropFilter的作用是模糊目标元素下方的背景层，这就是你得到毛玻璃效果的原因；而AE的高斯模糊是直接模糊元素本身。改用ImageFiltered直接包裹原图控件，就能实现和AE一致的直接模糊：

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: sigma.value, sigmaY: sigma.value),
  child: Image.asset("你的图片路径"), // 直接传入原图
)

2. 解决边缘裁剪问题 #

大sigma值下，模糊效果会超出原图范围，导致边缘生硬。可以通过两种方式优化：

• 方式一：添加与sigma值匹配的内边距

Padding(
  padding: EdgeInsets.all(sigma.value), // 抵消模糊带来的边缘裁剪
  child: ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: sigma.value, sigmaY: sigma.value),
    child: Image.asset("你的图片路径"),
  ),
)

• 方式二：放大后模糊再裁剪

ClipRect(
  child: Transform.scale(
    scale: 1.2, // 放大原图后模糊，裁剪回原尺寸让边缘更自然
    child: ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: sigma.value, sigmaY: sigma.value),
      child: Image.asset("你的图片路径"),
    ),
  ),
)

3. 结合透明度动画匹配AE效果 #

将你已有的opacity动画和模糊效果结合，外层嵌套Opacity控件：

Opacity(
  opacity: opacity.value,
  child: ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: sigma.value, sigmaY: sigma.value),
    child: Image.asset("你的图片路径"),
  ),
)

4. 调整sigma值匹配AE参数 #

AE的模糊半径和Flutter的sigma值算法细节有差异，通常可以将sigma值设为AE模糊半径的1.5-2倍，比如AE用20的话，Flutter尝试30-40，逐步调整到视觉一致。

内容的提问来源于stack exchange，提问作者Nullable