基本介绍
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],都是可动画属性。
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)
}
效果如下
可以看到我们仅仅是设置了渐变的颜色就可以很好的实现渐变效果，接下来一起看看相关属性的设置
添加locations控制渐变点
gradientLayer.locations = [0.1, 0.5, 0.85]
效果如下
添加startPoint和endPoint控制渐变方向
水平渐变的效果
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
效果如下
斜渐变
gradientLayer.startPoint = CGPoint(x: 0.25, y: 0.25)
gradientLayer.endPoint = CGPoint(x: 0.75, y: 0.75)
效果如下
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)
}
效果如下
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)
}
效果如下
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
}
效果如下
