iOS CAShapeLayer示例

CAShapeLayer 介绍

• CAShapeLayer 继承自 CALayer ，可使用 CALayer 的所有属性
• CAShapeLayer 需要和贝塞尔曲线配合使用才有意义。贝塞尔曲线可以为其提供形状，而单独使用 CAShapeLayer 是没有任何意义的。
• 使用 CAShapeLayer 与贝塞尔曲线可以灵活多变的在视图以外的地方绘制图形

演示示例

注：关于贝塞尔曲线，请看这篇中的部分内容 ， Demo地址戳这里。

• 示例1

首先绘制路径，添加所需要的路径信息。

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 300)]; // 设置起点
[path addLineToPoint:CGPointMake(100, 300)]; // 划线到下一个点
[path addArcWithCenter:CGPointMake(150, 300) radius:50 startAngle:M_PI endAngle:M_PI*3 clockwise:YES]; // 花弧度，顺时针
[path moveToPoint:CGPointMake(200, 300)]; // 将当前点移动到圆的最右边
[path addLineToPoint:CGPointMake(280, 300)]; // 继续画直线

创建 CAShapeLayer 对象，可以设置图形的颜色，样式，宽度等信息。

CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = 3; // 线条宽度
layer.strokeColor = [UIColor redColor].CGColor; // 线条颜色
layer.strokeStart = 0.0f; // 开始
layer.strokeEnd = 1.0f;	// 结束
layer.lineJoin = kCALineJoinRound; // 连接处样式
layer.lineCap = kCALineCapRound; // 起点终点样式
layer.fillColor = [UIColor clearColor].CGColor; // 填充色，默认为黑色
[self.view.layer addSublayer:layer]; // 加到view的layer上
layer.path = path.CGPath; // 贝塞尔路径赋值

让图形动起来。

// 添加动画
CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
ani.duration = 3;
ani.repeatCount = HUGE_VALF;
ani.fromValue = [NSNumber numberWithFloat:0.0];
ani.toValue = [NSNumber numberWithFloat:1.0];
[layer addAnimation:ani forKey:@""];

• 示例2

我们这里自定义一个LoadingCircleView;

@interface LoadingCircleView : UIView
@property(strong,nonatomic)UIColor *fillColor;    // 填充色
@property(assign,nonatomic)CGFloat progress;    // 进度
@end

@interface LoadingCircleView(){
    UIBezierPath *path;
    CAShapeLayer *layer;
}
@end
@implementation LoadingCircleView
-(void)setProgress:(CGFloat)progress{
    _progress = progress;
    // 计算应该终点弧度
    CGFloat progressRadian = M_PI*2*self.progress + M_PI*3/2.0;
    if (path==nil) {
        path = [UIBezierPath bezierPath];
    }
    // 绘制路径
    [path moveToPoint:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0)];
    [path addLineToPoint:CGPointMake(self.bounds.size.width/2.0, 0)];
    [path addArcWithCenter:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0) radius:(self.viewWidth-1)/2.0 startAngle:M_PI*3/2.0 endAngle:progressRadian clockwise:YES];
    if (layer==nil) {
        layer = [CAShapeLayer layer];
        layer.fillColor = self.fillColor.CGColor;
    }
    // 将绘制的路径赋值给layer
    layer.path = path.CGPath;
    [self.layer addSublayer:layer]; 
}
// 默认的填充色
-(UIColor *)fillColor{
    if (_fillColor==nil) {
        _fillColor = [UIColor whiteColor];
    }
    return _fillColor;
}
@end

使用示例

- (void)viewDidLoad {
    [super viewDidLoad];
	self.cicleView = [[LoadingCircleView alloc] initWithFrame:CGRectMake(0, 400, 50, 50)];
	self.cicleView.centerX = self.view.centerX;
	self.cicleView.fillColor = RandColor;
	[self.view addSubview:self.cicleView];
	timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(progress) userInfo:nil repeats:YES];
	[timer setFireDate:[NSDate date]];
}
-(void)progress{
    progress += 0.01;
    self.cicleView.progress = progress;
    if (progress>1) {
        [timer invalidate];
        timer = nil;
        [self.cicleView removeFromSuperview];
    }
}

• 更多使用案例
  
  使用到了 CADisplayLink & CAShapeLayer

参考文章地址，Demo地址。

高级使用

• CAShapeLayer 进阶地址