通过CAGradientLayer制作渐变色效果【原创】

看了极客学院的视频之后写的一篇博客，觉得不错，还是作为笔记使用。

简单介绍一下CAGradientLayer吧。

Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解

1，CAGradientLayer用于处理渐变色的层结构

2，CAGradientLayer的渐变色可以做隐式动画

3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。关于CAShapeLayer可以看我的这篇博客
基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【原创】

4，CAGradientLayer可以用作PNG的遮罩效果
地址：CAGradientLayer简介 http://blog.csdn.net/ch_soft/article/details/7534542

CAGradientLayer可以方便的处理颜色渐变。

Properties：

@property(copy) NSArray *colors
渐变颜色的数组

[cpp] view
plaincopy

[NSArray arrayWithObjects:(id)[[[UIColor blackColor] colorWithAlphaComponent:1] CGColor],  

                          (id)[[[UIColor yellowColor] colorWithAlphaComponent:1] CGColor],  

                          (id)[[[UIColor blueColor] colorWithAlphaComponent:1] CGColor],  

                  (id)[[UIColor clearColor] CGColor],  

              nil];  

如上定义了四种颜色（最后一种是无色）。

@property(copy) NSArray *locations
渐变颜色的区间分布，locations的数组长度和color一致，这个值一般不用管它，默认是nil，会平均分布。

[cpp] view
plaincopy

[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],  

                          [NSNumber numberWithFloat:0.3],  

                          [NSNumber numberWithFloat:0.8],  

                          [NSNumber numberWithFloat:1.0],  

                          nil];  

注意这几个数字在0到1之间单调递增。

@property CGPoint startPoint
映射locations中第一个位置，用单位向量表示，比如（0，0）表示从左上角开始变化。默认值是(0.5,0.0)。

@property CGPoint endPoint
映射locations中最后一个位置，用单位向量表示，比如（1，1）表示到右下角变化结束。默认值是(0.5,1.0)。

@property(copy) NSString *type
默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值也无其它选项。

关于CAGradientLayer的坐标系统
为什么要提到CAGradientLayer的坐标系统呢？因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关




根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。呆会代码里会有写。

1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形

2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向
4，CAGradientLayer的颜色分割点是以0到1的比例来计算的

下面直接上代码，里面的注视都写好了。就不一一解释了

看下效果图




gif的质量不高，有明显失真。如果在真机或者模拟器上运行的话效果很好的，也很流畅。

奉上demo
ColorsView

原创文章，转载请署名出处。严禁用于商业用途。否则将追究法律责任！！！

本文永久地址：http://blog.it985.com/7986.html

本文出自 IT985博客 ，转载时请注明出处及相应链接。