简介:CAGradientLayer作为CALayer的子类,唯一的用途就是用来做颜色渐变,梯度动画效果等。首先要使用CAGradientLayer, 最基本的四个步骤
1. 初始化一个CAGradientLayer实例
2. 设置CAGradientLayer实例的frame
3. 给这个实例设置所有要渐变的颜色
4. 把这个实例Layer添加到你想要展示的View的layer上去
CAGradientLayer主要有下面几个重要的属性:colors(要展示的渐变颜色数组), locations(每个颜色值开始的位置), startPoint 和 endPoint (渐变颜色的方向)。 下面一一介绍。(以下代码以swift 3为准)
1.基本应用
var gradientlayer: CAGradientLayer! // 1. 创建CAGradientLayer实例
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
createGradientLayer()
}
func createGradientLayer() {
gradientlayer = CAGradientLayer()
gradientlayer.frame = view.bounds //2. 设置frame
gradientlayer.colors = [UIColor.black().cgColor, UIColor.blue().cgColor] // 3. 设置要展示的颜色
view.layer.addSublayer(gradientlayer) // 4. 添加到目标view的layer上
}
2.locations属性
func createGradientLayer() {
...
// locations属性代表每个颜色开始的位置,其中第一个0.1代表
// 第一个颜色到gradientlayer.frame的10%处为止,第二个0.9
// 表示第二个颜色从gradientlayer.frame的90%处开始,0.4~0.9
// 中间的部分是渐变部分
gradientlayer.locations = [0.1, 0.9]
...
}
执行结果如下:
下面,稍微更改一下,把locations 改为 [0.1, 0.1]
gradientlayer.locations = [0.1, 0.1]
执行效果应该是这样的:黑色到10%的位置结束,蓝色从10%的位置开始,中间没有渐变颜色
3.startPoint 和 endPoint
startPoint指示的是渐变颜色的开始位置,endPoint指示的是渐变颜色的结束位置, 两者结合起来就代表了渐变颜色的方向。这里的位置对应的坐标系如下图所示(如图,这里的坐标值x,y是在0.0~1.0之间的值),不多解释
比如,设置startPoint和endPoint如下
gradientlayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientlayer.endPoint = CGPoint(x: 1.1, y: 1.1)
展示结果应该是斜对角方向的颜色渐变(因为上面设置了locations=[0.1,0.1], 所以这里是没有颜色渐变的)