ios - 使用 CAGradientLayer 重现草图渐变的正确方法

Question

我想创建一个具有四种给定颜色的渐变层。我有一个渐变草图文件。我有色标的坐标。我计算了 CAGradientLayer 的起点和终点的标准化坐标。我还计算了颜色相互变化的位置。该层仍然与草图图像不匹配。你能帮我看看哪里出了问题吗？使用导出的图像不是一个选项，因为层必须随着动画更改到其他渐变位置。

let imageWidth: CGFloat = 375.0
let imageHeihgt: CGFloat = 293.0

class ViewController: UIViewController {

    let homeColors: [UIColor] = [UIColor(red: 62/255, green: 131/255, blue: 255/255, alpha: 1.0),
                                 UIColor(red: 99/255, green: 22/255, blue: 203/255, alpha: 1.0),
                                 UIColor(red: 122/255, green: 5/255, blue: 239/255, alpha: 1.0),
                                 UIColor(red: 122/255, green: 5/255, blue: 240/255, alpha: 1.0)]

    let startPoint: CGPoint = CGPoint(x: -0.225/imageWidth*UIScreen.main.bounds.width, y: -0.582*imageHeihgt/UIScreen.main.bounds.height)
    let endPoint: CGPoint = CGPoint(x: 1.088/imageWidth*UIScreen.main.bounds.width, y: 1.01*imageHeihgt/UIScreen.main.bounds.height)

    let locations: [NSNumber] = [0.0, 0.734, 0.962, 1.0]

    var subview: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        subview = UIView(frame: CGRect(x: 0, y: 20, width: imageWidth, height: imageHeihgt))
        view.addSubview(subview)
        view.sendSubview(toBack: subview)
        addGradientLayer()
    }

    func addGradientLayer() {
        let gradient = CAGradientLayer()
        gradient.frame = subview.bounds
        gradient.colors = homeColors.map { $0.cgColor }
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.locations = locations
        subview.layer.insertSublayer(gradient, at: 0)
    }
}

我附上了一些屏幕截图以明确区别。区别不大，但仍然如此。

Answer 1

Sketch 渲染图形的方式与 iOS 不同。即使您将颜色和位置完美匹配，最终结果看起来仍然会有所不同。

如果您想要与 Sketch 文件完全匹配，则需要对颜色进行一些光学调整以解决差异。您的两张图片非常接近，因此通过一些细微的颜色调整，看起来应该更接近。

试着让浅蓝色(左上)和浅紫色(右下)不那么鲜艳。我无权访问您的 Sketch 文件，因此我无法建议新颜色来获得精确匹配，但这应该不会太难，只需反复试验即可。