Swift中的径向渐变背景

我一直在试图产生一个基本的径向渐变背景，但没有成功。 我设法得到一个线性渐变工作，如下面的代码所示，但我不知道如何使用不同的颜色放射状 – 如下图所示。 任何帮助将不胜感激。 🙂

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

看看我的RadialGradientLayer的实现，并随意修改它

 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) } } 

在我的情况下，我只需要两种颜色，如果你需要更多的颜色，你需要修改在drawInContext声明的location数组。 同样在从这个类创build对象之后，不要忘记调用它的setNeedsDisplay()否则它不会工作。 有时我也需要不同的大小渐变，所以这就是为什么你必须传递初始化中的半径参数和渐变的中心点

Answer 2

这里是Swift 3中的一个实现，如果你只是在寻找一个UIView径向渐变背景：

 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 3

这里有一个非常好的资源链接 ，包含一些animation中包含的一系列渐变和混合因素。 在SpriteKit工作也。 ;）

Answer 4

 @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) } } 

在这里看到我的完整答案。

Answer 5

当你放置在设备的横向，背景是错误的。

 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