转载

IOS贝塞尔曲线圆形进度条和加载动画

做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加。其中主要用到贝塞尔曲线。UIBezierPath是对CGContextRef的进一步封装,不多说直接上代码：

#import <UIKit/UIKit.h>  @interface CircleLoader : UIView  //进度颜色 @property(nonatomic, retain) UIColor* progressTintColor ;   //轨道颜色 @property(nonatomic, retain) UIColor* trackTintColor ;  //轨道宽度 @property (nonatomic,assign) float lineWidth;  //中间图片 @property (nonatomic,strong) UIImage *centerImage;  //进度 @property (nonatomic,assign) float progressValue;  //提示标题 @property (nonatomic,strong) NSString *promptTitle;  //开启动画 @property (nonatomic,assign) BOOL animationing;  //隐藏消失 - (void)hide;  @end

#import "CircleLoader.h" @interface CircleLoader () @property (nonatomic,strong) CAShapeLayer *trackLayer; @property (nonatomic,strong) CAShapeLayer *progressLayer; @end @implementation CircleLoader - (instancetype)initWithFrame:(CGRect)frame {  self = [super initWithFrame:frame];  if (self) {   self.backgroundColor=[UIColor clearColor];  }  return self; } -(void)drawRect:(CGRect)rect {  [super drawRect:rect];  _trackLayer=[CAShapeLayer layer];  _trackLayer.frame=CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);  _trackLayer.lineWidth=_lineWidth;  _trackLayer.strokeColor=_trackTintColor.CGColor;  _trackLayer.fillColor = self.backgroundColor.CGColor;  _trackLayer.lineCap = kCALineCapRound;  [self.layer addSublayer:_trackLayer];  _progressLayer=[CAShapeLayer layer];  _progressLayer.frame=CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);  _progressLayer.lineWidth=_lineWidth;  _progressLayer.strokeColor=_progressTintColor.CGColor;  _progressLayer.fillColor = self.backgroundColor.CGColor;  _progressLayer.lineCap = kCALineCapRound;  [self.layer addSublayer:_progressLayer];  if (_centerImage!=nil) {   UIImageView *centerImgView=[[UIImageView alloc]initWithImage:_centerImage];   centerImgView.frame=CGRectMake(_lineWidth, _lineWidth, self.frame.size.width-2*_lineWidth, self.frame.size.height-_lineWidth*2); //  centerImgView.center=self.center;   centerImgView.layer.cornerRadius=(self.frame.size.width+_lineWidth)/2;   centerImgView.clipsToBounds=YES;   [self.layer addSublayer:centerImgView.layer];  }  [self start]; } - (void)drawBackgroundCircle:(BOOL) animationing {  //贝塞尔曲线 0度是在十字右边方向   －M_PI/2相当于在十字上边方向  CGFloat startAngle = - ((float)M_PI / 2); // 90 Degrees  //  CGFloat endAngle = (2 * (float)M_PI) + - ((float)M_PI / 8);;  CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);  CGFloat radius = (self.bounds.size.width - _lineWidth)/2;  UIBezierPath *processPath = [UIBezierPath bezierPath]; // processPath.lineWidth=_lineWidth;    UIBezierPath *trackPath = [UIBezierPath bezierPath]; // trackPath.lineWidth=_lineWidth;  //---------------------------------------  // Make end angle to 90% of the progress  //---------------------------------------  if (!animationing) {   endAngle = (_progressValue * 2*(float)M_PI) + startAngle;  }  else  {   endAngle = (0.1 * 2*(float)M_PI) + startAngle;  }  [processPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];  [trackPath addArcWithCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES];  _progressLayer.path = processPath.CGPath;  _trackLayer.path=trackPath.CGPath; } - (void)start {  [self drawBackgroundCircle:_animationing];  if (_animationing) {   CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];   rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2.0];   rotationAnimation.duration = 1;   rotationAnimation.cumulative = YES;   rotationAnimation.repeatCount = HUGE_VALF;   [_progressLayer addAnimation:rotationAnimation forKey:@"rotationAnimation"];  } } - (void)hide {  [_progressLayer removeAllAnimations];  [self removeFromSuperview]; } @end

调用:

#import "ViewController.h" #import "CircleLoader.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {  [super viewDidLoad];  // Do any additional setup after loading the view, typically from a nib.  //设置视图大小  CircleLoader *view=[[CircleLoader alloc]initWithFrame:CGRectMake(100, 100, 70, 70)];  //设置轨道颜色  view.trackTintColor=[UIColor redColor];  //设置进度条颜色  view.progressTintColor=[UIColor greenColor];  //设置轨道宽度  view.lineWidth=5.0;   //设置进度  view.progressValue=0.7;  //设置是否转到 YES进度不用设置  view.animationing=YES;  //添加中间图片  不设置则不显示  view.centerImage=[UIImage imageNamed:@"yzp_loading"];  //添加视图  [self.view addSubview:view];  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{   //视图隐藏 //  [view hide];  }); } - (void)didReceiveMemoryWarning {  [super didReceiveMemoryWarning];  // Dispose of any resources that can be recreated. } @end