1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性
2,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是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
创建一个简单的圆形进度条
//创建全局属性的ShapeLayer @property (nonatomic, strong) CAShapeLayer *shapeLayer;
-
(void)viewDidLoad { [super viewDidLoad];
//创建出CAShapeLayer self.shapeLayer = [CAShapeLayer layer]; self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置 self.shapeLayer.position = self.view.center; self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
//设置线条的宽度和颜色 self.shapeLayer.lineWidth = 1.0f; self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
//创建出圆形贝塞尔曲线 UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
//让贝塞尔曲线与CAShapeLayer产生联系 self.shapeLayer.path = circlePath.CGPath;
//添加并显示 [self.view.layer addSublayer:self.shapeLayer]; }
这时候我们运行下能看到会有一个圆
http://blog.it985.com/wp-content/uploads/2015/02/circle.png
现在我们要用到CAShapeLayer的两个参数,strokeEnd和strokeStart Stroke:用笔画的意思 在这里就是起始笔和结束笔的位置 Stroke为1的话就是一整圈,0.5就是半圈,0.25就是1/4圈。以此类推
如果我们把起点设为0,终点设为0.75
//设置stroke起始点 self.shapeLayer.strokeStart = 0; self.shapeLayer.strokeEnd = 0.75;
看下运行效果
起点和终点我们可以自己控制了,接下来我们在价格定时器,就可以完成我们的圆形进度条了 加个全局变量add,这是我们每次的递增量
@interface ViewController () { double add; }
再写个定时器
add = 0.1;//每次递增0.1 //用定时器模拟数值输入的情况 _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(circleAnimationTypeOne) userInfo:nil repeats:YES];
定时器每次时间到了执行的函数,这个比较简单就不解释了
-
(void)circleAnimationTypeOne { if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) { self.shapeLayer.strokeStart += add; }else if(self.shapeLayer.strokeStart == 0){ self.shapeLayer.strokeEnd += add; }
if (self.shapeLayer.strokeEnd == 0) { self.shapeLayer.strokeStart = 0; }
if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) { self.shapeLayer.strokeEnd = 0; } }
再来运行下我们来看看效果