用到的類及其簡單的解釋：
1、UIBezierPath：使用此類可以定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀
2、CAShapeLayer：繼承自CALayer，因此，可使用CALayer的所有屬性。但是，CAShapeLayer需要和貝塞爾曲線配合使用才有意義。
3、CABasicAnimation：使用方式就是基本的關鍵幀動畫。所謂關鍵幀動畫，就是將Layer的屬性作為KeyPath來注冊，指定動畫的起始幀和結束幀，然后自動計算和實現中間的過渡動畫的一種動畫方式。
4、CATransaction：CATransaction的作用是保證多個“Animatable”的變化同時進行。也就是說CALayer的屬性修改需要依賴CATransaction。
扇形代碼：
- (void)createSectorView{
UIView *bgView = [[UIView alloc]initWithFrame:self.bounds];
bgView.backgroundColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:0.4];
[self addSubview:bgView];
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
CGFloat centerX = width / 2;
CGFloat centerY = height / 2;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:width / 4 startAngle:(CGFloat)(-M_PI / 2) endAngle:(CGFloat)(3 * M_PI / 2) clockwise:YES];
_shapeLayer = [CAShapeLayer layer];
[bgView.layer addSublayer:_shapeLayer];
_shapeLayer.fillColor = [UIColor clearColor].CGColor;
_shapeLayer.strokeColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:0.6].CGColor;
_shapeLayer.lineWidth = width / 2.0;
_shapeLayer.path = bezierPath.CGPath;
bgView.layer.mask = _shapeLayer;
}
如果你根據下載的進度來控制動畫，方法如下：
- (void)startAnimationWithProgress:(CGFloat)progress {
[CATransaction begin];
[CATransaction setAnimationDuration:0.1];
[CATransaction setCompletionBlock:^{
}];
[self.shapeLayer setStrokeEnd:progress];
[CATransaction commit];
}
如果想直接是一個扇形的動畫：
- (void)startAnimation{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"strokeEnd";
animation.duration = 2.0;
animation.fromValue = @0.0;
animation.toValue = @1.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.removedOnCompletion = NO;
//animation.fillMode = kCAFillModeRemoved;
//[_shapeLayer setStrokeEnd:toEnd];
[animation setDelegate:self];
[_shapeLayer addAnimation:animation forKey:@"strokeEndAnimation"];
}
效果圖如下：
效果.gif
