iOS- CAShapeLayer与贝塞尔曲线初识

当我们要自己画一个圆或者说是按百分比显示圆的动画时，CAShapeLayer是非常有用的，因为这是一个基于CoreAnimation框架的类，动画渲染是直接由CPU渲染的。一般来说，他与贝塞尔曲线的结合使用比较常见。废话不多说，直接代码，浅讲一下他的用法。

//
//  CircleView.h
//  圆形进度条Demo
//
//  Created by 程磊 on 15/4/28.
//  Copyright (c) 2015年 程磊. All rights reserved.
//

#import <UIKit/UIKit.h>

@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

//
//  CircleView.m
//  圆形进度条Demo
//
//  Created by 程磊 on 15/4/28.
//  Copyright (c) 2015年 程磊. All rights reserved.
//

#import "CircleView.h"

@interface CircleView ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CircleView

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        _shapeLayer = [CAShapeLayer layer];//初始化一个CAShapeLayer
        _shapeLayer.frame = self.bounds;//其frame
        
        //贝塞尔曲线
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];//初始化一个用WithOvalInrect，这个frame与上边的frame无关
        _shapeLayer.path = path.CGPath;//将贝塞尔曲线与其相关联起来
        _shapeLayer.fillColor = [UIColor clearColor].CGColor;//所围成的图形填充颜色
        _shapeLayer.lineWidth = 1;//边界线宽度
        _shapeLayer.strokeStart = 0.f;//起始点
        _shapeLayer.strokeColor = [UIColor redColor].CGColor;//边界线颜色
        
        _shapeLayer.strokeEnd = 0.f;//终结点
        
        
        [self.layer addSublayer:_shapeLayer];
    }
    return self;
}

@synthesize startValue = _startValue;
- (void)setStartValue:(CGFloat)startValue {
    _startValue = startValue;
    _shapeLayer.strokeStart = 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

//
//  ViewController.m
//  圆形进度条Demo
//
//  Created by 程磊 on 15/4/28.
//  Copyright (c) 2015年 程磊. All rights reserved.
//

#import "ViewController.h"
#import "CircleView.h"

@interface ViewController ()

@property (nonatomic, assign) double percent;

@property (nonatomic, strong) NSTimer *timer;

@property (nonatomic, strong) CircleView *circle;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _percent = 0;
    _circle = [[CircleView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    _circle.center = self.view.center;
    _circle.startValue = 0.f;
    _circle.lineWidth = 5;
    _circle.lineColor = [UIColor greenColor];
    [self.view addSubview:_circle];
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(circleAnimation) userInfo:nil repeats:YES];
}

- (void)circleAnimation{
    _percent += 0.01;
    _circle.value = _percent;
    if (_percent >= 1.0) {
        _percent = 0;
    }
}


@end