Swift中GradientView角度与负位置设置和Figma效果不符问题

你的代码和Figma/CSS效果不一致，核心问题出在角度转换逻辑错误，以及对CSS渐变参数和CAGradientLayer参数映射的理解偏差，以下是具体修正：

1. 角度转换的核心错误 #

CSS的linear-gradient角度定义和CAGradientLayer的坐标系方向存在差异：

• CSS中0deg代表渐变方向向上，顺时针旋转角度
• CAGradientLayer的坐标系原点在左上角，x轴向右、y轴向下，渐变方向由startPoint和endPoint决定

你的updateAngle方法用了常规的角度转坐标系逻辑，没有适配CSS的角度基准，导致方向完全错误。正确的转换逻辑应该是：

func updateAngle() {
    let angleInRadians = angle * CGFloat.pi / 180.0
    // CSS角度转CAGradientLayer方向向量：0deg向上对应向量(0,-1)
    let dx = sin(angleInRadians)
    let dy = -cos(angleInRadians)
    gradientLayer.startPoint = CGPoint(x: 0.5 - dx / 2, y: 0.5 - dy / 2)
    gradientLayer.endPoint = CGPoint(x: 0.5 + dx / 2, y: 0.5 + dy / 2)
}

2. 颜色停止点（Locations）的精确性 #

CSS中的-47.03%和115.74%需要对应到精确的数值，而不是近似的-0.47和1.15，修正setGradient方法：

func setGradient() {
    colors = [UIColor(hexString: "#4AABE1").cgColor, UIColor(hexString: "#002652").cgColor]
    locations = [-0.4703, 1.1574] // 精确对应CSS的百分比
    angle = 0.82
}

3. 冗余代码清理 #

layoutSubviews中重复调用updateLocations/updateColors/updateAngle会导致不必要的重复更新，因为这些方法已经在属性的didSet中触发，直接移除即可：

override func layoutSubviews() {
    super.layoutSubviews()
    // 移除三个update方法的调用
}

修正后的完整代码 #

final class GradientView: UIView {
    
    var locations: [NSNumber]? = [0.0, 1.0] {
        didSet { updateLocations() }
    }
    
    var colors: [CGColor]? {
        didSet { updateColors() }
    }
    
    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
    
    var angle: CGFloat = 0.0 {
        didSet { updateAngle() }
    }
    
    override public class var layerClass: AnyClass { CAGradientLayer.self }
    
    convenience init(_ from: CGColor, _ to: CGColor) {
        self.init(frame: .zero)
        colors = [from, to]
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 无需重复更新，属性didSet已处理
    }

    func setGradient() {
        colors = [UIColor(hexString: "#4AABE1").cgColor, UIColor(hexString: "#002652").cgColor]
        locations = [-0.4703, 1.1574]
        angle = 0.82
    }
}

private extension GradientView {
    
    func updateLocations() {
        gradientLayer.locations = locations
    }
    
    func updateColors() {
        gradientLayer.colors = colors
    }
    
    func updateAngle() {
        let angleInRadians = angle * CGFloat.pi / 180.0
        let dx = sin(angleInRadians)
        let dy = -cos(angleInRadians)
        gradientLayer.startPoint = CGPoint(x: 0.5 - dx / 2, y: 0.5 - dy / 2)
        gradientLayer.endPoint = CGPoint(x: 0.5 + dx / 2, y: 0.5 + dy / 2)
    }
}

额外说明 #

• CAGradientLayer支持locations设置小于0或大于1的值，对应CSS中超出元素范围的颜色停止点，这部分你的用法是正确的
• 确保UIColor(hexString:)方法能正确解析十六进制颜色，避免因颜色值错误导致的显示差异

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