Swift实现：从模糊到透明的渐变效果

你的问题核心是用了颜色渐变而非模糊效果的渐变过渡——当前代码是叠加白色半透明到透明的层，这和背景模糊完全割裂。正确思路是让模糊效果本身从完全可见过渡到透明，实现背景的自然延续。

以下是两种可行实现方式：

方式一：给模糊层添加渐变遮罩（推荐） #

如果你的contentView是承载模糊效果的容器，直接给模糊视图的layer添加渐变mask，控制模糊效果的显示范围：

// 1. 先初始化模糊视图并添加到contentView
let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight) // 替换为你实际使用的模糊风格
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = contentView.bounds
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
contentView.addSubview(blurView)
contentView.sendSubviewToBack(blurView)

// 2. 创建渐变遮罩层，控制模糊的可见范围
let gradientMaskLayer = CAGradientLayer()
gradientMaskLayer.frame = contentView.bounds
// 渐变alpha逻辑：顶部透明→完全可见→保持可见→底部透明
gradientMaskLayer.colors = [
    UIColor.clear.cgColor,
    UIColor.white.cgColor,
    UIColor.white.cgColor,
    UIColor.clear.cgColor
]
gradientMaskLayer.locations = [0.0, 0.1, 0.9, 1.0] // 调整数值可控制渐变过渡的区域大小
gradientMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)

// 3. 给模糊视图设置遮罩
blurView.layer.mask = gradientMaskLayer

方式二：在ScrollView上下添加独立渐变模糊视图 #

如果需要单独控制上下渐变的范围，可以在ScrollView顶部和底部各添加一个小视图，给视图添加模糊效果后，再用渐变mask实现从模糊到透明的过渡：

// 顶部渐变模糊视图
let topGradientBlurView = UIView(frame: CGRect(x: 0, y: 0, width: contentView.bounds.width, height: 60)) // 高度控制渐变区域大小
contentView.addSubview(topGradientBlurView)
contentView.bringSubviewToFront(topGradientBlurView)

// 给顶部视图添加模糊效果
let topBlurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight)
let topBlurView = UIVisualEffectView(effect: topBlurEffect)
topBlurView.frame = topGradientBlurView.bounds
topGradientBlurView.addSubview(topBlurView)

// 给顶部模糊视图添加渐变mask（从上到下从模糊到透明）
let topMaskLayer = CAGradientLayer()
topMaskLayer.frame = topGradientBlurView.bounds
topMaskLayer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor]
topMaskLayer.locations = [0.0, 1.0]
topMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
topMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
topBlurView.layer.mask = topMaskLayer

// 底部渐变模糊视图
let bottomGradientBlurView = UIView(frame: CGRect(x: 0, y: contentView.bounds.height - 60, width: contentView.bounds.width, height: 60))
contentView.addSubview(bottomGradientBlurView)
contentView.bringSubviewToFront(bottomGradientBlurView)

let bottomBlurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight)
let bottomBlurView = UIVisualEffectView(effect: bottomBlurEffect)
bottomBlurView.frame = bottomGradientBlurView.bounds
bottomGradientBlurView.addSubview(bottomBlurView)

// 给底部模糊视图添加渐变mask（从上到下从透明到模糊）
let bottomMaskLayer = CAGradientLayer()
bottomMaskLayer.frame = bottomGradientBlurView.bounds
bottomMaskLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor]
bottomMaskLayer.locations = [0.0, 1.0]
bottomMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
bottomMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
bottomBlurView.layer.mask = bottomMaskLayer

// 确保ScrollView在渐变视图下方
contentView.sendSubviewToBack(scrollView)

关键注意事项 #

• 替换systemUltraThinMaterialLight为你实际使用的模糊风格，保证和背景模糊效果一致
• 调整locations数组数值或视图height，可以控制渐变过渡的快慢和覆盖范围
• 方式一适合整体控制模糊背景的渐变，更贴合“背景延续”的需求；方式二更灵活，可单独调整上下渐变的区间

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