旋转带CAGradientLayer的View后边缘像素化问题求助

创建带有CAGradientLayer的自定义View，对其执行旋转变换后，边缘出现明显像素化问题；注释旋转代码后，显示恢复正常。

相关代码 #

GradientView类 #

import UIKit.UIView

class GradientView: UIView {
    
    // MARK: Layers
    lazy var gradientLayer: CAGradientLayer = {
        let l = CAGradientLayer()
        l.frame = self.bounds
        l.cornerRadius = 10
        l.colors = [UIColor.red.cgColor,
                    UIColor.orange.cgColor,
                    UIColor.yellow.cgColor]
        layer.insertSublayer(l, at: 0)
        return l
    }()
    
    // MARK: Lifecycle
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
    
    // MARK: Init
    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    // MARK: Helpers
    private func commonInit() {
        clipsToBounds = true
        backgroundColor = .clear
        layer.masksToBounds = true
    }
}

ViewController类 #

import UIKit

class ViewController: UIViewController {
    
    // MARK: Subviews
    private let gradientView = GradientView()
    
    // MARK: Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        configureSubviews()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        rotateView()
    }
    
    // MARK: Helpers
    private func configureSubviews() {
        configureGradientview()
        setLayout()
    }
    
    private func configureGradientview() {
        view.addSubview(gradientView)
        gradientView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    private func setLayout() {
        NSLayoutConstraint.activate([
            gradientView.centerXAnchor.constraint(
                equalTo: view.centerXAnchor
            ),
            gradientView.centerYAnchor.constraint(
                equalTo: view.centerYAnchor
            ),
            gradientView.widthAnchor.constraint(
                equalTo: view.widthAnchor,
                multiplier: 0.8
            ),
            gradientView.heightAnchor.constraint(
                equalTo: gradientView.widthAnchor,
                multiplier: 0.4
            )
        ])
    }
    
    private func rotateView() {
        let angleInDegrees = 10.0
        let angleInRadians = CGFloat(angleInDegrees * .pi / 180)
        gradientView.transform = CGAffineTransform(
            rotationAngle: angleInRadians
        )
    }
}

当前效果 #

旋转后的渐变View边缘出现明显锯齿和像素化，线条模糊不清晰。

1. 裁剪与变换的顺序冲突：GradientView开启了clipsToBounds和layer.masksToBounds，Core Animation会先按照原始矩形边界裁剪内容，再执行旋转变换，导致变换后的边缘没有足够的像素进行平滑过渡，出现锯齿。
2. 渐变图层渲染边界不足：CAGradientLayer的frame严格贴合View的bounds，旋转后边缘没有预留抗锯齿的缓冲空间，渲染时直接裁剪导致像素化。

方法一：替换裁剪为阴影实现圆角（推荐） #

移除View的裁剪设置，通过给渐变图层添加阴影来模拟圆角裁剪效果，避免裁剪与变换的冲突：
修改GradientView的commonInit方法：

private func commonInit() {
    backgroundColor = .clear
    // 移除裁剪设置
    // clipsToBounds = true
    // layer.masksToBounds = true
}

更新gradientLayer的初始化代码，添加阴影路径：

lazy var gradientLayer: CAGradientLayer = {
    let l = CAGradientLayer()
    l.frame = self.bounds
    l.cornerRadius = 10
    l.colors = [UIColor.red.cgColor,
                UIColor.orange.cgColor,
                UIColor.yellow.cgColor]
    // 添加阴影模拟裁剪
    l.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 10).cgPath
    l.shadowColor = UIColor.black.cgColor
    l.shadowOpacity = 1.0
    l.shadowOffset = .zero
    l.shadowRadius = 0
    layer.insertSublayer(l, at: 0)
    return l
}()

同时在layoutSubviews中更新阴影路径：

override func layoutSubviews() {
    super.layoutSubviews()
    gradientLayer.frame = bounds
    gradientLayer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 10).cgPath
}

方法二：开启抗锯齿并扩大渐变图层边界 #

给View添加抗锯齿设置，同时让渐变图层的frame比View大一圈，预留缓冲空间：
修改GradientView的commonInit：

private func commonInit() {
    clipsToBounds = true
    backgroundColor = .clear
    layer.masksToBounds = true
    
    // 开启抗锯齿与光栅化
    layer.allowsEdgeAntialiasing = true
    layer.shouldRasterize = true
    layer.rasterizationScale = UIScreen.main.scale
}

更新layoutSubviews中的渐变图层frame：

override func layoutSubviews() {
    super.layoutSubviews()
    // 扩大2pt作为抗锯齿缓冲
    let buffer: CGFloat = 2
    gradientLayer.frame = bounds.insetBy(dx: -buffer, dy: -buffer)
}

方法三：直接旋转渐变图层而非整个View #

如果不需要对View的其他子视图做变换，直接旋转CAGradientLayer可以避免整个View变换带来的裁剪问题：
修改ViewController的rotateView方法：

private func rotateView() {
    let angleInDegrees = 10.0
    let angleInRadians = CGFloat(angleInDegrees * .pi / 180)
    gradientView.gradientLayer.transform = CATransform3DMakeRotation(angleInRadians, 0, 0, 1)
}

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