CAShapeLayer和CAGradientLayer 详解

普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的bounds值一致,它本身是有形状的,而且是矩形.而CAShapeLayer是没有形状的 他是基于CGPath来展示的，这与普通的layer有着很大的区别

CAShapeLayer有几个特点：

1、它基于一个给定的path，必须给予path，当给定的path是不完整的时候会自动首位想接

2、strokeStart以及strokeEnd代表着这个path中所占用的百分比

3、CAShapeLayer动画仅仅沿着边缘的效果动画效果，它实现不了填充效果

以下给出如何使用CAShapeLayer

 // 创建一个view
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:showView];
    showView.backgroundColor = [UIColor redColor];
    showView.alpha = 0.5;

  // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100 / 2.f, 100 / 2.f)
                                                        radius:100 / 2.f
                                                    startAngle:0
                                                      endAngle:M_PI * 2
                                                     clockwise:YES];

  // 创建一个shapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame         = showView.bounds;                // 与showView的frame一致
    layer.strokeColor   = [UIColor greenColor].CGColor;   // 边缘线的颜色
    layer.fillColor     = [UIColor clearColor].CGColor;   // 闭环填充的颜色
    layer.lineCap       = kCALineCapSquare;               // 边缘线的类型
    layer.path          = path.CGPath;                    // 从贝塞尔曲线获取到形状
    layer.lineWidth     = 4.0f;                           // 线条宽度
    layer.strokeStart   = 0.0f;
    layer.strokeEnd     = 0.1f;

  // 将layer添加进图层
    [showView.layer addSublayer:layer];

  // 3s后执行动画操作(直接赋值就能产生动画效果)
    [[GCDQueue mainQueue] execute:^{
        layer.speed       = 0.1;
        layer.strokeStart = 0.5;
        layer.strokeEnd   = 0.9f;
        layer.lineWidth   = 1.0f;
    } afterDelay:NSEC_PER_SEC * 3];

   // 给这个layer添加动画效果
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.5f];
    pathAnimation.toValue = [NSNumber numberWithFloat:0.8f];
    [layer addAnimation:pathAnimation forKey:nil]; 

   // 创建一个gradientLayer
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    gradientLayer.frame = showView.bounds;
    [gradientLayer setColors:[NSArray arrayWithObjects:
                               (id)[[UIColor redColor] CGColor],
                               (id)[[UIColor yellowColor] CGColor], nil]];
    [gradientLayer setLocations:@[@0.5,@0.9,@1]];
    [gradientLayer setStartPoint:CGPointMake(0.5, 1)];
    [gradientLayer setEndPoint:CGPointMake(0.5, 0)];

顺便说一下CAGratdientLayer 它是用来处理颜色渐变效果的

@property(copy) NSArray *colors

CAGradientLayer的两个重要属性：

1、@property(copy) NSArray *colors

1. [NSArray arrayWithObjects:(id)[[[UIColor redColor] colorWithAlphaComponent:1] CGColor],  
2.                           (id)[[[UIColor yellowColor] colorWithAlphaComponent:1] CGColor],  
3.                           (id)[[[UIColor blueColor] colorWithAlphaComponent:1] CGColor],  
4.                           (id)[[UIColor clearColor] CGColor],  
5.               nil];  

这个定义了一个颜色数组

2、@property(copy) NSArray ＊locations

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

1. [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],  
2.                           [NSNumber numberWithFloat:0.5],  
3.                           [NSNumber numberWithFloat:0.7],  
4.                           [NSNumber numberWithFloat:1.0],  
5.                           nil];  

1. [NSArray arrayWithObjects:[NSNumber numberW

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

CAGradientLayer还有几个属性

3、

@property CGPoint startPoint

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

@property  CGPoint  endPoint

映射Locations中的最后一个位置 比如（1，1）表示最后一个值在右下角，默认值是（0.5，1）

1. [NSArray arrayWithObjects:[NSNumber numberW