Learning CALayer Part1: CAGradientLayer

CAGradientLayer是CALayer的子类，它能够绘制一个渐变层
除了继承自父类的属性外，CAGradientLayer还有下边几个自己的属性

colors :颜色数组，用来填充渐变的颜色
locations:是一个坐标数组，用来显示渐变开始的位置 参数是 0-1
endPoint:渐变结束的位置 默认值是（0.5,1）参数是 0-1
startPoint: 渐变开始的位置 默认值是（0.5,0）参数是 0-1

D4764B1D-722B-4193-A5DA-3BC7E66D86CA.png

从坐标图可以看出 （0，0）为左上角 （1, 1）为右下角
type: 渐变绘制的样式，默认是 kCAGradientLayerAxial(也只有这一种样式，所以压根不用设置)

Demo:

 let layer = CAGradientLayer()
 layer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)         
 layer.position = self.view.center 
 layer.colors = [UIColor.yellowColor().CGColor,UIColor.redColor().CGColor]          layer.locations = [0.3]        
 layer.startPoint = CGPointMake(0.5, 0)   
 layer.endPoint = CGPointMake(0.5, 1)
 self.view.layer.addSublayer(layer)

上边代码绘制了一个从上到下 黄色到红色的一个渐变

43870FB7-1C65-43ED-A508-37B3A66528FE.png

我们也可以再添加一个渐变颜色 只要在colors数组中再添加一个颜色 ，注意colors数组中的参数为CGColorRef 类型，记得要将UIColor转换一下

   layer.colors = [UIColor.yellowColor().CGColor,UIColor.redColor().CGColor, UIColor.blueColor().CGColor]

再修改一下新的渐变颜色开始的位置

   layer.locations = [0.3, 0.6]

这里的意思是从0.3位置开始到红色过度，从0.6开始到蓝色过度
运行一下结果是这样：

DB0DF171-E38D-49D2-89D7-EB31AB651252.png

如果要绘制一个从左上到右下的颜色渐变，只要修改一下 startPoint和 endPoint

  layer.startPoint = CGPointMake(0, 0)
  layer.endPoint = CGPointMake(1, 1)

运行一下结果是这样：

4676742E-69E8-4D29-A50A-47DB323EFCDF.png

在创建了一个CAGradientLayer后 我们就可以用它来做一点其他事啦 ~~
给jinx添加一个带有渐变的遮罩层：

EFC07B89-DC79-4D1C-B361-6E534B1F99C2.png

609D612E-190A-43BC-A845-01EEF8220687.png

  let layer = CAGradientLayer()      
  layer.frame = imageView.bounds
  layer.colors = [UIColor.blackColor().CGColor,UIColor.clearColor().CGColor]        layer.locations = [0.1]     
  layer.startPoint = CGPoint(x: 0.5, y: 0.2) 
  layer.endPoint = CGPoint(x: 0.5, y: 1)
  imageView.layer.mask = layer

创建了一个CAGradientLayer 然后传给 layer的mask属性

也可以创建一个带有渐变的切换动画， jinx 变身 ~ catalina!

gradientLayer.gif

步骤很简单
1.创建三个CAGradientLayer，分别将三个layer添加到baseView上
2.将baseView设置成catalinaView的maskView (maskView属性是在iOS8中添加的，功能类似layer的mask属性)
3.为gradientLayer分别添加动画

Demo下载地址

如果写的有什么不足的地方，欢迎大家留言或私信与我沟通，我会及时做出更正