CAShapeLayer绘制环形进度条

来源:互联网 发布:手机我的世界枪械js 编辑:程序博客网 时间:2024/05/01 04:24

看完极客学院的视频,记录一下自己的收获吧。

UIView的drowRect方法是Core Graphics框架,使用cpu渲染。而CAShapeLayer方法式CoreAnimation框架,使用gpu,效率更高,优化内纯CAShapelayer必须依赖贝塞尔曲线提供path修改形状,不然没有任何意义

首先我们需要创建一个CAShapeLayer

CAShapeLayer *shapeLayer;

然后实例化该对象并设置相关属性

shapeLayer = [CAShapeLayer layer];//设置shapeLayer的大小shapeLayer.frame       = CGRectMake(0, 0, 200, 200);//设置填充颜色shapeLayer.fillColor   = [UIColor clearColor].CGColor;//设置边界线宽shapeLayer.lineWidth   = 2.f;//设置边界线的颜色shapeLayer.strokeColor = [UIColor redColor].CGColor;//设置shapeLayer的位置(shapeLayer的position相当于view的center属性)shapeLayer.position    = self.view.center;[self.view.layer addSublayer:shapeLayer];

shapeLayer设置完毕之后需要一个贝塞尔曲线路径来指引shapeLayer,不然没有意义。

UIBezierPath *path     = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];

将shapeLayer与贝塞尔曲线联系起来

shapeLayer.path = path.CGPath;

设置初始起始和结束位置

shapeLayer.strokeStart = 0;shapeLayer.strokeEnd   = 0;

添加定时器实现自动绘制曲线

NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:3    target:self    selector:@selector(updateStrokeEnd)    userInfo:nil    repeats:YES];    //3秒执行一次结束点变换方法- (void)updateStrokeEnd {    if (shapeLayer.strokeEnd != 1) {        shapeLayer.strokeEnd += 0.33;    }//自增0.33}

到这里发现一个问题,虽说环形进度条是绘制完毕了,但是起始地点(当strokeStart=0时)在右边。想要改到上边需要变换一种贝塞尔曲线的声明方法

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:-M_PI_2 endAngle:M_PI_2 + M_PI clockwise:YES];

这里设置了贝塞尔曲线的中心点,半径,起始弧度,结束弧度和是否为顺时针。
至此,简单的环形进度条绘制完毕。

1 0
原创粉丝点击