今天主要講一些動畫的運用，也就是進度條，有弧形的，扇形的，圓形的。

其實沒什么難點，我封裝在一個個View里，直接調(diào)用就行，弧度跟著進度條走就OK的。
飲水思源，喜歡或者用得上就給個Star

UIBezierPath方法詳解

UIBezierPath 顧名思義，這是用貝塞爾曲線的方式來構(gòu)建一段弧線，你可以用任意條弧線來組成你想要的形狀

-(void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
center 圓弧圓心
radius 圓弧半徑
startAngle 開始弧度
endAngle 結(jié)束弧度
closewise 是否順時針

-(void)fill
填充顏色
-(void)stroke
線條顏色

注: 使用UIBezierPath繪畫的代碼寫在自定義視圖的drawRect:方法中

CAShaperLayer

CAShaperLayer也就是在現(xiàn)有的圖層上再次添加或覆蓋一層以達到界面在顯示時會呈現(xiàn)出不同形狀的效果

 fillColor 填充顏色
 strokeColor 邊框顏色
 lineWidth 線條寬度
 path 線條曲線
 strokeStart 開始角度
 strokeEnd 結(jié)束角度

注：進度條主要就以上方法

應(yīng)用界面調(diào)用

懶加載UISlider

- (UISlider *)sectorSlider{
if (_sectorSlider == nil) {
    _sectorSlider = [[UISlider alloc]initWithFrame:CGRectMake(winWidth/2.0 - 100, 100, 200, 10)];
    _sectorSlider.continuous = YES;
    [_sectorSlider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
    [_sectorSlider setMinimumValue:0.0];
    [_sectorSlider setMaximumValue:1.0];
}
return _sectorSlider;
 }

點擊調(diào)用UISlider方法

-(void)sliderValueChanged:(UISlider *)slider{
NSLog(@"---%f", slider.value);
self.percentLable.text = [NSString stringWithFormat:@"%.2f",slider.value * 100];
[self.animationView  setStartMove:slider.value];
[self.animationBallView setStartMove:slider.value];
[self.animationTimeView setStartMove:slider.value];
}

圓形進度條生成

1. UIBezierPath根據(jù)進度條隨時改變開始弧度和結(jié)束弧度，不設(shè)置中心point

   -(void)drawRect:(CGRect)rect {
   CGPoint point = CGPointMake(100, 100);
   CGFloat radius = 95.0f;
   
   UIBezierPath *ballPath = [UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:self.startAngle endAngle:self.endAngle clockwise:YES];
   
   [[UIColor greenColor]set];
   [ballPath fill];
   
   //    在球形的外面繪制一個描邊空心的圓形，不然很難看
   UIBezierPath *strokePath = [UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:0 endAngle:-0.00000001 clockwise:YES];
   [[UIColor lightGrayColor]set];
   [strokePath stroke];
   }
   
   
   -(void)setStartMove:(CGFloat)value{
   
    //    設(shè)置起始點，位置是根據(jù)進度動態(tài)變換的
   self.startAngle = M_PI_2 - value * M_PI;
   self.endAngle = M_PI_2 + value * M_PI;
   
   [self setNeedsDisplay];
   }
   

扇形進度條生成

1. UIBezierPath根據(jù)進度條隨時改變結(jié)束弧度，設(shè)置中心point

   -(void)drawRect:(CGRect)rect{
   CGPoint point = CGPointMake(100 , 100);
   CGFloat radius = 95.0f;
   CGFloat startAngle = - M_PI_2;
   CGFloat endAngle = startAngle + self.endAngle;
   UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
   [path addLineToPoint:point];
   [[UIColor greenColor]set];
   [path fill];
   UIBezierPath *strokePath = [UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:0 endAngle:-0.00000001 clockwise:YES];
   [[UIColor lightGrayColor]set];
   [strokePath stroke];
   
   } 
   -(void)setStartMove:(CGFloat)value{
   self.endAngle = value * M_PI * 2;
   [self setNeedsDisplay];
   }
   

弧形進度條生成

1. 先畫一個封閉的背景圓self.backShaperLayer

2. 根據(jù)圓弧先設(shè)置self.shaperLayer的開始，根據(jù)進度條的改變隨時改變結(jié)束弧度

   -(void)drawRect:(CGRect)rect{
   
   self.shapeLayer = [CAShapeLayer layer];
   self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
   self.shapeLayer.lineWidth = 6.0f;
   self.shapeLayer.strokeColor = [UIColor greenColor].CGColor;
   
   
   self.backShapeLayer = [CAShapeLayer layer];
   self.backShapeLayer.fillColor = [UIColor clearColor].CGColor;
   self.backShapeLayer.lineWidth = 6.0f;
   self.backShapeLayer.strokeColor = [UIColor darkGrayColor].CGColor;
   
   
   UIBezierPath * path = [UIBezierPath bezierPath];
   [path addArcWithCenter:CGPointMake(50, 50) radius:40 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
   
   self.shapeLayer.path = path.CGPath;
   self.shapeLayer.strokeStart = 0;
   self.shapeLayer.strokeEnd = self.toValue;
   self.backShapeLayer.path = path.CGPath;
   self.backShapeLayer.strokeStart = 0;
   self.backShapeLayer.strokeEnd = 1;
   [self.layer addSublayer:self.backShapeLayer];
   [self.layer addSublayer:self.shapeLayer];
   
   }
   -(void)setStartMove:(CGFloat)value{
   self.toValue = value;
   [self setNeedsDisplay];
   }
   

Dome: github地址