如何获得圆形图层，其中一条边作为渐变而另一条作为全色

Question

我做了这个圆形渐变层：

我想要的只有一个渐变（左边的那个），而底部的渐变将被移除，以显示红色和黄色之间的明显分离。

因为我需要制作一个动画（就像加载视图一样），我想在背景中有一个图像，并在顶部有一个颜色（如白色）的圆形图层，并改变它的笔画我需要的这一层。

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

但是这些解决方案感觉更像是黑客攻击而且我想知道是否有合适的解决方案

以下是我使用的代码：

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

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

为了获得你想要的效果，我认为你需要在你的渐变上使用形状图层作为面具，就像你正在做的那样。

在渐变+遮罩层的顶部设置第二个白色形状图层，并且更改strokeStart和/或strokeEnd听起来也是一种合理的方式来执行您尝试做的事情。

使用图层制作技巧（＆＃34; hacks＆＃34;正如你所说的那样）很常见，也是一种合理的方式来做你想做的事情。