Swift: Gradient dọc theo một con đường bezier (sử dụng CALayers)

Question

Tôi có một triển khai tương đối thẳng về phía trước của một khung nhìn tiến trình được thiết lập với các đối tượng CALayer. Chế độ xem tiến trình chính nó là một phần phụ của UIView.

Đây là mã mà bộ lên chiếc nhẫn tiến bộ:

 self.progressRingLayer = CAShapeLayer() 

     let innerRect = CGRectInset(bounds, CGFloat(self.lineWidth)/2, CGFloat(self.lineWidth)/2) 
     let innerPath = UIBezierPath(ovalInRect: innerRect) 

     self.progressRingLayer.path = innerPath.CGPath 
     self.progressRingLayer.fillColor = UIColor.clearColor().CGColor 
     self.progressRingLayer.strokeColor = kProgressColor.CGColor 
     self.progressRingLayer.anchorPoint = CGPointMake(0.5, 0.5) 
     self.progressRingLayer.transform = CATransform3DRotate(self.progressRingLayer.transform, (CGFloat(M_PI))*1, 0, 0, 1) 
     self.progressRingLayer.lineCap = kCALineCapRound 
     self.progressRingLayer.lineWidth = CGFloat(self.lineWidth) 

     self.layer.addSublayer(self.progressRingLayer) 

Những gì tôi đang cố gắng để làm bây giờ là thêm một gradient đến progressRingLayer rằng sau (hoặc uốn cong với) con đường. Tôi đã thành công trong việc thêm một gradient tuyến tính để lấp đầy, nhưng không chỉ đường dẫn.

Dưới đây là một ví dụ về những gì tác động tôi muốn:

Cho đến nay tất cả mọi thứ tôi đã tìm thấy đòi hỏi một loạt các bước bổ sung với CoreGraphics và CGContext mà không hoàn toàn phù hợp với thực hiện của tôi. Bất kỳ trợ giúp sẽ là tuyệt vời, cảm ơn!

Answer 1

Những gì tôi sẽ làm là vẽ một lớp gradient, sau đó vẽ trên đầu trang của một lớp đó là màu đen với hồ quang bị xóa.

Đây là nỗ lực của tôi ở khoảng hình ảnh mà bạn cung cấp (Tôi bỏ qua nhãn trắng ở trung tâm, nhưng đó là tầm thường):

Và đây là đoạn code mà tạo ra nó:

let r = CGRectMake(100,100,130,100) 

let g = CAGradientLayer() 
g.frame = r 
let c1 = UIColor(
    red: 151.0/255.0, green: 81.0/255.0, blue: 227.0/255.0, alpha: 1) 
let c2 = UIColor(
    red: 36.0/255.0, green: 176.0/255.0, blue: 233.0/255.0, alpha: 1) 
g.colors = [c1.CGColor as AnyObject, c2.CGColor as AnyObject]; 
self.view.layer.addSublayer(g) 

let percent = CGFloat(0.64) // percentage of circle 
UIGraphicsBeginImageContextWithOptions(r.size, false, 0) 
let con = UIGraphicsGetCurrentContext() 
CGContextFillRect(con, CGRect(origin: CGPoint(), size: r.size)) 
CGContextSetLineWidth(con, 5) 
CGContextSetLineCap(con, kCGLineCapRound) 
CGContextSetBlendMode(con, kCGBlendModeClear) 
let pi = CGFloat(M_PI) 
CGContextAddArc(con, r.size.width/2.0, r.size.height/2.0, 30, 
    -pi/2.0, -pi/2.0 + percent*pi*2.0, 0) 
CGContextStrokePath(con) 
let im = UIGraphicsGetImageFromCurrentImageContext() 
UIGraphicsEndImageContext() 
let b = CALayer() 
b.frame = r 
b.contents = im.CGImage 
self.view.layer.addSublayer(b) 

Lớp gradient (phần đầu tiên của mã) chỉ là "đề xuất phân phối". Nếu đó không phải là gradient bạn muốn, bạn có thể thiết kế của riêng bạn. Bạn có thể vẽ nó trong Photoshop và sử dụng một hình ảnh làm nội dung của lớp gradient. Hoặc bạn có thể tạo một lớp "góc" trong mã, sử dụng mã của bên thứ ba chẳng hạn như https://github.com/paiv/AngleGradientLayer. Điểm của ví dụ chỉ đơn thuần là để cho thấy làm thế nào nó có thể "xóa" một vòng cung trong một lớp màu đen để tiết lộ gradient giấu đằng sau nó, và do đó xuất hiện để vẽ với một gradient.