CAShapeLayer实现圆形进度条效果

一、CAShapeLayer简单介绍:

、CAShapeLayer继承至CALayer，能够使用CALayer的全部属性值

2、CAShapeLayer须要与贝塞尔曲线配合使用才有意义

3、使用CAShapeLayer与贝塞尔曲线能够实现不在view的drawRect方法中画出一些想要的图形

4、CAShapeLayer属于CoreAnimation框架，其动画渲染直接提交到手机的GPU其中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用情况

五角星动画

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic,strong) NSTimer      *timer;

@property (nonatomic,strong) CAShapeLayer *shapeLayer;

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

//
创建shapeLayer

_shapeLayer = [CAShapeLayerlayer];

_shapeLayer.frame         = (CGRect){CGPointMake(,), CGSizeMake(,)};

_shapeLayer.position      =self.view.center;

_shapeLayer.path          = [selfgetStar1BezierPath].CGPath;

_shapeLayer.fillColor     = [UIColorclearColor].CGColor;

_shapeLayer.strokeColor   = [UIColorredColor].CGColor;

_shapeLayer.lineWidth     =2.f;

[self.view.layeraddSublayer:_shapeLayer];

//
创建定时器

_timer = [NSTimerscheduledTimerWithTimeInterval:1.f

target:self

selector:@selector(pathAnimation)

userInfo:nil

repeats:YES];

}

/**

*  运行path的动画

*/

- (void)pathAnimation {

;

==) {

CABasicAnimation *circleAnim = [CABasicAnimationanimationWithKeyPath:@"path"];

circleAnim.removedOnCompletion =NO;

circleAnim.;

circleAnim.fromValue           = (__bridgeid)[self getStar1BezierPath].CGPath;

circleAnim.toValue             = (__bridgeid)[self getStar2BezierPath].CGPath;

_shapeLayer.path               = [selfgetStar2BezierPath].CGPath;

[_shapeLayeraddAnimation:circleAnim forKey:@"animateCirclePath"];

}else {

CABasicAnimation *circleAnim = [CABasicAnimationanimationWithKeyPath:@"path"];

circleAnim.removedOnCompletion =NO;

circleAnim.;

circleAnim.fromValue           = (__bridgeid)[self getStar2BezierPath].CGPath;

circleAnim.toValue             = (__bridgeid)[self getStar1BezierPath].CGPath;

_shapeLayer.path               = [selfgetStar1BezierPath].CGPath;

[_shapeLayeraddAnimation:circleAnim forKey:@"animateCirclePath"];

}

}

/**

*  贝塞尔曲线1

*

*  @return 贝塞尔曲线

*/

-(UIBezierPath *)getStar1BezierPath {

//// Star Drawing

UIBezierPath* starPath = [UIBezierPathbezierPath];

[starPathmoveToPoint: CGPointMake(22.5,2.5)];

[starPath addLineToPoint:CGPointMake(28.32,14.49)];

[starPath addLineToPoint:CGPointMake(41.52,16.32)];

[starPath addLineToPoint:CGPointMake(31.92,25.56)];

[starPath addLineToPoint:CGPointMake(34.26,38.68)];

[starPath addLineToPoint:CGPointMake(22.5,32.4)];

[starPath addLineToPoint:CGPointMake(10.74,38.68)];

[starPath addLineToPoint:CGPointMake(13.08,25.56)];

[starPath addLineToPoint:CGPointMake(3.48,16.32)];

[starPath addLineToPoint:CGPointMake(16.68,14.49)];

[starPathclosePath];

return starPath;

}

/**

*  贝塞尔曲线2

*

*  @return 贝塞尔曲线

*/

-(UIBezierPath *)getStar2BezierPath {

//// Star Drawing

UIBezierPath* starPath = [UIBezierPathbezierPath];

[starPathmoveToPoint: CGPointMake(22.5,2.5)];

[starPath addLineToPoint:CGPointMake(32.15,9.21)];

[starPath addLineToPoint:CGPointMake(41.52,16.32)];

[starPath addLineToPoint:CGPointMake(38.12,27.57)];

[starPath addLineToPoint:CGPointMake(34.26,38.68)];

[starPath addLineToPoint:CGPointMake(22.5,38.92)];

[starPath addLineToPoint:CGPointMake(10.74,38.68)];

[starPath addLineToPoint:CGPointMake(6.88,27.57)];

[starPath addLineToPoint:CGPointMake(3.48,16.32)];

[starPath addLineToPoint:CGPointMake(12.85,9.21)];

[starPathclosePath];

return starPath;

}

@end

二、贝塞尔曲线与CAShapeLayer的关系

1、CAShapeLayer中有Shape这个单词。顾名思义，它须要一个形状才干生效

2、贝塞尔曲线能够创建基于矢量的路径

3、贝塞尔曲线给CAShapeLayer提供路径。CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以路径绘制出了Shape

4、用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

注意：shape的frame
要大于BezierPath的frame.BezierPath不会由于share的frame而拉升。否则BezierPath截断

- (void)viewDidLoad {

[superviewDidLoad];

//创建椭圆形贝塞尔曲线

UIBezierPath *oval = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(,,
,)];

//创建矩形贝塞尔曲线

UIBezierPath *rect = [UIBezierPathbezierPathWithRect:CGRectMake(,,
,)];

//创建圆形贝塞尔曲线

UIBezierPath *circle = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(,,
,)];

//
创建CAShapeLayer

CAShapeLayer *shape = [CAShapeLayerlayer];

shape.frame         =CGRectMake(,,
, );

shape.position      =self.view.center;

//
显示CAShapeLayer的边界

shape.borderWidth   =1.f;

//
禁止内容显示超出CAShapeLayer的frame值

shape.masksToBounds =YES;

//改动贝塞尔曲线的填充颜色

shape.fillColor     = [UIColorredColor].CGColor;

//
建立贝塞尔曲线与CAShapeLayer之间的关联

shape.path = circle.CGPath;

//
加入并显示

[self.view.layeraddSublayer:shape];

}

三、StrokeStart与StrokeEnd动画

、将ShapeLayer的fillColor设置成透明背景

2、设置线条的宽度（lineWidth）的值

3、设置线条的颜色

、将strokeStart值设定成，然后让strokeEnd的值变化触发隐式动画

@interface ViewController ()

@property (nonatomic,strong) NSTimer      *timer;    
// 定时器

@property (nonatomic,strong) CAShapeLayer *shapeLayer;//
形状layer

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

//
设置背景色

];

//创建椭圆形贝塞尔曲线

UIBezierPath *oval        = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(,,
,)];

//
创建CAShapeLayer

_shapeLayer               = [CAShapeLayerlayer];

_shapeLayer.frame         =CGRectMake(,,
, );

_shapeLayer.position      =self.view.center;

//
改动CAShapeLayer的线条相关值

_shapeLayer.fillColor     = [UIColorclearColor].CGColor;

_shapeLayer.strokeColor   = [UIColorredColor].CGColor;

_shapeLayer.lineWidth     =2.f;

_shapeLayer.strokeStart   =0.f;

_shapeLayer.strokeEnd     =0.f;

//
建立贝塞尔曲线与CAShapeLayer之间的关联

_shapeLayer.path          = oval.CGPath;

//
加入并显示

[self.view.layeraddSublayer:_shapeLayer];

//
创建定时器

_timer = [NSTimerscheduledTimerWithTimeInterval:1.f

target:self

selector:@selector(animationEventTypeTwo)

userInfo:nil

repeats:YES];

}

/**

*  动画效果1

*/

- (void)animationEventTypeOne {

//
运行隐式动画

_shapeLayer.strokeEnd =arc4random() % /100.f;

}

/**

*  动画效果2

*/

- (void)animationEventTypeTwo {

CGFloat valueOne = arc4random() % /
100.f;

CGFloat valueTwo = arc4random() % /
100.f;

// storkeStar
与storkeEnd同一时候赋值。strokeStart要小于strokeEnd的值

//
运行隐式动画

_shapeLayer.strokeStart = valueOne < valueTwo ?

valueOne : valueTwo;

_shapeLayer.strokeEnd   = valueOne > valueTwo ?

valueOne : valueTwo;

}

@end

四、用CAShapeLayer实现圆形进度条效果

1、确定须要设定的參数

2、实现细节

3、进行測试

@interface CircleView :UIView

@property (nonatomic,assign) CGFloat  startValue;//
起始值（0~1）

@property (nonatomic,assign) CGFloat  lineWidth;
// 线宽(>0)

@property (nonatomic,strong) UIColor *lineColor;
// 线条颜色

@property (nonatomic,assign) CGFloat  value;    
// 变化的值

@end

#import "CircleView.h"

@interface CircleView ()

@property (nonatomic,strong)
CAShapeLayer *shapeLayer;

@end

@implementation CircleView

- (instancetype)initWithFrame:(CGRect)frame {

self = [superinitWithFrame:frame];

if (self) {

//
创建出CAShapeLayer

_shapeLayer       = [CAShapeLayerlayer];

_shapeLayer.frame =self.bounds;

//
创建出贝塞尔曲线

UIBezierPath *path = [UIBezierPathbezierPathWithOvalInRect:self.bounds];

//
贝塞尔曲线与CAShapeLayer产生关联

_shapeLayer.path = path.CGPath;

// 基本配置

_shapeLayer.fillColor   = [UIColorclearColor].CGColor;

_shapeLayer.lineWidth   =1.f;

_shapeLayer.strokeColor = [UIColorredColor].CGColor;

_shapeLayer.strokeEnd   =0.f;

//
加入到当前view

[self.layeraddSublayer:_shapeLayer];

}

return
self;

}

@synthesize startValue =_startValue;

- (void)setStartValue:(CGFloat)startValue {

_startValue           = startValue;

_shapeLayer.strokeEnd = startValue;

}

- (CGFloat)startValue {

return_startValue;

}

@synthesize lineWidth =_lineWidth;

- (void)setLineWidth:(CGFloat)lineWidth {

_lineWidth            = lineWidth;

_shapeLayer.lineWidth = lineWidth;

}

- (CGFloat)lineWidth {

return_lineWidth;

}

@synthesize lineColor =_lineColor;

- (void)setLineColor:(UIColor *)lineColor {

_lineColor              = lineColor;

_shapeLayer.strokeColor = lineColor.CGColor;

}

- (UIColor *)lineColor {

return_lineColor;

}

@synthesize value = _value;

- (void)setValue:(CGFloat)value {

_value                = value;

_shapeLayer.strokeEnd = value;

}

- (CGFloat)value {

return _value;

}

@end

#import "CircleView.h"

@interface
ViewController ()

{

CircleView *circle;

}

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

circle             = [[CircleViewalloc] initWithFrame:CGRectMake(,,
, )];

circle.center      =self.view.center;

circle.startValue  =0.5;

circle.lineWidth   =3.f;

circle.lineColor   = [UIColorgrayColor];

[self.viewaddSubview:circle];

[selfperformSelector:@selector(delayAnimation)

withObject:nil

afterDelay:3.f];

}

- (void)delayAnimation {

circle.value =1.f;

}

@end