"如何使 CAGradientLayer 遵循 CGPath"

Question

給定一個定義如下圖路徑的 CAShapeLayer，我想添加一個跟隨形狀層路徑的 CAGradientLayer。

例如，給定從黑色->紅色的漸變：

• 右上角的圓形部分將是黑色的，<\/li>
• 如果滑塊是 100，左上角會是紅色的，<\/li>
• 如果滑塊為 50，則滑塊的一半將為黑色（如下所示），可見漸變將從黑色（右上角）變為底部的紅黑色<\/li><\/ul>

  <\/a>

  我發現的每一篇以前的帖子實際上都沒有回答這個問題。 例如，因為我只能添加軸向 CAGradientLayers，我可以這樣做（下圖），但您可以看到它不正確（左上角最終再次變黑）。 如何使漸變實際上遵循路徑\/蒙版

Answer 1

對於簡單的圓形路徑，新的圓錐漸變很棒。 我能夠立即得到這個（這是一個被圓形圖層掩蓋的圓錐漸變圖層）：

我使用了紅色和綠色，以便清楚地顯示漸變。 這似乎與您所追求的不一樣，但我不敢相信既然.conic<\/code>存在，實現您的目標將非常困難。

class MyGradientView : UIView {
    override class var layerClass : AnyClass { return CAGradientLayer.self }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder:aDecoder)
        let lay = self.layer as! CAGradientLayer
        lay.type = .conic
        lay.startPoint = CGPoint(x:0.5,y:0.5)
        lay.endPoint = CGPoint(x:0.5,y:0)
        lay.colors = [UIColor.green.cgColor, UIColor.red.cgColor]
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        let shape = CAShapeLayer()
        shape.frame = self.bounds
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        let b = UIBezierPath(ovalIn: shape.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)))
        shape.path = b.cgPath
        shape.lineWidth = 10
        shape.lineCap = .round
        shape.strokeStart = 0.1
        shape.strokeEnd = 0.9
        shape.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        shape.transform = CATransform3DMakeRotation(-.pi/2, 0, 0, 1)
        self.layer.mask = shape
    }
}

Answer 2

iOS 12 上的任何人都應該接受 Matt 的建議，或者按照 DonMag 的建議使用 SFProgressCircle。

我的解決方案：我個人最終添加了兩個 CAShapeLayer，每個都有一個對應的 CAGradientLayer。

通過以編程方式將滑塊分成兩半，如下圖所示，我能夠在每一側應用從上到下的漸變，從而得到我正在尋找的效果。 它對用戶是不可見的。