iOS 百分比圆环进度动态效果

效果图:
![progress.gif](http://upload-images.jianshu.io/upload_images/726092-baf9ee73fd3ddb92.gif?imageMogr2/auto-orient/strip)

UIBezierPath类简介
使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

1.Bezier Path 基础
UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

创建和使用一个path对象的过程是分开的。创建path是第一步,包含一下步骤:
(1)创建一个Bezier path对象。
(2)使用方法moveToPoint:去设置初始线段的起点。
(3)添加line或者curve去定义一个或者多个subpaths。
(4)改变UIBezierPath对象跟绘图相关的属性。
例如,我们可以设置stroked path的属性lineWidth和lineJoinStyle。也可以设置filled path的属性usesEvenOddFillRule。

当创建path,我们应该管理path上面的点相对于原点(0,0),这样我们在随后就可以很容易的移动path了。为了绘制path对象,我们要用到stroke和fill方法。这些方法在current graphic context下渲染path的line和curve段。

2、使用UIBezierPath创建多边形—在path下面添加直线条形成多边形
多边形是一些简单的形状,这些形状是由一些直线线条组成,我们可以用moveToPoint: 和 addLineToPoint:方法去构建。
方法moveToPoint:设置我们想要创建形状的起点。从这点开始,我们可以用方法addLineToPoint:去创建一个形状的线段。
我们可以连续的创建line,每一个line的起点都是先前的终点,终点就是指定的点。

代码实现:
HYCircleProgressView.h文件

#import <UIKit/UIKit.h>

@interface HYCircleProgressView : UIView
/**
*进度条宽度
*/
@property (nonatomic,assign) CGFloat progressLineWidth;
/**
* 背景线条宽度
*/
@property (nonatomic,assign) CGFloat backgroundLineWidth;
/**
* 进度百分比
*/
@property (nonatomic,assign) CGFloat percentage;
/**
* 背景填充颜色
*/
@property (nonatomic,strong) UIColor *backgroundStrokeColor;
/**
* 进度条填充颜色
*/
@property (nonatomic,strong) UIColor *progressStrokeColor;
/**
* 距离边框边距偏移量
*/
@property (nonatomic,assign) CGFloat offset;
/**
* 步长
*/
@property (nonatomic,assign) CGFloat step;
/**
* 数字字体颜色
*/
@property (nonatomic,strong) UIColor *digitTintColor;

– (void)setProgress:(CGFloat)percentage animated:(BOOL)animated;

@end

HYCircleProgressView.m文件

#import “HYCircleProgressView.h”

#define kDuration 2.0
#define kDefaultLineWidth 10

@interface HYCircleProgressView()

@property (nonatomic,strong) CAShapeLayer *backgroundLayer;
@property (nonatomic,strong) CAShapeLayer *progressLayer;
@property (nonatomic,strong) UILabel *progressLabel;
@property (nonatomic,assign) CGFloat sumSteps;
@property (nonatomic,strong) NSTimer *timer;

@end

@implementation HYCircleProgressView

– (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setBackgroundColor:[UIColor clearColor]];
[self createSubViews];
//init default variable
self.backgroundLineWidth = kDefaultLineWidth;
self.progressLineWidth = kDefaultLineWidth;
self.percentage = 0;
self.offset = 0;
self.sumSteps = 0;
self.step = 0.1;
}
return self;
}

– (void)createSubViews
{
self.progressLabel.text = @”0%”;
self.progressLabel.textAlignment = NSTextAlignmentCenter;
self.progressLabel.font = [UIFont systemFontOfSize:25 weight:0.4];
[self addSubview:self.progressLabel];

_backgroundLayer = [CAShapeLayer layer];
_backgroundLayer.frame = self.bounds;
_backgroundLayer.fillColor = nil;
_backgroundLayer.strokeColor = [UIColor lightGrayColor].CGColor;

_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = nil;
_progressLayer.strokeColor = [UIColor redColor].CGColor;

[self.layer addSublayer:_backgroundLayer];
[self.layer addSublayer:_progressLayer];
}

#pragma mark – draw circleLine
– (void)setBackgroundCircleLine
{
UIBezierPath *path = [UIBezierPath bezierPath];
path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x – self.frame.origin.x, self.center.y – self.frame.origin.y)
radius:(self.frame.size.width – _backgroundLineWidth)/2 – _offset
startAngle:0
endAngle:M_PI*2
clockwise:YES];

_backgroundLayer.path = path.CGPath;
}

– (void)setProgressCircleLine
{
UIBezierPath *path = [UIBezierPath bezierPath];
path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x – self.frame.origin.x, self.center.y – self.frame.origin.y)
radius:(self.frame.size.width – _progressLineWidth)/2 – _offset
startAngle:-M_PI_2
endAngle:-M_PI_2 + M_PI *2
clockwise:YES];

_progressLayer.path = path.CGPath;
}

#pragma mark -setter and get method
– (UILabel *)progressLabel
{
if (!_progressLabel) {
_progressLabel = [[UILabel alloc]initWithFrame:CGRectMake((self.bounds.size.width -100)/2, (self.bounds.size.height – 100)/2, 100, 100)];
}
return _progressLabel;
}

– (void)setDigitTintColor:(UIColor *)digitTintColor
{
_digitTintColor = digitTintColor;
_progressLabel.textColor = _digitTintColor;
}

– (void)setBackgroundLineWidth:(CGFloat)backgroundLineWidth
{
_backgroundLineWidth = backgroundLineWidth;
_backgroundLayer.lineWidth = _backgroundLineWidth;
[self setBackgroundCircleLine];
}

– (void)setProgressLineWidth:(CGFloat)progressLineWidth
{
_progressLineWidth = progressLineWidth;
_progressLayer.lineWidth = _progressLineWidth;
[self setProgressCircleLine];
}

– (void)setPercentage:(CGFloat)percentage
{
_percentage = percentage;
}

– (void)setBackgroundStrokeColor:(UIColor *)backgroundStrokeColor
{
_backgroundStrokeColor = backgroundStrokeColor;
_backgroundLayer.strokeColor = _backgroundStrokeColor.CGColor;
}

– (void)setProgressStrokeColor:(UIColor *)progressStrokeColor
{
_progressStrokeColor = progressStrokeColor;
_progressLayer.strokeColor = _progressStrokeColor.CGColor;
}

#pragma mark – progress animated YES or NO
– (void)setProgress:(CGFloat)percentage animated: (BOOL)animated
{
self.percentage = percentage;
_progressLayer.strokeEnd = _percentage;
if (animated) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@”strokeEnd”];
animation.fromValue = [NSNumber numberWithFloat:0.0];
animation.toValue = [NSNumber numberWithFloat:_percentage];
animation.duration = kDuration;
//start timer
_timer = [NSTimer scheduledTimerWithTimeInterval:_step
target:self
selector:@selector(numberAnimation)
userInfo:nil
repeats:YES];

[_progressLayer addAnimation:animation forKey:@”strokeEndAnimation”];
}else{
[CATransaction begin];
[CATransaction setDisableActions:YES];
_progressLabel.text = [NSString stringWithFormat:@”%.0f%%”,_percentage*100];
[CATransaction commit];
}
}

– (void)numberAnimation
{
_sumSteps += _step;
float sumSteps = (_percentage/kDuration)*_sumSteps;
_progressLabel.text = [NSString stringWithFormat:@”%.0f%%”,sumSteps*100];
if (_sumSteps >= kDuration) {
//close timer
[_timer invalidate];
_timer = nil;
return;
}
}
@end
demo地址:https://github.com/huanghaiyan/HYCircleProgressView-master

发表评论

电子邮件地址不会被公开。 必填项已用*标注