一、背景与目标：为何选择纯原生实现？

微信的渐变模糊背景效果以其自然过渡的视觉体验成为行业标杆，尤其在聊天界面、个人主页等场景中，通过模糊化背景层突出内容主体，既保证信息可读性又提升美感。然而，市场上的主流实现方案多依赖第三方库（如React Native的BlurView或Flutter的BackdropFilter），这些方案虽能快速实现效果，但存在以下痛点：

1. 性能损耗：第三方库的跨平台抽象层会增加渲染开销，尤其在低端设备上易出现卡顿；
2. 定制局限：无法精准控制模糊半径、透明度梯度等参数，难以复现微信的细腻过渡；
3. 维护风险：第三方库的更新可能引入兼容性问题，而原生实现可完全掌控生命周期。

基于此，我们决定以纯原生方式（iOS的Core Image+UIVisualEffectView，Android的RenderScript+BlurMaskFilter）实现该效果，目标是在一周内完成从原理验证到跨平台兼容的全流程开发。

二、技术选型与原理剖析

1. iOS实现：Core Image与UIVisualEffectView的协同

iOS系统提供了两种模糊方案：

• UIVisualEffectView：基于系统视觉效果库，支持动态模糊（如.light、.dark等预设），但无法自定义渐变参数；
• Core Image滤镜：通过CIGaussianBlur滤镜实现高精度模糊，结合CIGradient生成透明度掩码。

关键步骤：

1. 模糊层生成：使用CIContext渲染目标视图为CIImage，应用CIGaussianBlur（radius参数控制模糊强度）；
2. 渐变掩码：创建CIGradient（从透明到不透明的线性渐变），通过CIBlendWithMask滤镜将模糊结果与原始图像混合；
3. 动态更新：监听滚动视图偏移量，实时调整gradient的startPoint/endPoint以实现滚动时的动态模糊变化。

// 示例代码：iOS Core Image模糊实现
func applyGradientBlur(to image: CIImage, radius: CGFloat, gradientRect: CGRect) -> CIImage? {
    let blurFilter = CIFilter(name: "CIGaussianBlur")
    blurFilter?.setValue(image, forKey: kCIInputImageKey)
    blurFilter?.setValue(radius, forKey: kCIInputRadiusKey)
    guard let blurredImage = blurFilter?.outputImage else { return nil }
    let gradient = CIFilter(name: "CILinearGradient", parameters: [
        "inputPoint0": CIVector(x: gradientRect.minX, y: gradientRect.midY),
        "inputPoint1": CIVector(x: gradientRect.maxX, y: gradientRect.midY),
        "inputColor0": CIColor(red: 0, green: 0, blue: 0, alpha: 0),
        "inputColor1": CIColor(red: 0, green: 0, blue: 0, alpha: 1)
    ])?.outputImage
    let blendFilter = CIFilter(name: "CIBlendWithMask")
    blendFilter?.setValue(blurredImage, forKey: kCIInputImageKey)
    blendFilter?.setValue(image, forKey: kCIInputBackgroundImageKey)
    blendFilter?.setValue(gradient, forKey: kCIInputMaskImageKey)
    return blendFilter?.outputImage
}

2. Android实现：RenderScript与BlurMaskFilter的优化

Android原生模糊需处理两个问题：

• 性能优化：RenderScript虽已废弃，但在Android 10及以下设备中仍是高性能模糊的首选；
• 渐变控制：通过BitmapShader+PorterDuffXfermode实现模糊层与原始视图的渐变混合。

关键步骤：

1. 快速模糊：使用RenderScript的ScriptIntrinsicBlur（radius参数限制为25px以内），对视图截图进行高斯模糊；
2. 渐变叠加：创建包含线性渐变的Bitmap，通过Canvas.drawBitmap()将其作为遮罩绘制到模糊层上；
3. 硬件加速：启用View.setLayerType(LAYER_TYPE_HARDWARE)以避免离屏渲染性能问题。

// 示例代码：Android RenderScript模糊实现
public Bitmap blurBitmap(Bitmap input, Context context, float radius) {
    Bitmap output = Bitmap.createBitmap(input);
    RenderScript rs = RenderScript.create(context);
    ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
    Allocation tmpIn = Allocation.createFromBitmap(rs, input);
    Allocation tmpOut = Allocation.createFromBitmap(rs, output);
    script.setRadius(radius);
    script.setInput(tmpIn);
    script.forEach(tmpOut);
    tmpOut.copyTo(output);
    rs.destroy();
    return output;
}
// 渐变遮罩应用
public Bitmap applyGradientMask(Bitmap blurredBitmap, int width, int height) {
    Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(result);
    Paint paint = new Paint();
    // 创建线性渐变Shader
    LinearGradient gradient = new LinearGradient(
        0, 0, width, 0, 
        Color.TRANSPARENT, Color.BLACK, 
        Shader.TileMode.CLAMP
    );
    paint.setShader(gradient);
    // 绘制模糊层
    canvas.drawBitmap(blurredBitmap, 0, 0, null);
    // 通过PorterDuffXfermode实现渐变混合
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    canvas.drawRect(0, 0, width, height, paint);
    return result;
}

三、一周开发历程：从原型到优化

Day 1-2：技术验证与原型开发

• iOS：验证Core Image的实时渲染性能，发现直接对UIView截图模糊会导致60fps掉帧，改用异步渲染队列（DispatchQueue.global().async）解决；
• Android：测试RenderScript在不同API版本的表现，发现Android 11+需使用RenderEffect替代（但效果较差），最终决定仅支持Android 10及以下设备。

Day 3-4：渐变动态控制

• 滚动联动：通过UIScrollViewDelegate（iOS）和RecyclerView.OnScrollListener（Android）获取滚动偏移量，动态调整渐变起始点；
• 参数调优：微信的模糊半径约15px，渐变宽度为屏幕宽度的30%，通过多次实验确定最佳参数组合。

Day 5-6：跨平台兼容与性能优化

• iOS：处理UIVisualEffectView与Core Image的混合使用场景，避免内存泄漏；
• Android：针对不同分辨率设备调整BlurMaskFilter的采样率，防止模糊边缘出现锯齿。

Day 7：测试与封装

• 自动化测试：使用Fastlane（iOS）和Espresso（Android）编写UI测试用例，验证滚动、旋转等场景下的效果稳定性；
• 组件封装：将模糊逻辑封装为可复用的UIView（iOS）和ViewGroup（Android），提供radius、gradientColor等API。

四、经验总结与实用建议

1. 性能优先：纯原生实现需严格监控帧率，建议使用Instruments（iOS）和Systrace（Android）定位卡顿源；
2. 渐进式优化：先实现基础模糊效果，再逐步添加渐变、动态控制等高级功能；
3. 兼容性处理：针对不同系统版本提供降级方案（如Android 11+使用快速模糊替代RenderScript）；
4. 资源管理：及时释放CIContext（iOS）和RenderScript（Android）对象，避免内存溢出。

通过一周的集中攻关，我们不仅复现了微信的渐变模糊效果，更在性能与定制性上超越了第三方库方案。这一实践证明，纯原生技术仍是在高端视觉效果实现中的首选，尤其适合对用户体验有极致追求的产品。