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