ios - Swift 中的径向渐变背景

Question

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

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations ...

Answer 1

如今，CAGradientLayer 已内置于 iOS。

就是这么简单:

多年来，您只需这样做:

class GlowBall: UIView {
    private lazy var pulse: CAGradientLayer = {
        let l = CAGradientLayer()
        l.type = .radial
        l.colors = [ UIColor.red.cgColor,
            UIColor.yellow.cgColor,
            UIColor.green.cgColor,
            UIColor.blue.cgColor]
        l.locations = [ 0, 0.3, 0.7, 1 ]
        l.startPoint = CGPoint(x: 0.5, y: 0.5)
        l.endPoint = CGPoint(x: 1, y: 1)
        layer.addSublayer(l)
        return l
    }()

    override func layoutSubviews() {
        super.layoutSubviews()
        pulse.frame = bounds
        pulse.cornerRadius = bounds.width / 2.0
    }

}
    

关键行是:

l.colors = [ UIColor.red.cgColor,
                UIColor.yellow.cgColor,
                UIColor.green.cgColor,
                UIColor.blue.cgColor]
l.locations = [ 0, 0.3, 0.7, 1 ]
    

请注意，您可以根据需要更改“拉伸(stretch)”...

l.locations = [ 0, 0.1, 0.2, 1 ]
    
    

使用你喜欢的任何颜色

l.colors = [ UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor,
                    UIColor.systemBlue.cgColor,
                    UIColor.systemPink.cgColor]
                l.locations = [ 0,0.1,0.2,0.3,0.4,0.5,0.6,1 ]
    

现在真的很容易。

非常有用的技巧:

假设您想要黄色，蓝色波段为 0.6:

l.colors = [ UIColor.yellow.cgColor,
                    UIColor.blue.cgColor,
                    UIColor.yellow.cgColor]
                l.locations = [ 0, 0.6, 1 ]
    

这很好。

    # yellow...
    # blue...
    # yellow...
    

但通常你会这样做:

    # yellow...
    # yellow...
    # blue...
    # yellow...
    # yellow...
    

注意两端各有两个黄色...

l.colors = [ UIColor.yellow.cgColor,
 UIColor.yellow.cgColor,
 UIColor.blue.cgColor,
 UIColor.yellow.cgColor,
 UIColor.yellow.cgColor]
    

通过这种方式，您可以控制蓝带的“多宽”:

在此示例中:蓝色波段将窄而尖锐:

l.locations = [ 0, 0.58, 0.6, 0.68, 1 ]
    

在这个例子中，蓝色带将宽而软:

l.locations = [ 0, 0.5, 0.6, 0.7, 1 ]
    

这就是您如何控制渐变并获得您想要的外观的真正秘诀。

---

如何使用...

请注意，这是 - 非常简单 - 一个 UIView !!

class GlowBall: UIView { ...

这样简单

1. 在 Storyboard 中，将 UIView 放置在您想要的位置

2. 在 Storyboard中，将类更改为“GlowBall”而不是 UIView

大功告成!