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

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

#import UIKit/UIKit.h 

@interface CircleLoader : UIView

//进度颜色

@property(nonatomic, retain) UIColor* progressTintColor ;


 _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 ()

@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

效果:

iOS - Quartz 2D 贝塞尔曲线 1、贝塞尔曲线 贝塞尔曲线（Bézier curve），又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
p "author-img" src="https://ucc.alicdn.com/avatar/img_06f157c6c7fcd827543d1098fa1982ae.jpg?x-oss-process=image/resize,h_150,m_lfit" />
社会主义 从.Net到iOS,在撸的道路上越走越远，工作之余经营着博客园http://www.cnblogs.com/5ishare,欢迎小伙伴(妹子更好)一起交流,谈谈人生理想。作为经常从网上索取免费资料的一员，要有回报回报的思想，也让更多的人少走弯路.