CAShapeLayer介绍
CAShapeLayer继承自CALayer，可使用CALayer的所有属性。
CAShapeLayer需要和贝塞尔曲线配合使用才有意义。
使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形
关于CAShapeLayer和DrawRect的比较
- DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
- CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存
贝塞尔曲线与CAShapeLayer的关系
- CAShapeLayer中shape代表形状的意思，所以需要形状才能生效
- 贝塞尔曲线可以创建基于矢量的路径
- 贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape
- 用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线.
总结：形状由贝塞尔曲线决定，过程由strokeStart ,strokeEnd决定。可以使用timer，slider(滑块)，动画等改变数值进行控制。
练习一下CAShapeLayer和UIBezierPath的知识，所以做个小demo。
#import <UIKit/UIKit.h>
@interface YBProgressView : UIView
@property (nonatomic, assign) float progress; /**< 进度条进度 0-1*/
@property(nonatomic,assign)float progressWidth;
@property(nonatomic,strong)UIColor *bottomCircleColor;
@property(nonatomic,strong)UIColor *topCircleColor;
@end
#import "YBProgressView.h"
#define WIDTH self.frame.size.width
#define HEIGHT self.frame.size.height
@interface YBProgressView ()
@property(nonatomic,strong)UILabel *centerLabel;
@property(nonatomic,strong)CAShapeLayer *topLayer;
@property(nonatomic,strong)CAShapeLayer *bottomLayer;
@end
@implementation YBProgressView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
[self initData];
[self loadUI];
}
return self;
}
- (void)initData
{
self.progressWidth = 3.0;
self.bottomCircleColor = [UIColor lightGrayColor];
self.topCircleColor = [UIColor redColor];
}
- (void)loadUI
{
CGPoint center = CGPointMake(WIDTH/2.0, WIDTH/2.0);
CGFloat radius = (WIDTH-self.progressWidth*2.0)/2.0;
CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI*3.0/2.0;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
CAShapeLayer *bottomLayer = [CAShapeLayer layer];
bottomLayer.path = path.CGPath;
bottomLayer.frame = self.bounds;
bottomLayer.fillColor = [UIColor clearColor].CGColor;
bottomLayer.strokeColor = self.bottomCircleColor.CGColor;
[self.layer addSublayer:bottomLayer];
self.bottomLayer = bottomLayer;
CAShapeLayer *topLayer = [CAShapeLayer layer];
topLayer.path = path.CGPath;
topLayer.frame = self.bounds;
topLayer.fillColor = [UIColor clearColor].CGColor;
topLayer.strokeColor = self.topCircleColor.CGColor;
topLayer.strokeEnd = 0;
[self.layer addSublayer:topLayer];
self.topLayer = topLayer;
UILabel *centerlab = [[UILabel alloc]init];
centerlab.frame = self.bounds;
centerlab.textAlignment = NSTextAlignmentCenter;
self.centerLabel = centerlab;
[self addSubview:centerlab];
}
- (void)setProgressWidth:(float)progressWidth
{
if (_progressWidth!= progressWidth) {
_progressWidth = progressWidth;
self.bottomLayer.lineWidth = self.progressWidth;
self.topLayer.lineWidth = self.progressWidth;
}
}
- (void)setTopCircleColor:(UIColor *)topCircleColor
{
if (_topCircleColor != topCircleColor) {
_topCircleColor = topCircleColor;
self.topLayer.strokeColor =_topCircleColor.CGColor;
}
}
- (void)setBottomCircleColor:(UIColor *)bottomCircleColor
{
if (_bottomCircleColor != bottomCircleColor) {
_bottomCircleColor = bottomCircleColor;
self.bottomLayer.strokeColor = _bottomCircleColor.CGColor;
}
}
- (void)setProgress:(float)progress{
if (_progress != progress) {
_progress = progress;
if (progress >= 1.0 || progress < 0) {
return;
}
self.topLayer.strokeEnd = progress;
self.centerLabel.text = [NSString stringWithFormat:@"%.02f%%",progress*100];
}
}
@end
测试一下
YBProgressView *view = [[YBProgressView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
view.topCircleColor = [UIColor purpleColor];
view.bottomCircleColor = [UIColor yellowColor];
view.progressWidth = 10;
[self.view addSubview:view];
[NSTimer scheduledTimerWithTimeInterval:0.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
view.progress += 0.01;
}];
A282FE4D-7F7B-4062-B724-B7B821DFDEDD.png
