Swift - CAGradientLayer

基本介绍

CAGradientLayer是用来生成两种或更多颜色平滑渐变的。用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的，但是CAGradientLayer的真正好处在于绘制使用了硬件加速。

属性

open class CAGradientLayer : CALayer {   
    open var colors: [Any]?
    open var locations: [NSNumber]?   
    open var startPoint: CGPoint
    open var endPoint: CGPoint
    open var type: CAGradientLayerType
}

属性解析

• colors

颜色数组，默认为nil,该数组定义了每一个渐变值的颜色。这个数组成员接受CGColorRef类型的值,如果你愿意，colors属性可以包含很多颜色，所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。是可动画属性

• locations

可选的数组，定义了每一个渐变点的位置(即定义了colors属性中每个不同颜色的位置)，范围在[0,1],数组中的值必须是渐变增加，如果数组为nil，那么将均匀渐变，当渲染的时候，颜色数组值会被映射到输出颜色空间。默认为nil,是可动画属性。

• startPoint和endPoint

startPoint和endPoint属性，它们决定了渐变的方向。startPoint就是第一个渐变点，endPoint就是最后一个渐变点。这两个参数是以单位坐标系进行的定义，当进行绘制内容的时候会映射到layer的矩形区域，左上角坐标是[0,0]，右下角坐标是[1,1]。默认值是[.5,0]和[.5,1],都是可动画属性。

2.png

• type

默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值其它选项不能使用。

实战效果

1、简单使用CAGradientLayer

 // 基本渐变效果
func basicGraident() {
   let gradientLayer = CAGradientLayer()
   gradientLayer.frame = CGRect(x: 20, y: 100, width: 280, height: 200)

    // 设置渐变颜色
    let colors = [UIColor.cyan.cgColor,
                  UIColor.red.cgColor,
                  UIColor.yellow.cgColor]
     gradientLayer.colors = colors

     view.layer.addSublayer(gradientLayer)
 }

效果如下

屏幕快照 2018-11-16 下午3.37.36.png

可以看到我们仅仅是设置了渐变的颜色就可以很好的实现渐变效果，接下来一起看看相关属性的设置

添加locations控制渐变点

 gradientLayer.locations = [0.1, 0.5, 0.85]

效果如下

屏幕快照 2018-11-16 下午3.47.07.png

添加startPoint和endPoint控制渐变方向

水平渐变的效果

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

效果如下

屏幕快照 2018-11-16 下午3.50.01.png

斜渐变

gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.25)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.75)

效果如下

屏幕快照 2018-11-16 下午5.17.45.png

2、导航栏渐变

extension CAGradientLayer

extension CAGradientLayer {
    convenience init(frame: CGRect, colors: [UIColor]) {
        self.init()
        self.frame = frame
        self.colors = []
        for color in colors {
            self.colors?.append(color.cgColor)
        }
        startPoint = CGPoint(x: 0, y: 0)
        endPoint = CGPoint(x: 0, y: 1)
    }

    func createGradientImage() -> UIImage? {
        var image: UIImage? = nil
        UIGraphicsBeginImageContext(bounds.size)
        if let context = UIGraphicsGetCurrentContext() {
            render(in: context)
            image = UIGraphicsGetImageFromCurrentImageContext()
        }
        UIGraphicsEndImageContext()
        return image
    }
}

extension UINavigationBar

extension UINavigationBar {
    func setGradientBackground(colors: [UIColor]) {

        var updatedFrame = bounds
        updatedFrame.size.height += self.frame.origin.y
        let gradientLayer = CAGradientLayer(frame: updatedFrame, colors: colors)

        setBackgroundImage(gradientLayer.createGradientImage(), for: UIBarMetrics.default)
    }
}

使用

func navigationBarAddGradient() {
    let colors = [UIColor(red: 221/255, green: 34/255, blue: 13/255, alpha: 1),
                  UIColor(red: 247/255, green: 113/255, blue: 98/255, alpha: 1)]

    navigationController?.navigationBar.setGradientBackground(colors: colors)
}

效果如下

屏幕快照 2018-11-16 下午4.21.28.png

参考文章

3、添加渐变动画

 func animationGradientLayer() {
        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = [0.0, 0.15, 0.25]
        animation.toValue = [0.75, 1.0, 1.0]
        animation.duration = 2
        animation.repeatCount = Float.infinity
        gradientLayer.add(animation, forKey: nil)
  }

效果如下

gr.2018-11-16 16_58_38.gif

4、文本添加渐变颜色

  func textGradient() {
        let gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
        view.addSubview(gradientView)

        // 渐变layer
        let gradient = CAGradientLayer()
        gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = gradientView.bounds
        gradientView.layer.addSublayer(gradient)

        // 创建label
        let label = UILabel(frame: gradientView.bounds)
        label.text = "Hello World"
        label.font = UIFont.boldSystemFont(ofSize: 30)
        label.textAlignment = .center
        gradientView.addSubview(label)

        // 设置mask
        gradientView.mask = label
    }

效果如下

屏幕快照 2018-11-16 下午5.10.46.png

参考

CAGradientlayer