Nền Gradient xuyên tâm trong Swift

Question

Tôi đã cố gắng tạo ra một nền gradient xuyên tâm cơ bản, nhưng không thành công. Tôi quản lý để có được một gradient tuyến tính làm việc như thể hiện với các mã dưới đây, nhưng tôi không có ý tưởng làm thế nào để làm cho nó xuyên tâm với màu sắc khác nhau - như trong hình dưới đây. Mọi sự trợ giúp sẽ rất được trân trọng. :)

override func viewDidLoad() { 
    super.viewDidLoad() 

    //A linear Gradient Consists of two colours: top colour and bottom colour 
    let topColor = UIColor(red: 15.0/255.0, green: 118.0/255.0, blue: 128.0/255.0, alpha: 1.0) 
    let bottomColor = UIColor(red: 84.0/255.0, green: 187.0/255.0, blue: 187.0/255.0, alpha: 1.0) 

    //Add the top and bottom colours to an array and setup the location of those two. 
    let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor] 
    let gradientLocations: [CGFloat] = [0.0, 1.0] 

    //Create a Gradient CA layer 
    let gradientLayer: CAGradientLayer = CAGradientLayer() 
    gradientLayer.colors = gradientColors 
    gradientLayer.locations = gradientLocations 

    gradientLayer.frame = self.view.bounds 
    self.view.layer.insertSublayer(gradientLayer, atIndex: 0) 
} 

Answer 1

Hãy nhìn vào thực hiện của tôi RadialGradientLayer, và cảm thấy tự do để sửa đổi nó

class RadialGradientLayer: CALayer { 

    override init(){ 

     super.init() 

     needsDisplayOnBoundsChange = true 
    } 

    init(center:CGPoint,radius:CGFloat,colors:[CGColor]){ 

     self.center = center 
     self.radius = radius 
     self.colors = colors 

     super.init() 

    } 

    required init(coder aDecoder: NSCoder) { 

     super.init() 

    } 

    var center:CGPoint = CGPointMake(50,50) 
    var radius:CGFloat = 20 
    var colors:[CGColor] = [UIColor(red: 251/255, green: 237/255, blue: 33/255, alpha: 1.0).CGColor , UIColor(red: 251/255, green: 179/255, blue: 108/255, alpha: 1.0).CGColor] 

    override func drawInContext(ctx: CGContext!) { 

     CGContextSaveGState(ctx) 

     var colorSpace = CGColorSpaceCreateDeviceRGB() 

     var locations:[CGFloat] = [0.0, 1.0] 

     var gradient = CGGradientCreateWithColors(colorSpace, colors, [0.0,1.0]) 

     var startPoint = CGPointMake(0, self.bounds.height) 
     var endPoint = CGPointMake(self.bounds.width, self.bounds.height) 

     CGContextDrawRadialGradient(ctx, gradient, center, 0.0, center, radius, 0) 

    } 

} 

Trong trường hợp của tôi, tôi cần nó với hai màu sắc chỉ và nếu bạn cần thêm màu sắc, bạn cần sửa đổi location mảng được khai báo trong drawInContext. Ngoài ra sau khi tạo đối tượng từ lớp này, đừng quên gọi số setNeedsDisplay() nếu không nó sẽ không hoạt động. Ngoài ra đôi khi tôi cần các gradient có kích thước khác nhau để bạn phải vượt qua tham số bán kính trong trình khởi tạo và điểm trung tâm của gradient của bạn

Answer 2

Đây là một tài nguyên thực sự tuyệt vời với một loạt các gradient và các yếu tố pha trộn đi kèm với một số hoạt ảnh . Cũng hoạt động trong SpriteKit. ;)

Answer 3

Khi bạn đặt trong bối cảnh các thiết bị, nền là thấy sai.

override func viewDidLoad() { 
    super.viewDidLoad() 
    //BACKGROUND FONDO 
    //A linear Gradient Consists of two colours: top colour and bottom colour 
    let topColor = UIColor(red: 15.0/255.0, green: 118.0/255.0, blue: 128.0/255.0, alpha: 1.0) 
    let bottomColor = UIColor(red: 84.0/255.0, green: 187.0/255.0, blue: 187.0/255.0, alpha: 1.0) 

    //Add the top and bottom colours to an array and setup the location of those two. 
    let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor] 
    let gradientLocations: [CGFloat] = [0.0, 1.0] 

    //Create a Gradient CA layer 
    let gradientLayer: CAGradientLayer = CAGradientLayer() 
    gradientLayer.colors = gradientColors 
    gradientLayer.locations = gradientLocations 

    gradientLayer.frame = self.view.bounds 
    self.view.layer.insertSublayer(gradientLayer, atIndex: 0) 
    //FIN BACKGROUND GRADIENT 

Answer 4

Đây là một thực hiện trong Swift 3 nếu bạn chỉ tìm kiếm một UIView nền radial gradient:

class RadialGradientLayer: CALayer { 

    var center: CGPoint { 
     return CGPoint(x: bounds.width/2, y: bounds.height/2) 
    } 

    var radius: CGFloat { 
     return (bounds.width + bounds.height)/2 
    } 

    var colors: [UIColor] = [UIColor.black, UIColor.lightGray] { 
     didSet { 
      setNeedsDisplay() 
     } 
    } 

    var cgColors: [CGColor] { 
     return colors.map({ (color) -> CGColor in 
      return color.cgColor 
     }) 
    } 

    override init() { 
     super.init() 
     needsDisplayOnBoundsChange = true 
    } 

    required init(coder aDecoder: NSCoder) { 
     super.init() 
    } 

    override func draw(in ctx: CGContext) { 
     ctx.saveGState() 
     let colorSpace = CGColorSpaceCreateDeviceRGB() 
     let locations: [CGFloat] = [0.0, 1.0] 
     guard let gradient = CGGradient(colorsSpace: colorSpace, colors: cgColors as CFArray, locations: locations) else { 
      return 
     } 
     ctx.drawRadialGradient(gradient, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0)) 
    } 

} 



class RadialGradientView: UIView { 

    private let gradientLayer = RadialGradientLayer() 

    var colors: [UIColor] { 
     get { 
      return gradientLayer.colors 
     } 
     set { 
      gradientLayer.colors = newValue 
     } 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     if gradientLayer.superlayer == nil { 
      layer.insertSublayer(gradientLayer, at: 0) 
     } 
     gradientLayer.frame = bounds 
    } 

} 

Answer 5

@IBDesignable class RadialGradientView: UIView { 

    @IBInspectable var outsideColor: UIColor = UIColor.red 
    @IBInspectable var insideColor: UIColor = UIColor.green 

    override func draw(_ rect: CGRect) { 
     let colors = [insideColor.cgColor, outsideColor.cgColor] as CFArray 
     let endRadius = sqrt(pow(frame.width/2, 2) + pow(frame.height/2, 2)) 
     let center = CGPoint(x: bounds.size.width/2, y: bounds.size.height/2) 
     let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil) 
     let context = UIGraphicsGetCurrentContext() 

     context?.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: endRadius, options: CGGradientDrawingOptions.drawsBeforeStartLocation) 
    } 
} 

Xem câu trả lời đầy đủ của tôi here.