最終效果圖
CAShapeLayer
CAShapeLayer繼承自CALayer，根據(jù)貝塞爾曲線的路徑，可以繪制出各種形狀的圖形。簡單的說烤宙，UIBezierPath制定出繪制的路徑，然后CAShapeLayer根據(jù)指定的路徑繪制出相應(yīng)的形狀敛摘。
代碼
畫貝塞爾曲線最主要的就是startAngle與endAngle兩個屬性门烂，根據(jù)下圖標注可以按照需要來選擇角度。
要做出進度條的樣式兄淫，首先畫兩個圓屯远，一個作為底部灰色的，另一個是前面進度條圓徊端洹：
CAShapeLayer *frontCircle = [CAShapeLayer layer]; // 進度條圓弧
CAShapeLayer *backCircle = [CAShapeLayer layer]; //進度條底
[self.circleView.layer addSublayer:backCircle];
[self.circleView.layer addSublayer:frontCircle];
// 畫底
UIBezierPath *backPath = [UIBezierPath bezierPathWithArcCenter:self.circleView.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
backCircle.lineWidth = 12; // 線條寬度
backCircle.strokeColor = [[UIColor grayColor] CGColor]; // 邊緣線的顏色
backCircle.fillColor = [[UIColor clearColor] CGColor]; // 閉環(huán)填充的顏色
backCircle.lineCap = @"round"; // 邊緣線的類型
backCircle.path = backPath.CGPath; // 從貝塞爾曲線獲取到形狀
// 畫刻度
UIBezierPath *frontPath = [UIBezierPath bezierPathWithArcCenter:self.circleView.center radius:100 startAngle:M_PI endAngle:M_PI*2 clockwise:YES];
frontCircle.lineWidth = 12;
frontCircle.strokeColor = [[UIColor blueColor] CGColor];
frontCircle.fillColor = [[UIColor clearColor] CGColor];
frontCircle.lineCap = @"round";
frontCircle.path = frontPath.CGPath;
這樣一個簡單的進度條就出來了
接下來添加動畫效果慨丐，使用
CABasicAnimation根據(jù)CAShapeLayer來顯示動畫:
// 動畫
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"strokeEnd";
animation.duration = 1; // 動畫時長
animation.fromValue = @0; // 開始值
frontCircle.strokeEnd = 1;
// 給layer添加動畫
[frontCircle addAnimation:animation forKey:nil];
最后一步是添加小圓點，小圓點就是一個白色的view并通過動畫來改變小圓點的位置：
// 小圓點
UIView *roundView = [[UIView alloc] init];
roundView.frame = CGRectMake(50, 50, 8, 8);
roundView.layer.masksToBounds = YES;
roundView.layer.cornerRadius = 4;
roundView.backgroundColor = [UIColor whiteColor];
[self.circleView addSubview:roundView];
// 小圓點動畫
CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation1.duration = 1;
// 小圓點的路徑與進度條弧度一樣
animation1.path = frontPath.CGPath;
animation1.fillMode = kCAFillModeForwards;
animation1.removedOnCompletion = NO;
[roundView.layer addAnimation:animation1 forKey: nil];
這樣一個簡單的圓形進度條就完成了泄私，這里也有demo可以下載:(https://github.com/sunbin117/circleView)
