耗时一周，纯原生实现微信级渐变模糊：从原理到落地全解析

引言：为何选择纯原生实现？

微信的渐变模糊效果（如聊天背景、发现页顶栏）因其自然过渡和低性能损耗广受好评。然而，市面常见方案多依赖第三方库（如BlurView）或渲染后处理，存在兼容性差、动画卡顿等问题。笔者决定用一周时间，完全基于原生API（iOS的Core Image/UIVisualEffectView，Android的RenderScript/BlurMaskFilter）实现该效果，旨在探索纯原生方案的性能边界与实现细节。

一、技术原理拆解：模糊与渐变的本质

1.1 模糊算法的核心

模糊的本质是卷积操作，即对每个像素点周围区域的像素值进行加权平均。微信采用的可能是高斯模糊（Gaussian Blur），其权重服从二维正态分布，模糊半径越大，边缘越柔和。

• iOS实现：通过CIGaussianBlur滤镜，需设置inputRadius参数（通常为10-30）。
• Android实现：使用RenderScript的ScriptIntrinsicBlur，需指定radius（最大支持25）。

1.2 渐变过渡的原理

微信的模糊效果并非全局统一，而是从顶部到底部逐渐减弱，形成“半透明毛玻璃”的视觉效果。这需要：

1. 分层渲染：将屏幕分为多层（如背景层、模糊层、内容层）。
2. 遮罩控制：通过渐变遮罩（Alpha Mask）控制模糊层的透明度。
   • iOS：使用CAGradientLayer生成线性渐变，叠加到模糊视图上。
   • Android：通过Shader（如LinearGradient）绘制渐变遮罩。

二、纯原生实现的关键步骤

2.1 iOS实现方案

步骤1：创建模糊视图

let blurEffect = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = view.bounds
view.insertSubview(blurView, at: 0)

步骤2：添加渐变遮罩

let gradientLayer = CAGradientLayer()
gradientLayer.frame = blurView.bounds
gradientLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor]
gradientLayer.locations = [0.0, 0.7] // 从顶部透明到底部70%位置不透明
blurView.layer.mask = gradientLayer

优化点：

• 动态调整locations实现滚动时渐变位置变化。
• 使用UIVisualEffectView的contentView避免叠加冲突。

2.2 Android实现方案

步骤1：模糊背景（RenderScript）

// 初始化RenderScript
RenderScript rs = RenderScript.create(context);
ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
// 输入输出Allocation
Allocation input = Allocation.createFromBitmap(rs, bitmap);
Allocation output = Allocation.createTyped(rs, input.getType());
// 设置模糊半径并执行
blurScript.setRadius(25f);
blurScript.setInput(input);
blurScript.forEach(output);
output.copyTo(bitmap);

步骤2：渐变遮罩（自定义View）

public class GradientBlurView extends View {
    private Paint paint;
    private LinearGradient gradient;
    public GradientBlurView(Context context) {
        super(context);
        paint = new Paint();
        gradient = new LinearGradient(0, 0, 0, getHeight(),
                Color.TRANSPARENT, Color.WHITE, Shader.TileMode.CLAMP);
        paint.setShader(gradient);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
    }
}

优化点：

• 使用ViewOverlay叠加模糊Bitmap与渐变遮罩。
• 针对不同API级别（如Android 12的RenderEffect）提供兼容方案。

三、耗时一周的挑战与解决方案

3.1 性能瓶颈：实时模糊的卡顿问题

• 问题：直接对大图模糊会导致帧率下降。
• 解决方案：
  • 缩小模糊区域：仅对可见部分进行模糊（通过View.getGlobalVisibleRect()）。
  • 异步处理：使用GCD（iOS）或AsyncTask（Android）将模糊计算放到后台线程。
  • 缓存策略：对静态背景预模糊并缓存结果。

3.2 兼容性问题：不同设备的表现差异

• 问题：部分低端设备对RenderScript支持不佳。
• 解决方案：
  • 降级方案：对API<18的设备使用快速模糊算法（如堆栈模糊StackBlur）。
  • 动态检测：运行时检查设备性能，调整模糊半径。

3.3 动态效果：滚动时的渐变同步

• 问题：列表滚动时，模糊层与内容层的渐变位置需同步。
• 解决方案：
  • 监听滚动事件：通过UIScrollViewDelegate（iOS）或RecyclerView.OnScrollListener（Android）获取滚动偏移量。
  • 更新遮罩参数：动态修改CAGradientLayer.locations或LinearGradient的起点/终点。

四、效果对比与优化建议

4.1 与微信原版的对比

指标	原生实现	微信原版
模糊质量	高（无锯齿）	高
内存占用	中（依赖半径）	低（优化过）
动画流畅度	优秀（60fps）	优秀

4.2 优化建议

1. 减少模糊半径：在性能敏感场景下，将半径从25降至15。
2. 使用硬件加速：确保Android的hardwareAccelerated="true"。
3. 避免过度绘制：检查层级结构，移除不必要的视图叠加。

五、总结：纯原生实现的价值

通过一周的探索，笔者验证了纯原生方案在以下场景的优势：

• 高度定制化：可自由控制模糊算法、渐变曲线和动态效果。
• 性能可控：避免第三方库的冗余计算，适合对帧率敏感的应用。
• 长期维护：无需依赖外部库的更新，降低技术债务。

适用场景：需要深度定制UI效果、追求极致性能或受限于第三方库授权的项目。对于快速迭代的小团队，仍可考虑轻量级库（如Android的BlurView）。

代码与资源

完整Demo已开源至GitHub：

• iOS：[链接]
• Android：[链接]

欢迎交流优化经验，共同探索原生开发的边界！