CALayer之CAGranientLayer渐变效果

关于CAGradientLayer类

CAGradientLayer类是用于在其背景色上绘制一个颜色渐变，以填充层的整个形状，包括圆角。这个类继承自CALayer类

Gradient:本身就是梯度的意思，因此在CAGradientLayer中可以理解为渐变的意思.
 1>CAGradientLayer用于处理渐变色的层结构
 2>CAGradientLayer的渐变色可以做隐式动画
 3>大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。
 4>CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统

渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关。根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。

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

 与Quartz 2D中的渐变处理类似，一个渐变有一个起始位置(startPoint)和一个结束位置(endPoint)，在这两个位置之间，我们可以指定一组颜色值(colors，元素是CGColorRef对 象)，可以是两个，也可以是多个，每个颜色值会对应一个位置(locations)。

另外，渐变还分为轴向渐变和径向渐变。  

关于CAGradientLayer的一些属性

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

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

@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的具体使用

颜色渐变

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setViewColorGradientLayer];

}
/**
 *  设置颜色渐变
 */
-(void)setViewColorGradientLayer{
    CAGradientLayer * layer = [CAGradientLayer layer];
    layer.frame = self.view.frame;
    //设置透明度
    layer.opacity = 0.7;
    //颜色分配
    layer.colors =@[(id)[UIColor colorWithRed:1.000 green:0.37 blue:0.624 alpha:1.00].CGColor,
                    (id)[UIColor colorWithRed:0.597 green:1.000 blue:0.657 alpha:1.00].CGColor];
    //起始点
    layer.startPoint = CGPointMake(0, 0);
    //终止点
    layer.endPoint =CGPointMake(1, 1);
    //颜色分割线
    layer.locations =@[@0.4,@0.7];
    [self.view.layer addSublayer:layer];
}

效果:

注意:

1>颜色分配严格遵守Layer的坐标系统,locations,startPoint,endPoint都是以Layer坐标系统进行计算的.

2>locations并不是表示颜色值所在位置,它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.

3>CAGradientLayer 的这四个属性 colors  locations  startPoint  endPoint 都是可以进行动画.(待研究);

透明度渐变

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setViewColorGradientLayer];

}
/**
 *  设置透明度渐变
 */
-(void)setViewColorGradientLayer{
    CAGradientLayer * newShadow = [[CAGradientLayer alloc]init];
    newShadow.frame =self.view.bounds;
    newShadow.colors =[NSArray arrayWithObjects:
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0] CGColor] ,
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0.1] CGColor],
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0.2] CGColor],
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0.3] CGColor],
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0.4] CGColor],
                       (id)[[[UIColor blackColor] colorWithAlphaComponent:0.5] CGColor],
                       nil];
    [self.view.layer addSublayer:newShadow];

效果:

 关于配合CAShapeLayer使用

<pre code_snippet_id="1645687" snippet_file_name="blog_20160413_3_5229880" name="code" class="objc">@interface RootViewController ()

@property (nonatomic, strong) GCDTimer *timer;
@end

//将常数转换为度数
#define   DEGREES(degrees)  ((M_PI * (degrees))/ 180.f)
@implementation RootViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
//<span style="font-family: Arial, Helvetica, sans-serif;">CAGradientLayer的相关设置</span>
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.backgroundColor = [UIColor blueColor].CGColor;
    colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
    colorLayer.position = self.view.center;
    [self.view.layer addSublayer:colorLayer];
    // 颜色分配
    colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor whiteColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor];
    colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
    // 起始点
    colorLayer.startPoint = CGPointMake(0, 0);
    // 结束点
    colorLayer.endPoint   = CGPointMake(1, 0);
//<span style="font-family: Arial, Helvetica, sans-serif;">CAShapeLayer的相关设置</span>
    CAShapeLayer *circle = [RootViewController LayerWithCircleCenter:CGPointMake(102, 100)
                                                              radius:80
                                                          startAngle:DEGREES(0)
                                                            endAngle:DEGREES(360)
                                                           clockwise:YES
                                                     lineDashPattern:nil];
    circle.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:circle];
    circle.strokeEnd = 1.f;
    colorLayer.mask = circle;
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{

        static int i = 0;
        if (i++ % 2 == 0)
        {
            CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
            fadeAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
            fadeAnim.toValue   = @[@(1.0), @(1.1), @(1.2)];
            fadeAnim.duration  = 1.5;
            [colorLayer addAnimation:fadeAnim forKey:nil];
        }

    } timeInterval:NSEC_PER_SEC];
    [_timer start];
}

+ (CAShapeLayer *)LayerWithCircleCenter:(CGPoint)point
                                 radius:(CGFloat)radius
                             startAngle:(CGFloat)startAngle
                               endAngle:(CGFloat)endAngle
                              clockwise:(BOOL)clockwise
                        lineDashPattern:(NSArray *)lineDashPattern
{
    CAShapeLayer *layer = [CAShapeLayer layer];
    
    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
                                                        radius:radius
                                                    startAngle:startAngle
                                                      endAngle:endAngle
                                                     clockwise:clockwise];
    // 获取path
    layer.path = path.CGPath;
    layer.position = point;
    
    // 设置填充颜色为透明
    layer.fillColor = [UIColor clearColor].CGColor;
    
    // 获取曲线分段的方式
    if (lineDashPattern)
    {
        layer.lineDashPattern = lineDashPattern;
    }
    
    return layer;
}

@end