Swift4中UICircularProgressRing径向渐变不生效问题求助

嗨，我刚好对这个库的渐变配置有点经验，你的问题主要出在非整圆的弧度和默认径向渐变参数不匹配，加上需要调整颜色顺序来实现反转的绿→黄→红渐变。下面是具体的解决步骤和代码：

首先，先确认你已经正确设置了进度环的基础参数：

// 假设你的进度环实例是progressRing
progressRing.startAngle = 120
progressRing.endAngle = 60
progressRing.type = .radial // 明确指定径向渐变类型

接下来是关键的自定义径向渐变配置——默认的径向渐变是基于完整圆的，你的240°弧（120°到60°）需要调整渐变的中心点和范围才能让颜色正确分布：

1. 添加角度转弧度的扩展（方便计算） #

extension CGFloat {
    var degreesToRadians: CGFloat {
        return self * .pi / 180.0
    }
}

2. 构建适配非整圆的径向渐变层 #

// 定义你要的渐变颜色顺序：绿→黄→红
let gradientColors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
// 颜色对应的位置（0到1，分别对应弧的起始、中间、结束）
let gradientLocations: [NSNumber] = [0.0, 0.5, 1.0]

// 计算非整圆弧的中间角度（用来定位渐变中心）
let startRadian = CGFloat(120).degreesToRadians
let endRadian = CGFloat(60).degreesToRadians
let midAngle = (startRadian + endRadian) / 2

// 调整渐变中心到弧的外侧对应位置，让颜色沿着弧的方向过渡
let gradientCenter = CGPoint(
    x: 0.5 + 0.5 * cos(midAngle),
    y: 0.5 + 0.5 * sin(midAngle)
)

// 创建径向渐变层
let gradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.type = .radial
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
gradientLayer.endPoint = gradientCenter
gradientLayer.radius = 0.5 // 适配进度环的半径比例

// 把自定义渐变层赋值给进度环，同时启用自定义渐变
progressRing.customGradientLayer = gradientLayer
progressRing.usesCustomGradient = true

几个需要注意的坑： #

• 不要同时设置库自带的gradientColors和自定义渐变层，两者会冲突，启用usesCustomGradient后，库会优先使用你自定义的渐变层。
• 如果你的进度环是逆时针方向，可能需要微调midAngle的计算（比如加上π），或者调整颜色数组的顺序，根据实际效果调整。
• 确保你的UICircularProgressRing版本支持customGradientLayer和usesCustomGradient属性（Swift4对应的库版本建议用2.x系列，避免API不兼容）。

这样配置后，径向渐变应该就能正确沿着你的240°弧显示绿→黄→红的过渡效果了。

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