CAShapeLayer 畫出彩色進度條

先簡單的介紹下CAShapeLayer

1、CAShapeLayer繼承自CALayer，可使用CALayer的所有屬性

2、CAShapeLayer需要和貝塞爾曲線配合使用才有意義。

Shape：形狀

貝塞爾曲線可以為其提供形狀，而單獨使用CAShapeLayer是沒有任何意義的。

3、使用CAShapeLayer與貝塞爾曲線可以實現不在view的DrawRect方法中畫出一些想要的圖形

關于CAShapeLayer和DrawRect的比較

DrawRect：DrawRect屬于CoreGraphic框架，占用CPU，消耗性能大

CAShapeLayer：CAShapeLayer屬于CoreAnimation框架，通過GPU來渲染圖形，節省性能。動畫渲染直接提交給手機GPU，不消耗內存

貝塞爾曲線與CAShapeLayer的關系

1、CAShapeLayer中shape代表形狀的意思，所以需要形狀才能生效

2、貝塞爾曲線可以創建基于矢量的路徑

3、貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環，所以繪制出了Shape

4、用于CAShapeLayer的貝塞爾曲線作為Path，其path是一個首尾相接的閉環的曲線，即使該貝塞爾曲線不是一個閉環的曲線

說完了簡介們來看一下如何創建一個簡單的CAShapeLayer

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(100, 100, 100, 100);
shapeLayer.backgroundColor = [UIColor yellowColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

配合路徑使用

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
shapeLayer.path = path.CGPath;

填充路徑顏色: strokeColor

shapeLayer.strokeColor = [UIColor greenColor].CGColor;

填充路徑內顏色:fillColor

shapeLayer.fillColor = [UIColor lightGrayColor].CGColor;

將背景顏色和路徑內顏色設置為透明

shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;

如果要實現彩色的精度條,我選擇利用蒙版mask

先讓shapeLayer 與 路徑 '分離'

CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:200 startAngle:0 endAngle:M_PI * 2  clockwise:YES];
layer.path = path.CGPath;
layer.lineWidth = 3;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;
layer.frame = CGRectMake(0, 0, 50, 50);
layer.backgroundColor = [UIColor yellowColor].CGColor;
[self.view.layer addSublayer:layer];

再創建一個漸變圖層做成圓形狀

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, self.view.center.y - 200, 400, 400);
gradientLayer.startPoint = CGPointMake(0.5, 0);
gradientLayer.endPoint = CGPointMake(0.5, 1);
NSMutableArray *colors = [NSMutableArray array];
for (int hue  = 0; hue lt;= 360; hue  ) {
    UIColor *color = [UIColor colorWithHue:hue / 360.0 saturation:1.0 brightness:1.0 alpha:1];
    [colors addObject:(id)color.CGColor];
}
gradientLayer.colors = colors;
[self.view.layer addSublayer:gradientLayer];    gradientLayer.cornerRadius = 200;

'套上'蒙版即可搞定

gradientLayer.mask = layer;

如果想實現動畫效果也是可以滴

// 動畫
    layer.speed = 0.1;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@quot;strokeEndquot;];
    animation.duration = 1;
    animation.fromValue = http://www.tuicool.com/articles/@0;
    animation.toValue = @1;
    [layer addAnimation:animation forKey:@quot;:joy:好棒#55358;#56599;quot;];

除了圓形還可以是圓弧只要修改strokeStart 和 strokeEnd即可

// 動畫
    layer.strokeStart = 0;
    layer.strokeEnd = 0.8;
    layer.speed = 0.1;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@quot;strokeEndquot;];
    animation.duration = 1;
    animation.fromValue = http://www.tuicool.com/articles/@0;
    animation.toValue = @0.8;
    [layer addAnimation:animation forKey:@quot;:joy:好棒#55358;#56599;quot;];