ios - 如何获得一个圆形图层，一个边缘作为渐变，另一个边缘作为全色

Question

我做了这个圆形渐变图层:

我想要的只是一个渐变(左边的那个)，而底部的渐变将被移除以显示红色和黄色之间的清晰分离。

因为我需要用它制作动画(比如加载 View )，所以我考虑过在背景中有一个图像并在顶部有一个带有颜色(如白色)的圆形图层并更改这层是我需要的。

我想到的另一个解决方案是使用两个圆形图层，一个带有渐变，另一个没有。

但这两种解决方案感觉更像是一种 hack，我想知道是否有一个合适的解决方案仅使用

这是我使用的代码:

fileprivate func createProgressLayer() {
    let startAngle = CGFloat(M_PI_2)
    let endAngle = CGFloat(M_PI * 2 + M_PI_2)
    let centerPoint = CGPoint(x: frame.width / 2 , y: frame.height / 2)

    progressLayer.path = UIBezierPath(arcCenter:centerPoint, radius: frame.width / 2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true).cgPath
    progressLayer.backgroundColor = UIColor.clear.cgColor
    progressLayer.fillColor = nil
    progressLayer.strokeColor = UIColor.black.cgColor
    progressLayer.lineWidth = 4.0
    progressLayer.strokeStart = 0.0
    progressLayer.strokeEnd = 1.0

    let gradientMaskLayer = gradientMask()
    gradientMaskLayer.mask = progressLayer
    layer.addSublayer(gradientMaskLayer)
}

fileprivate func gradientMask() -> CAGradientLayer {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds

    gradientLayer.locations = [0.0, 0.1]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 0.5, y: 0)

    let arrayOfColors: [AnyObject] = [UIColor.red.cgColor, UIColor.yellow.cgColor]
    gradientLayer.colors = arrayOfColors

    return gradientLayer
}

Answer 1

形状图层仅支持单一颜色。

为了获得您想要的效果，我认为您需要像现在一样在渐变上使用形状图层作为蒙版。

在 gradient+mask 层的顶部有第二个白色形状层并改变 strokeStart 和/或 strokeEnd 听起来也是一种合理的方式来做你想做的事情。

使用层进行技巧(您称之为“hacks”)是很常见的，也是一种合理的方法来完成您想要做的事情。